/* hewy.ai, next design: photography that follows the time of day,
   in the reader's light or dark appearance. No outside fonts, and one small
   script of our own, for scroll motion (motion.js). */

:root {
  color-scheme: light dark;
  --bg: #fbfaf6;
  --text: #1b1e1c;
  --muted: #5d655f;
  --line: #e7e4da;
  --card: #ffffff;
  --accent: #1d7f3e;
  --button-bg: #1b1e1c;
  --button-text: #fbfaf6;
  --private-bg: #eef3ee;
  --radius: 22px;
  /* The brand: the logo's gradient, lime to green to teal (Colin,
     2026-10-18). Server colors are the rainbow; this is Hewy. */
  --brand-1: #7aa63f;
  --brand-2: #27a551;
  --brand-3: #1ba39b;
  --brand: linear-gradient(135deg, var(--brand-1), var(--brand-2) 50%, var(--brand-3));
  /* Behind screenshots: a soft green wash, a dark bezel, a long shadow. */
  --stage-a: #e6f0e9;
  --stage-b: #f4f2ea;
  --bezel: #1b1e1c;
  --shadow: 0 40px 80px -36px rgba(16, 40, 28, 0.42), 0 14px 28px -18px rgba(16, 40, 28, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1110;
    --text: #eaeeeb;
    --muted: #9aa49d;
    --line: #232a26;
    --card: #151a18;
    --accent: #5ccd84;
    --button-bg: #eaeeeb;
    --button-text: #0e1110;
    --private-bg: #121816;
    --stage-a: #14211b;
    --stage-b: #101412;
    --bezel: #353c38;
    --shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.8), 0 14px 28px -18px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }

/* Nothing may widen the page sideways. On the root, so phones' browsers
   apply it to the page itself (the body's alone didn't, 2026-10-21). */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

/* Long paths and commands in running text break rather than widen it. */
p code, li code, td code, dd code { overflow-wrap: anywhere; }

body {
  margin: 0;
  /* Nothing may widen the page sideways, the wide rows included. */
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3 { text-wrap: balance; }

.wrap {
  width: min(1120px, 100% - 32px);
  margin-inline: auto;
}

/* Header */
.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line);
}

.bar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 18px;
  text-decoration: none;
}

.brand .mark {
  width: 28px;
  height: 27px;
  color: var(--text);
  /* Aligned by the bubble, not the whole mark: the tail hangs below the
     word, as a speech bubble's does, so the bubble's middle meets the
     middle of "Hewy". */
  translate: 0 2.5px;
}

.brand span { letter-spacing: -0.01em; }

.links a[aria-current] { color: var(--text); }

.links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 15px;
}

.links a {
  text-decoration: none;
  color: var(--muted);
}

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

/* Phones: the links behind a menu button (a <details>, as the site runs no scripts) */
.menu { display: none; position: relative; }

.menu summary {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.menu summary::-webkit-details-marker { display: none; }

.menu summary svg { width: 20px; height: 20px; }

.menu nav {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.menu nav a {
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
}

.menu nav a:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }

.menu nav a[aria-current] { color: var(--accent); font-weight: 600; }

.pill {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}

/* Hero: a night sky with a slow aurora in the servers' own colors (after
   termius.com's blue one), in either appearance. It ends partway down the
   product, fading into the page. */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(56px, 9vw, 112px);
}

.sky {
  position: absolute;
  inset: 0 0 clamp(150px, 24vw, 360px) 0;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #0b2a22 0%, #04140f 55%, #020a07 100%);
}

.sky::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: clamp(120px, 16vw, 220px);
  background: linear-gradient(to bottom, transparent, var(--bg));
}

.sky span {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.sky span:nth-child(1) {
  top: -30%;
  left: -20%;
  width: 80%;
  height: 90%;
  background: radial-gradient(closest-side, rgba(122, 166, 63, 0.5), transparent);
  transform: rotate(-24deg);
}

.sky span:nth-child(2) {
  top: -10%;
  right: -25%;
  width: 70%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(27, 163, 155, 0.48), transparent);
}

.sky span:nth-child(3) {
  top: 22%;
  left: 25%;
  width: 60%;
  height: 55%;
  background: radial-gradient(closest-side, rgba(39, 165, 81, 0.42), transparent);
}

/* A long diagonal beam */
.sky span:nth-child(4) {
  top: -40%;
  left: 38%;
  width: 26%;
  height: 180%;
  background: radial-gradient(closest-side, rgba(70, 200, 150, 0.3), transparent);
  transform: rotate(32deg);
}

.hero .eyebrow { color: #a8e2a0; }

.hero h1 {
  background: linear-gradient(100deg, #b9dcc4 0%, #effaf2 42%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .lede { color: rgba(222, 240, 230, 0.8); }

/* "AI agents", in the brand's gradient. */
.hero h1 .spectrum {
  /* The three stops, their hues kept and lifted for the dark sky. */
  background: linear-gradient(100deg, #a8dc55 0%, #3fd474 50%, #26d3c6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .button { background: var(--brand); color: #fff; }

.hero .text-link { color: #a8e2a0; }

.hero-text { text-align: center; }

.hero-text h1 { max-width: 940px; margin-inline: auto; }

.hero-text .lede { margin-inline: auto; }

.hero-text .cta { justify-content: center; }

.eyebrow {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
}

h1 {
  margin: 0;
  font-size: clamp(2.5rem, 6.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 750;
}

.lede {
  margin: 22px 0 0;
  max-width: 660px;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--muted);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin: 30px 0 0;
}

.button {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-text);
  font-weight: 600;
  font-size: 16px;
}

.text-link {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.text-link:hover { text-decoration: underline; }

/* The product: the Mac's window, with the iPhone in front of it */
.showcase {
  position: relative;
  /* A compact window (980 pt), shown a little larger than the app draws it. */
  width: min(1100px, calc(100% - 32px));
  margin-inline: auto;
  margin-top: clamp(40px, 7vw, 72px);
  padding-bottom: clamp(28px, 5vw, 56px);
}

.window {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(8px, 1.1vw, 14px);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}

.phone {
  display: block;
  height: auto;
  border-radius: 12.5% / 5.75%;
  background: #000;
  box-shadow: 0 0 0 clamp(3px, 0.45vw, 6px) var(--bezel), var(--shadow);
}

.showcase .phone {
  position: absolute;
  right: 1.5%;
  bottom: 0;
  width: 19%;
}

/* Where the page has room, the iPhone hangs off the window's right edge
   rather than covering its approval. */
@media (min-width: 1240px) {
  .showcase .phone { right: -5%; width: 20%; }
}

@media (min-width: 1400px) {
  .showcase .phone { right: -9%; width: 21%; }
}

/* A full-width photograph, cropped to a wide band */
.band {
  margin: clamp(64px, 10vw, 128px) 0 0;
}

.band img {
  display: block;
  width: 100%;
  height: clamp(320px, 52vw, 680px);
  object-fit: cover;
  object-position: 50% 62%;
}

.band figcaption {
  padding-top: 12px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

/* Why */
.why { padding: clamp(48px, 8vw, 96px) 0 0; }

.columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 36px;
}

.columns .glyph { width: 48px; height: 48px; margin-bottom: 16px; }

@media (max-width: 799px) {
  .columns { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .columns > div { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; }
  .columns .glyph { grid-row: span 2; margin: 2px 0 0; }
  .columns h2, .columns p { grid-column: 2; }
}

.columns h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.columns p { margin: 0; color: var(--muted); }

/* Features: words on one side, the app on the other, alternating */
.features { padding: clamp(24px, 4vw, 48px) 0 0; }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(40px, 7vw, 88px) 0;
}

.feature.flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }

/* A feature that wants the page's width: the words above, centred */
.feature.wide { grid-template-columns: minmax(0, 1fr); }

.feature.wide .feature-text {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

/* A wide row's picture reaches past the text, as the hero's does. */
.feature.wide .stage {
  width: min(1360px, calc(100vw - 64px));
  margin-left: 50%;
  translate: -50% 0;
}

.feature.wide .points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 28px;
}

.feature.flip .feature-text { order: 2; }

.feature-text h2 {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
}

.feature-text p { margin: 0; font-size: 1.1rem; color: var(--muted); }

.feature-text .eyebrow {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--accent);
}

.points {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.points li {
  position: relative;
  padding: 5px 0 5px 28px;
}

.points li::before {
  content: "✓";
  position: absolute;
  left: 3px;
  color: var(--accent);
  font-weight: 700;
}

.stage {
  padding: clamp(16px, 2.6vw, 32px);
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--stage-a), var(--stage-b));
}

/* Each feature takes a server color: its eyebrow and ticks in the color's
   ink, a chip in its gradient beside the eyebrow, and a wash behind its
   picture that glows from the corner. --t1 to --t3 are the preset's
   gradient (ServerLook.palettes), --ink its text color on this page. */
.tint-orange { --t1: #ffc65c; --t2: #f27a33; --t3: #a13d1c; --ink: #c2561a; }
.tint-indigo { --t1: #8fa8ff; --t2: #4f63e0; --t3: #2a2f8c; --ink: #4357d0; }
.tint-rose { --t1: #ff93b4; --t2: #e2487c; --t3: #8c1f4a; --ink: #c23468; }
.tint-teal { --t1: #67d5c9; --t2: #12988f; --t3: #0b5a55; --ink: #0f8178; }
.tint-sky { --t1: #7fd3f7; --t2: #1aa0d6; --t3: #0e5f86; --ink: #137fb0; }
.tint-yellow { --t1: #ffe07a; --t2: #f2b425; --t3: #9c6a0e; --ink: #9a6a06; }
.tint-violet { --t1: #ad93fb; --t2: #6d52dc; --t3: #392a85; --ink: #5f45cf; }
.tint-green { --t1: #2cacac; --t2: #35a767; --t3: #3b6a32; --ink: #1f7a4a; }
.tint-lime { --t1: #c6ea6f; --t2: #79c043; --t3: #3c7425; --ink: #457d22; }
.tint-fuchsia { --t1: #ec8cf5; --t2: #b53ac2; --t3: #6a1e74; --ink: #a02fae; }
.tint-blue { --t1: #4cc0f2; --t2: #2f7bdb; --t3: #24408f; --ink: #2a6fc9; }

@media (prefers-color-scheme: dark) {
  .tint-orange { --ink: #ffaa66; }
  .tint-indigo { --ink: #9fb3ff; }
  .tint-rose { --ink: #ff8fb1; }
  .tint-teal { --ink: #5fd6c8; }
  .tint-sky { --ink: #7cd2f7; }
  .tint-yellow { --ink: #ffd36a; }
  .tint-violet { --ink: #b9a3ff; }
  .tint-green { --ink: #5cc98e; }
  .tint-lime { --ink: #b1e07a; }
  .tint-fuchsia { --ink: #ea94f2; }
  .tint-blue { --ink: #7fb8ff; }
}

[class*="tint-"] { --accent: var(--ink); }

[class*="tint-"] .feature-text .eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
}

.feature.wide[class*="tint-"] .feature-text .eyebrow { justify-content: center; }

[class*="tint-"] .feature-text .eyebrow::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 23%;
  background: linear-gradient(135deg, var(--t1), var(--t2) 52%, var(--t3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

[class*="tint-"] .stage {
  background:
    radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--t2) 24%, transparent), transparent 62%),
    radial-gradient(70% 90% at 100% 100%, color-mix(in srgb, var(--t1) 18%, transparent), transparent 60%),
    linear-gradient(150deg, color-mix(in srgb, var(--t1) 10%, var(--bg)), var(--stage-b));
}

@media (prefers-color-scheme: dark) {
  [class*="tint-"] .stage {
    background:
      radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--t2) 30%, transparent), transparent 62%),
      radial-gradient(70% 90% at 100% 100%, color-mix(in srgb, var(--t3) 34%, transparent), transparent 60%),
      linear-gradient(150deg, color-mix(in srgb, var(--t3) 22%, var(--bg)), var(--stage-b));
  }
}

/* The colors' own stage: all of them, softly. */
.spectrum-stage.spectrum-stage {
  background:
    radial-gradient(60% 70% at 0% 0%, rgba(79, 99, 224, 0.3), transparent 70%),
    radial-gradient(60% 70% at 100% 0%, rgba(226, 72, 124, 0.26), transparent 70%),
    radial-gradient(60% 70% at 100% 100%, rgba(242, 180, 37, 0.28), transparent 70%),
    radial-gradient(60% 70% at 0% 100%, rgba(18, 152, 143, 0.28), transparent 70%),
    var(--stage-b);
}

/* A picture with a second one laid over its corner, larger screens only. */
.stage.layered { position: relative; }

/* It hangs off the main picture's right edge (886 pt wide, centred in the
   stage), never past the stage's. */
.stage.layered .layer {
  position: absolute;
  right: max(12px, calc(50% - 443px - 72px));
  /* Mostly below the stage, so it covers none of the messages. */
  bottom: calc(-1 * clamp(64px, 12vw, 172px));
  width: min(40%, 400px);
}

.stage.layered .layer .shot { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.45), 0 10px 20px -12px rgba(0, 0, 0, 0.3); }

.feature.wide .stage.layered { margin-bottom: clamp(64px, 12vw, 172px); }

.w886 { max-width: 886px; }
.fit-usage { --fit: 580px; }
.fit-colors { --fit: 500px; }

.stage picture { display: block; }

/* A screenshot cropped to what a feature is about, shown no larger than
   the app draws it (the max-widths are each crop's size in points). */
.shot {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}

.w720 { max-width: 720px; }

/* A picture narrower than its column: the stage hugs it, centred, and shows
   it a little larger than the app draws it (--fit, the picture's width). */
.stage.fit {
  justify-self: center;
  width: min(100%, calc(var(--fit) + 2 * clamp(16px, 2.6vw, 32px)));
}

.fit-keys { --fit: 500px; }
.fit-forwarding { --fit: 620px; }
.fit-rules { --fit: 585px; }
.w890 { max-width: 890px; }

.stage.phones {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 3.4vw, 40px);
}

.stage.phones picture { width: min(42%, 260px); }

.stage.phones .phone { width: 100%; }

@media (max-width: 860px) {
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); }
  .feature.flip .feature-text { order: 0; }
}

/* Phones get the iPhone's own screens, large enough to read: the hero
   shows the iPhone alone, and the approvals show one phone, not two. */
@media (max-width: 600px) {
  .showcase .phone-overlay { display: none; }
  .hero-shot {
    width: 68%;
    margin-inline: auto;
    border: 0;
    border-radius: 12.5% / 5.75%;
    background: #000;
    box-shadow: 0 0 0 4px var(--bezel), var(--shadow);
  }
  .stage { padding: 14px; }
  .stage.phones picture:first-child { display: none; }
  .stage.layered .layer { display: none; }
  .feature.wide .stage.layered { margin-bottom: 0; }
  .stage.phones picture { width: min(78%, 320px); }
  .feature.wide .feature-text { text-align: left; }
  .feature.wide .points { display: block; }
}

/* And everything around it, and the steps: tiles, each a small picture over
   a few words. Three to a row; one to a row with the picture beside the
   words on mid-size screens; stacked on phones. The pictures are drawn
   here rather than captured, so they're sharp at any size and follow the
   reader's light or dark appearance. */
.also { padding: clamp(32px, 5vw, 64px) 0 0; }

.steps { padding: clamp(56px, 9vw, 112px) 0 0; }

.section-title {
  margin: 0 auto 34px;
  text-align: center;
  max-width: 760px;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.art {
  container-type: inline-size;
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  padding: 22px;
  background: linear-gradient(150deg, var(--stage-a), var(--stage-b));
}

.tile-text { padding: 22px 24px 26px; }

.tile h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.tile-text p { margin: 0; color: var(--muted); }

/* The steps are numbered, in the brand's green. */
.step-tiles { counter-reset: step; }

.step-tiles .tile-text::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 899px) {
  .tiles { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
}

@media (min-width: 600px) and (max-width: 899px) {
  .tile { flex-direction: row; }
  .tile .art { flex: 0 0 50%; aspect-ratio: auto; min-height: 300px; }
  .tile-text { align-self: center; }
}

/* The pictures' pieces of app: a menu, a sheet, a list. */
.art {
  --mock-bg: #ffffff;
  --mock-text: #1d1d1f;
  --mock-muted: #86868b;
  --mock-field: #f1f1f3;
  --mock-line: rgba(0, 0, 0, 0.08);
  --ok: #34c759;
  --go: #2e9e57;
}

@media (prefers-color-scheme: dark) {
  .art {
    --mock-bg: #1f2422;
    --mock-text: #f1f4f2;
    --mock-muted: #97a19b;
    --mock-field: #2b312e;
    --mock-line: rgba(255, 255, 255, 0.09);
    --ok: #30d158;
    --go: #34a85f;
  }
}

.mock {
  width: 100%;
  max-width: 330px;
  padding: 1em 1.05em 1.05em;
  border-radius: 14px;
  background: var(--mock-bg);
  color: var(--mock-text);
  font-size: clamp(12px, 4.8cqi, 16px);
  line-height: 1.35;
  box-shadow: 0 0 0 0.5px var(--mock-line), 0 22px 44px -22px rgba(16, 40, 28, 0.5), 0 8px 16px -10px rgba(16, 40, 28, 0.25);
}

.mock p { margin: 0; color: inherit; }

.mock ul { margin: 0; padding: 0; list-style: none; }

.mock .mock-title { margin-bottom: 0.8em; font-weight: 650; }

.mock .mock-label {
  margin: 0 0 0.35em 0.45em;
  color: var(--mock-muted);
  font-size: 0.82em;
  font-weight: 600;
}

/* An agent picker, like the chat's menu */
.picker li {
  display: grid;
  grid-template-columns: 1.1em auto 1fr;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.6em;
  border-radius: 0.55em;
}

.picker li b { font-weight: 600; }

.picker li span {
  justify-self: end;
  color: var(--mock-muted);
  font-size: 0.86em;
  white-space: nowrap;
}

.picker .chosen { background: var(--mock-field); }

.tick { width: 1.1em; height: 1.1em; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.mock .mock-note {
  margin: 0.7em 0.45em 0;
  padding-top: 0.75em;
  border-top: 1px solid var(--mock-line);
  color: var(--accent);
  font-size: 0.86em;
  font-weight: 600;
}

/* Kinds of machine, as rounded icons in the app icon's style: a light
   color at the top left, deepening to the bottom right. */
.devices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1em 0.6em;
  width: 100%;
  max-width: 330px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(12px, 4.8cqi, 16px);
  text-align: center;
  color: var(--text);
}

.devices li { display: grid; justify-items: center; gap: 0.5em; font-size: 0.86em; font-weight: 550; }

.glyph {
  display: grid;
  place-items: center;
  width: 3.6em;
  height: 3.6em;
  border-radius: 23%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 18px -10px rgba(16, 40, 28, 0.55);
}

.devices .glyph { width: 4.4em; height: 4.4em; }

.glyph svg {
  width: 58%;
  height: 58%;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.g-green { background: linear-gradient(135deg, #2cacac, #35a767 52%, #3b6a32); }
.g-brand { background: var(--brand); }
.g-blue { background: linear-gradient(135deg, #4cc0f2, #2f7bdb 52%, #24408f); }
.g-lime { background: linear-gradient(135deg, #c6ea6f, #79c043 52%, #3c7425); }
.g-graphite { background: linear-gradient(135deg, #a9b3bd, #66717c 52%, #30363d); }
.g-rose { background: linear-gradient(135deg, #ff93b4, #e2487c 52%, #8c1f4a); }
.g-violet { background: linear-gradient(135deg, #ad93fb, #6d52dc 52%, #392a85); }
.g-orange { background: linear-gradient(135deg, #ffc65c, #f27a33 52%, #a13d1c); }

/* A Mac and an iPhone, locked together */
.sync { width: 100%; max-width: 360px; font-size: clamp(12px, 4.8cqi, 16px); }

.ends { display: flex; align-items: center; gap: 0.5em; }

.ends .mac { width: 40%; flex: none; }

.ends .iphone { width: 15%; flex: none; }

.ends .mac, .ends .iphone { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

.ends .screen { fill: var(--mock-bg); }

.ends .rows { stroke: var(--accent); stroke-width: 2.2; opacity: 0.55; }

.ends .link { flex: 1; border-top: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); }

.ends .glyph { flex: none; width: 3.3em; height: 3.3em; }

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45em;
  margin: 1.4em 0 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 0.3em 0.75em;
  border-radius: 999px;
  background: var(--mock-bg);
  box-shadow: 0 0 0 0.5px var(--mock-line), 0 4px 10px -6px rgba(16, 40, 28, 0.35);
  font-size: 0.86em;
  font-weight: 550;
}

/* A new server's sheet */
.mock .field {
  display: grid;
  grid-template-columns: 4.4em minmax(0, 1fr);
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.45em;
}

.field span { justify-self: end; color: var(--mock-muted); font-size: 0.9em; }

.field b {
  overflow: hidden;
  padding: 0.32em 0.6em;
  border-radius: 0.45em;
  background: var(--mock-field);
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mock .mock-buttons { display: flex; justify-content: flex-end; gap: 0.5em; margin-top: 0.9em; }

.mock-buttons span { padding: 0.3em 0.95em; border-radius: 0.5em; background: var(--mock-field); font-weight: 500; }

.mock-buttons .go { background: var(--go); color: #fff; }

/* Setup's checklist. As the reader scrolls, the steps tick off in turn
   (motion.js sets --p); without motion, all are done. */
.setup li {
  display: grid;
  grid-template-columns: 1.15em minmax(0, 1fr);
  align-items: start;
  gap: 0.6em;
  padding: 0.38em 0;
}

.setup li + li { border-top: 1px solid var(--mock-line); }

.state { position: relative; width: 1.15em; height: 1.15em; margin-top: 0.08em; }

.state svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.todo circle { fill: none; stroke: var(--mock-muted); stroke-width: 1.4; opacity: 0.6; }

.ok circle { fill: var(--ok); }

.ok path { fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.setup li { --done: clamp(0, calc((var(--p, 1) - var(--at)) * 14), 1); }
.setup li:nth-child(1) { --at: 0.12; }
.setup li:nth-child(2) { --at: 0.26; }
.setup li:nth-child(3) { --at: 0.4; }
.setup li:nth-child(4) { --at: 0.54; }
.setup li:nth-child(5) { --at: 0.7; }

.setup .ok { opacity: var(--done); transform: scale(calc(0.6 + var(--done) * 0.4)); }

.setup .todo { opacity: calc(1 - var(--done)); }

.sudo {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0 0.45em;
  border-radius: 0.4em;
  background: color-mix(in srgb, #ff9f0a 18%, transparent);
  color: #c46a00;
  font-size: 0.8em;
  font-style: normal;
  font-weight: 600;
  vertical-align: 0.08em;
}

@media (prefers-color-scheme: dark) {
  .sudo { color: #ffb340; }
}

/* An iPhone's lock screen, with the agent asking. The notice slides up
   as the reader scrolls to it. */
.lock-screen {
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(92, 201, 142, 0.55), transparent 60%),
    radial-gradient(90% 70% at 100% 30%, rgba(44, 172, 172, 0.45), transparent 65%),
    linear-gradient(180deg, #0b2a1d, #06140e);
  color: #fff;
}

.lock { width: 100%; max-width: 340px; font-size: clamp(12px, 4.6cqi, 16px); text-align: center; }

.lock p { margin: 0; }

.lock .date { font-size: 0.95em; font-weight: 600; opacity: 0.85; }

.lock .time { margin-bottom: 0.7em; font-size: 4.2em; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }

.notice {
  --in: clamp(0, calc((var(--p, 1) - 0.3) * 3), 1);
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  gap: 0.7em;
  align-items: center;
  padding: 0.75em 0.85em;
  border-radius: 1.3em;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.35), 0 12px 30px -16px rgba(0, 0, 0, 0.6);
  text-align: left;
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * 1.6em)) scale(calc(0.94 + var(--in) * 0.06));
}

.notice img { width: 2.6em; height: 2.6em; border-radius: 23%; }

.notice p { font-size: 0.92em; line-height: 1.3; }

.notice-top { display: flex; justify-content: space-between; gap: 0.6em; }

.notice-top span { opacity: 0.7; font-size: 0.92em; }

/* Private by design */
.private {
  margin-top: clamp(64px, 10vw, 128px);
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--private-bg);
}

.private-inner { text-align: center; }

.private-inner p { max-width: 760px; margin-inline: auto; }

.private h2 {
  margin: 0 0 16px;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  letter-spacing: -0.02em;
}

.private p {
  margin: 0 auto 14px;
  font-size: 1.1rem;
  color: var(--muted);
}

/* Footer */
.foot {
  padding: 34px 0 calc(34px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}

.foot-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}

.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }

.foot a { text-decoration: none; }

.foot a:hover { color: var(--text); }

@media (max-width: 720px) {
  .links { display: none; }
  .menu { display: block; }
  .pill { margin-left: auto; }
  .band img { height: 62vw; min-height: 260px; }
  .showcase .phone { width: 30%; right: 2%; }
}

/* Questions: native disclosure, no scripts */
.faq { padding: clamp(56px, 9vw, 112px) 0 0; }

.faq details { max-width: 820px; margin-inline: auto; }

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  color: var(--muted);
  font-weight: 400;
}

.faq details[open] summary::after { content: "−"; }

.faq details p {
  margin: 12px 0 0;
  color: var(--muted);
}

.faq a { color: var(--accent); }

/* Closing call to action */
.closing {
  padding: clamp(64px, 10vw, 128px) 0;
  text-align: center;
}

.closing h2 {
  margin: 0 auto 12px;
  max-width: 760px;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.closing p { margin: 0 0 8px; color: var(--muted); font-size: 1.1rem; }

.closing .cta { justify-content: center; }

/* Pricing */
.pricing { padding: clamp(40px, 8vw, 96px) 0 clamp(56px, 9vw, 112px); }

.pricing-head { max-width: 980px; margin-inline: auto; text-align: center; }

.pricing-head .lede { max-width: 660px; margin-inline: auto; }

.plan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  margin-top: 40px;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.plan h2 { margin: 0; font-size: 1.3rem; }

.price { margin: 10px 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }

.price .amount {
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 750;
  letter-spacing: -0.03em;
}

.price .per { color: var(--muted); font-size: 1.1rem; }

/* The yearly price first, saying what it saves (decision 0065); the monthly one under it. */
.price-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; color: var(--muted); font-size: 1.1rem; }
.price-alt b { color: var(--text); font-weight: 650; }
.price .save { align-self: center; }
.price .save, .price-alt .save {
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 650;
  white-space: nowrap;
}

.trial { margin: 0; color: var(--muted); }

.plan-list {
  margin: 0;
  padding: 0;
  list-style: none;
  align-self: center;
}

.plan-list li {
  padding: 9px 0 9px 30px;
  position: relative;
  border-bottom: 1px solid var(--line);
}

.plan-list li:last-child { border-bottom: 0; }

.plan-list li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  color: var(--accent);
  font-weight: 700;
}

/* Text pages: security, privacy, support, status */
.page {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(40px, 7vw, 88px) 0 clamp(56px, 9vw, 112px);
}

.page h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: 18px;
}

.page h2 {
  margin: 44px 0 10px;
  font-size: 1.45rem;
  letter-spacing: -0.015em;
}

.page p, .page li { color: var(--muted); }

.page .muted { font-size: 1.15rem; }

.page a { color: var(--accent); }

.page strong { color: var(--text); }

.note {
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.table-scroll { overflow-x: auto; }

.page table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 0.95rem;
}

.page th, .page td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line);
}

.page th { color: var(--text); }

.page td { color: var(--muted); }

/* Status page */
.status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.dot.up { background: #2fb36b; }
.dot.down { background: #e5484d; }


/* The hero's window and phone, on the dark sky */
.hero .window {
  border-color: rgba(255, 255, 255, 0.1);
  background: #121614;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.55), 0 20px 40px -24px rgba(0, 0, 0, 0.45);
}

.hero .phone {
  box-shadow: 0 0 0 clamp(3px, 0.45vw, 6px) #2b322e,
    0 0 0 calc(clamp(3px, 0.45vw, 6px) + 1px) rgba(255, 255, 255, 0.14),
    0 40px 80px -30px rgba(0, 0, 0, 0.6);
}

/* Motion, for anyone who hasn't asked for less: the aurora drifts and
   brightens and dims, on long alternating loops. */
@media (prefers-reduced-motion: no-preference) {
  .sky span { will-change: transform; }
  .sky span:nth-child(1) { animation: aurora-a 6.5s ease-in-out infinite alternate; }
  .sky span:nth-child(2) { animation: aurora-b 8.5s ease-in-out infinite alternate; }
  .sky span:nth-child(3) { animation: aurora-c 10s ease-in-out infinite alternate; }
  .sky span:nth-child(4) { animation: aurora-beam 12s ease-in-out infinite alternate; }
}

@keyframes aurora-a { to { transform: translate(34%, 18%) rotate(4deg) scale(1.2); opacity: 0.55; } }
@keyframes aurora-b { to { transform: translate(-38%, 16%) scale(1.35); opacity: 0.6; } }
@keyframes aurora-c { from { opacity: 0.45; } to { transform: translate(-28%, -18%) scale(0.8); opacity: 1; } }
@keyframes aurora-beam { to { transform: translate(-90%, 10%) rotate(10deg); opacity: 0.4; } }

/* Scroll motion. motion.js adds .motion to the page and sets each moving
   element's --p, from 0 (tilted) to 1 (settled); without it, or for anyone
   who has asked for less motion, everything sits still and flat. The hero's
   Mac window stands up as the page scrolls, lifted at first because
   tilting back lowers its top edge; its iPhone swings in from an angle;
   each feature's picture rises as it arrives. */
.motion .hero-shot {
  transform-origin: 50% 85%;
  transform: perspective(1600px)
    translateY(calc((1 - var(--p, 1)) * -24%))
    rotateX(calc((1 - var(--p, 1)) * 28deg))
    scale(calc(1 - (1 - var(--p, 1)) * 0.08));
  will-change: transform;
}

.motion .showcase .phone {
  transform: perspective(1200px)
    translate3d(calc((1 - var(--p, 1)) * 14%), calc((1 - var(--p, 1)) * 18%), 0)
    rotateY(calc((1 - var(--p, 1)) * -30deg))
    rotateX(calc((1 - var(--p, 1)) * 12deg))
    rotateZ(calc((1 - var(--p, 1)) * 6deg));
  will-change: transform;
}

.motion .rise { transform: translateY(calc((1 - var(--p, 1)) * 64px)); }

.motion .stage {
  transform: perspective(1000px)
    translateY(calc((1 - var(--p, 1)) * 72px))
    rotateX(calc((1 - var(--p, 1)) * 16deg))
    scale(calc(1 - (1 - var(--p, 1)) * 0.05));
}

/* On a phone the hero's iPhone is small: more depth, and a twist. */
@media (max-width: 600px) {
  .motion .hero-shot {
    transform: perspective(700px)
      translateY(calc((1 - var(--p, 1)) * -18%))
      rotateX(calc((1 - var(--p, 1)) * 38deg))
      rotateZ(calc((1 - var(--p, 1)) * -5deg))
      scale(calc(1 - (1 - var(--p, 1)) * 0.1));
  }
}





/* ───────────────────────────────────────────────────────────────────────
   Pricing, Security, Privacy and Support: each opens on a calm aurora band
   in its own tint, argues with a drawn picture per claim, and ends on a
   photograph of the same quiet world as the home page, with the offer.
   ─────────────────────────────────────────────────────────────────────── */

/* The band: the home page's sky, shorter and slower, with three glows and
   grain. Dark in either appearance. Each page tints it: green for pricing,
   teal and blue for security, violet for privacy, amber for support. */
@property --ring {
  syntax: "<angle>";
  inherits: false;
  initial-value: 40deg;
}

.page-hero {
  --sky-a: #0c2c1f;
  --sky-b: #05150e;
  --sky-c: #030c08;
  --c1: #2ecc80;
  --c2: #14a08c;
  --c3: #6ee6aa;
  position: relative;
  isolation: isolate;
  /* The words end above the band's fade into the page. */
  padding: clamp(56px, 8vw, 104px) 0 clamp(100px, 12vw, 170px);
  color: #eef6f2;
}

.t-security { --sky-a: #0a2634; --sky-b: #04131c; --sky-c: #020a10; --c1: #14a08c; --c2: #2f7bdb; --c3: #74d3f0; }
.t-privacy { --sky-a: #1b1840; --sky-b: #0b0b20; --sky-c: #050512; --c1: #6d52dc; --c2: #14a08c; --c3: #ad93fb; }
.t-support { --sky-a: #2a200c; --sky-b: #141006; --sky-c: #0a0803; --c1: #f27a33; --c2: #2ecc80; --c3: #ffc65c; }

.page-hero .sky {
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, var(--sky-a) 0%, var(--sky-b) 55%, var(--sky-c) 100%);
}

.page-hero .sky::after { z-index: 2; height: clamp(90px, 12vw, 160px); }

/* Grain: specks with alpha baked into a small PNG, so no blend mode. */
.page-hero .sky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url(/img/noise.png) 0 0 / 128px 128px;
  opacity: 0.45;
  pointer-events: none;
}

.sky.calm span:nth-child(1) { background: radial-gradient(closest-side, color-mix(in srgb, var(--c1) 48%, transparent), transparent); }
.sky.calm span:nth-child(2) { background: radial-gradient(closest-side, color-mix(in srgb, var(--c2) 44%, transparent), transparent); }
.sky.calm span:nth-child(3) { background: radial-gradient(closest-side, color-mix(in srgb, var(--c3) 26%, transparent), transparent); }

.page-hero-text { text-align: center; }

.page-hero .eyebrow { color: color-mix(in srgb, var(--c3) 75%, #fff); }

.page-hero h1 {
  max-width: 920px;
  margin-inline: auto;
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  background: linear-gradient(100deg, color-mix(in srgb, var(--c3) 55%, #fff) 0%, #f2fbf7 45%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-hero .lede { margin-inline: auto; color: rgba(226, 240, 236, 0.82); }

.page-hero .updated { margin: 14px 0 0; font-size: 14px; color: rgba(226, 240, 236, 0.6); }

.page-hero a { color: color-mix(in srgb, var(--c3) 70%, #fff); }

/* Pages that belong together (Security, Privacy, Status), as pills. */
.subnav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
}

.subnav a {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(236, 246, 242, 0.8);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.subnav a[aria-current="page"] {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.92);
  color: #0b1512;
}

.subnav a:hover { background: rgba(255, 255, 255, 0.14); }

.subnav a[aria-current="page"]:hover { background: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .sky.calm span:nth-child(1) { animation: calm-a 19s ease-in-out infinite alternate; }
  .sky.calm span:nth-child(2) { animation: calm-b 26s ease-in-out infinite alternate; }
  .sky.calm span:nth-child(3) { animation: calm-c 33s ease-in-out infinite alternate; }
  .sky.paused span { animation-play-state: paused; }
}

@keyframes calm-a { to { transform: translate(18%, 10%) rotate(-20deg) scale(1.1); opacity: 0.7; } }
@keyframes calm-b { to { transform: translate(-20%, 8%) scale(1.18); opacity: 0.75; } }
@keyframes calm-c { from { opacity: 0.5; } to { transform: translate(-14%, -10%) scale(0.9); opacity: 0.95; } }

/* A page's sections. */
.block { padding: clamp(56px, 9vw, 112px) 0 0; }

.block-head { max-width: 760px; margin: 0 auto 34px; text-align: center; }

.block-head h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.block-head p { margin: 14px auto 0; max-width: 640px; color: var(--muted); font-size: 1.1rem; }

.block-head .glyph { margin: 0 auto 18px; width: 52px; height: 52px; }

/* More glyph colors, for the drawn icons. */
.g-teal { background: linear-gradient(135deg, #5fd8cc, #1f9e94 52%, #12595a); }
.g-amber { background: linear-gradient(135deg, #ffd36b, #e0a42d 52%, #8a5a17); }

/* A diagram that draws itself as it arrives: wires, then pulses. */
.diagram { max-width: 960px; margin: clamp(28px, 5vw, 56px) auto 0; }

.diagram svg { display: block; width: 100%; height: auto; overflow: visible; }

.diagram text {
  font: 600 15px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  fill: rgba(236, 246, 242, 0.92);
}

.diagram .wedge { font-size: 12px; letter-spacing: 0.08em; fill: rgba(236, 246, 242, 0.55); }

.diagram .ico { fill: none; stroke: #fff; stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.diagram .wire { fill: none; stroke-width: 2; stroke-linecap: round; }

.diagram .wire.ssh { stroke: color-mix(in srgb, var(--c3) 75%, transparent); }

.diagram .wire.sync { stroke: rgba(255, 255, 255, 0.3); stroke-dasharray: 0.01 0.012; }

.diagram .pulse { display: none; fill: none; stroke-linecap: round; }

.diagram .pulse.ssh { stroke: #d8fbff; stroke-width: 3.5; stroke-dasharray: 0.08 0.92; }

/* On a phone, the wide diagram gives way to a tall one. */
.diagram .tall { display: none; }

@media (max-width: 600px) {
  .diagram .wide { display: none; }
  .diagram .tall { display: block; max-width: 340px; margin-inline: auto; }
}

.motion .diagram .wire.ssh { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: draw 1.1s cubic-bezier(0.4, 0.1, 0.2, 1) 0.85s forwards; }
.motion .diagram .wire.sync { opacity: 0; animation: appear 0.9s ease 0.45s forwards; }
.motion .diagram .pulse { display: inline; opacity: 0; }
.motion .diagram .pulse.ssh { animation: flow 2.6s linear infinite, appear 0.6s 1.9s forwards; }
.motion .diagram .pop { transform-box: fill-box; transform-origin: center; animation: pop 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
.motion .diagram .pop.d2 { animation-delay: 0.2s; }
.motion .diagram .pop.d3 { animation-delay: 0.35s; }
.motion .diagram .pop.d4 { animation-delay: 0.5s; }
.motion .diagram .pop.d5 { animation-delay: 0.65s; }
.motion .diagram.paused * { animation-play-state: paused; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }

/* Ciphertext that decrypts as it arrives (motion.js swaps the letters; the
   real words stay with screen readers). */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.decrypting { color: var(--accent); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; }

/* Glass on the band: the price card. A light runs round its edge, a soft
   glow follows the pointer, and a sheen crosses the button. */
.over-band { margin-top: clamp(-120px, -9vw, -64px); position: relative; z-index: 1; }

.glass {
  --glass: 90%;
  position: relative;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
  border-radius: var(--radius);
  background:
    radial-gradient(560px circle at var(--x, 88%) var(--y, -12%), color-mix(in srgb, #46d58f 16%, transparent), transparent 62%),
    color-mix(in srgb, var(--card) var(--glass), transparent);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 40px 90px -40px rgba(16, 60, 40, 0.55), 0 0 60px -20px color-mix(in srgb, #2ecc80 35%, transparent);
}

@media (prefers-color-scheme: dark) {
  .glass { --glass: 72%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 40px 90px -40px rgba(0, 0, 0, 0.8), 0 0 60px -20px color-mix(in srgb, #2ecc80 30%, transparent); }
}

.glass::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--ring), transparent 0 56%, var(--brand-3) 68%, #46d58f 77%, #eaffe9 81%, var(--brand-1) 85%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.glass .button { position: relative; overflow: hidden; isolation: isolate; }

.glass .button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70%);
  transform: translateX(-110%);
}

.motion .glass::before { animation: ring 8s linear infinite; }
.motion .glass .button::after { animation: sheen 5s ease-in-out 1.2s infinite; }
.motion .glass.paused::before, .motion .glass.paused .button::after { animation-play-state: paused; }

@keyframes ring { to { --ring: 400deg; } }
@keyframes sheen { 0%, 62% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }

/* Lists that come in one item after another, ticks drawing on. Only below
   the fold: anything on screen at load is there at once. */
.motion .stagger.waiting > * { opacity: 0; translate: 0 10px; }

.motion .stagger > * {
  transition: opacity 0.5s ease, translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 60ms + 120ms);
}

/* The closing offer: the page's photograph beside a panel with the price.
   The photograph follows the reader's appearance, day or night. */
.bookend { padding: clamp(48px, 7vw, 88px) 0; }

.bookend-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.bookend picture { display: block; min-height: 300px; }

.bookend img { display: block; width: 100%; height: 100%; object-fit: cover; }

.bookend-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 52px);
  background: linear-gradient(150deg, var(--stage-a), var(--stage-b));
}

.bookend-panel h2 {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.bookend-panel p { margin: 0; color: var(--muted); }

.bookend-panel .cta { margin-top: 24px; }

@media (max-width: 800px) {
  .bookend-inner { grid-template-columns: minmax(0, 1fr); }
  .bookend picture { aspect-ratio: 3 / 2; min-height: 0; }
}

/* Sections as an index and a stack of cards: the claim on the left, held
   in view while its evidence scrolls past on the right. */
.mech {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(24px, 5vw, 64px);
  padding: clamp(48px, 7vw, 88px) 0;
  border-top: 1px solid var(--line);
}

.mech:first-of-type { border-top: 0; padding-top: 0; }

.mech-head { position: sticky; top: 92px; align-self: start; }

.mech-head .glyph { width: 48px; height: 48px; margin-bottom: 18px; }

.mech-head h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.12; letter-spacing: -0.02em; }

.mech-head p { margin: 0; color: var(--muted); }

.mech-cards { display: grid; gap: 14px; }

.card {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
}

.card h3 { margin: 0 0 6px; font-size: 1.08rem; letter-spacing: -0.01em; }

.card p { margin: 0; color: var(--muted); }

.card p + p { margin-top: 10px; }

.card .meaning { color: var(--text); font-weight: 550; }

.card.wide-art { padding: 0; overflow: hidden; }

.card.wide-art .art { aspect-ratio: auto; min-height: 220px; }

@media (max-width: 860px) {
  .mech { grid-template-columns: minmax(0, 1fr); }
  .mech-head { position: static; }
}

/* An honest caveat, in amber. */
.callout {
  padding: 18px 22px;
  border: 1px solid color-mix(in srgb, #ff9f0a 40%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, #ff9f0a 8%, var(--card));
}

.callout h3 { margin: 0 0 6px; font-size: 1.05rem; color: #b25f00; }

.callout p, .callout li { color: var(--muted); }

.callout p { margin: 0; }

.callout ul { margin: 8px 0 0; padding-left: 20px; }

@media (prefers-color-scheme: dark) {
  .callout h3 { color: #ffb340; }
}

/* Who can see what: rows of data, a column per party. */
.matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }

.matrix { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.98rem; }

.matrix th, .matrix td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }

.matrix tr:last-child th, .matrix tr:last-child td { border-bottom: 0; }

.matrix thead th { font-size: 0.85rem; font-weight: 650; color: var(--muted); }

.matrix tbody th { text-align: left; font-weight: 550; }

.matrix tbody th small { display: block; margin-top: 2px; font-weight: 400; color: var(--muted); font-size: 0.85rem; }

.matrix .us { background: color-mix(in srgb, var(--accent) 6%, transparent); }

.sign { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }

.sign svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sign.open { background: color-mix(in srgb, #34c759 16%, transparent); color: #1f8a3e; }

.sign.sealed { background: color-mix(in srgb, #2f7bdb 14%, transparent); color: #2463b8; }

.sign.never { color: color-mix(in srgb, var(--muted) 70%, transparent); }

@media (prefers-color-scheme: dark) {
  .sign.open { color: #4cd97b; }
  .sign.sealed { color: #74b3ff; }
}

.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 16px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.92rem; }

.legend li { display: flex; align-items: center; gap: 8px; }

.legend .sign { width: 22px; height: 22px; }

.legend .sign svg { width: 13px; height: 13px; }

/* Scenario cards: what happens if… */
.scenarios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

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

.scenarios .glyph { grid-row: span 2; width: 44px; height: 44px; }

@media (max-width: 760px) {
  .scenarios { grid-template-columns: minmax(0, 1fr); }
}

/* Two columns of short items: what our server stores, what it never sees. */
.sees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.sees ul { margin: 0; padding: 0; list-style: none; }

.sees li { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--muted); }

.sees li:last-child { border-bottom: 0; }

.sees h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.05rem; }

@media (max-width: 700px) {
  .sees { grid-template-columns: minmax(0, 1fr); }
}

/* Pricing: the plan card sits on the band's lower edge. */
.t-pricing.page-hero { padding-bottom: clamp(130px, 14vw, 200px); }

.plan.glass { margin-top: 0; }

.plan-name { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-weight: 650; font-size: 1.15rem; }

.plan-name img { width: 34px; height: 34px; border-radius: 23%; }

.plan .fine { margin: 14px 0 0; font-size: 0.92rem; color: var(--muted); }

.plan-groups { display: grid; gap: 18px; align-self: center; }

.plan-groups h3 { margin: 0 0 2px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }

/* The bill, as two lines: what Hewy costs, and what AI costs. */
.receipt {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.receipt-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 18px 0; border-bottom: 1px dashed var(--line); }

.receipt-row:last-of-type { border-bottom: 0; }

.receipt-row .glyph { grid-row: span 2; width: 44px; height: 44px; }

.receipt-row b { font-size: 1.08rem; }

.receipt-row small { grid-column: 2; color: var(--muted); font-size: 0.95rem; }

.receipt-row .amount { grid-row: span 2; font-size: 1.25rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.receipt-row .amount small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--muted); }

.receipt-total { margin: 8px 0 0; padding-top: 14px; border-top: 2px solid var(--text); display: flex; justify-content: space-between; gap: 16px; font-weight: 650; }

.receipt-total span:last-child { color: var(--accent); }

/* The trial, as a line with three stops that draws as it arrives. */
.timeline {
  --done: var(--p, 1);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  top: 25px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 2px;
  border-radius: 2px;
  background: var(--line);
}

.timeline::after {
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  transform-origin: left;
  transform: scaleX(var(--done));
}

.timeline li { position: relative; z-index: 1; text-align: center; }

.timeline .glyph { margin: 0 auto 16px; width: 52px; height: 52px; box-shadow: 0 0 0 8px var(--bg), 0 10px 18px -10px rgba(16, 40, 28, 0.55); }

.timeline b { display: block; font-size: 1.1rem; }

.timeline li > span:last-child { display: block; margin-top: 6px; color: var(--muted); }

@media (max-width: 700px) {
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .timeline::before, .timeline::after { display: none; }
}

/* Contents beside a long text, on wide screens. */
.with-toc { display: grid; grid-template-columns: 220px minmax(0, 760px); justify-content: center; gap: 56px; }

.toc { position: sticky; top: 92px; align-self: start; padding-top: clamp(40px, 7vw, 88px); }

.toc p { margin: 0 0 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }

.toc a {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 0.93rem;
  text-decoration: none;
}

.toc a:hover { color: var(--text); }

.toc a.here { border-left-color: var(--accent); color: var(--text); font-weight: 600; }

@media (max-width: 1100px) {
  .with-toc { grid-template-columns: minmax(0, 760px); }
  .toc { display: none; }
}

/* Privacy: principles, four up. */
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }

.principles li { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }

.principles .glyph { width: 46px; height: 46px; margin-bottom: 16px; }

.principles b { display: block; margin-bottom: 6px; font-size: 1.08rem; letter-spacing: -0.01em; }

.principles span { color: var(--muted); }

@media (max-width: 980px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 560px) { .principles { grid-template-columns: minmax(0, 1fr); } }

/* What we never see, as chips that arrive scrambled. */
.unseen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }

.unseen li {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-weight: 550;
}

/* Support: a finder on the band, topic tiles, and answers as cards. */
.finder { position: relative; max-width: 560px; margin: 28px auto 0; }

.finder svg {
  position: absolute;
  top: 27px;
  left: 19px;
  translate: 0 -50%;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: rgba(236, 246, 242, 0.7);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.finder input {
  width: 100%;
  padding: 15px 20px 15px 50px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  color: #fff;
  font: inherit;
  font-size: 1.05rem;
  outline: none;
}

.finder input::placeholder { color: rgba(236, 246, 242, 0.6); }

.finder input:focus { border-color: color-mix(in srgb, var(--c3) 70%, #fff); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c3) 25%, transparent); }

.finder .none { margin: 14px 0 0; color: rgba(236, 246, 242, 0.8); }

.topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }

.topics a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(236, 246, 242, 0.88);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.topics a:hover { background: rgba(255, 255, 255, 0.14); }

.topics .glyph { width: 24px; height: 24px; border-radius: 7px; box-shadow: none; }

.answers { scroll-margin-top: 84px; }

.qa {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
}

.qa h3 { margin: 0 0 6px; font-size: 1.05rem; letter-spacing: -0.01em; }

.qa p { margin: 0; color: var(--muted); }

.qa p + p { margin-top: 10px; }

.qa a { color: var(--accent); }

.qa code, .message code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; }

.qa[hidden], .mech[hidden] { display: none; }

/* The messages Hewy shows, word for word, with what each means. */
.message .said {
  display: block;
  margin: 0 0 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Getting help: three steps across. */
.help-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: help; }

.help-steps li { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }

.help-steps li::before {
  counter-increment: help;
  content: counter(help);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.help-steps b { display: block; margin-bottom: 6px; font-size: 1.08rem; }

.help-steps span { color: var(--muted); }

.help-steps a { color: var(--accent); }

@media (max-width: 760px) { .help-steps { grid-template-columns: minmax(0, 1fr); } }

/* Pages fade into each other where browsers can (a cross-document view
   transition), with the header held still. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .bar { view-transition-name: bar; }
  ::view-transition-old(root) { animation: 0.18s ease both vt-out; }
  ::view-transition-new(root) { animation: 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both vt-in; }
}

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* Questions open smoothly: a fade, and a slide where browsers can size to
   the content. */
@media (prefers-reduced-motion: no-preference) {
  .faq details::details-content { opacity: 0; transition: opacity 0.3s ease, content-visibility 0.3s allow-discrete; }
  .faq details[open]::details-content { opacity: 1; }
  .faq summary::after { transition: rotate 0.25s ease; }
  .faq details[open] summary::after { content: "+"; rotate: 45deg; }
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 0.35s ease, opacity 0.3s ease, content-visibility 0.35s allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
  }
}

/* An approval, as the app shows it. */
.mock.approval {
  max-width: 360px;
  border: 1px solid color-mix(in srgb, #ff9f0a 45%, transparent);
  background: color-mix(in srgb, #ff9f0a 7%, var(--mock-bg));
}

.mock.approval .mock-label { margin-left: 0; color: #c46a00; }

.mock .cmd {
  margin: 0.6em 0 0;
  padding: 0.55em 0.75em;
  border-radius: 0.5em;
  background: var(--mock-field);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
}

.mock .signed { display: flex; align-items: center; gap: 0.45em; margin-top: 0.8em; color: var(--mock-muted); font-size: 0.8em; }

.mock .signed svg { flex: none; width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-color-scheme: dark) {
  .mock.approval .mock-label { color: #ffb340; }
}

/* The app's own icon, where a glyph would go. */
.app-icon { display: block; width: 44px; height: 44px; border-radius: 23%; box-shadow: 0 10px 18px -10px rgba(16, 40, 28, 0.55); }

.receipt-row .app-icon { grid-row: span 2; }

/* Privacy: where data goes, as cards beside the policy's text. */
.flows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0 8px; }

.flows .card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; align-content: start; }

.flows .glyph { grid-row: span 2; width: 40px; height: 40px; }

.flows h3 { margin: 0; font-size: 1rem; }

.flows p { font-size: 0.95rem; }

@media (max-width: 640px) { .flows { grid-template-columns: minmax(0, 1fr); } }

/* The policy's own text, beside its contents. */
.page.policy { margin: 0; padding-top: clamp(40px, 7vw, 88px); }

.page.policy h2:first-child { margin-top: 0; }

.page.policy h2 { scroll-margin-top: 84px; }

/* Support: answers' sections, and the cards' code. */
.answers .mech { scroll-margin-top: 72px; }

.answers .mech-head h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }

/* "Coming soon for" the four platforms, after termius.com (Colin,
   2026-10-21): icons of our own drawing and the names, outlined in the
   text's colour so they read as badges, with no fill behind them. White on
   the hero's dark sky. */
.store-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  color: var(--text);
  line-height: 1;
}
.badges-lead { color: var(--muted); font-size: 15px; }
.badges-list { display: inline-flex; flex-wrap: wrap; gap: 10px 12px; }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px 8px 11px;
  border: 1.5px solid currentColor;
  border-radius: 12px;
  white-space: nowrap;
}
.store-badge .badge-mark {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.store-badge b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.hero .store-badges { justify-content: center; color: #fff; }
.hero .badges-lead { color: rgba(222, 240, 230, 0.72); }
.hero-badges { justify-content: center; margin-top: 26px; }
/* On phones and in narrow panels, the three badges stack in one column
   under "Coming soon for", so none is left alone on a line. */
.bookend .store-badges { flex-direction: column; align-items: flex-start; }
.bookend .badges-list { display: grid; grid-template-columns: repeat(3, max-content); gap: 10px; }
@media (max-width: 560px) {
  .store-badges { flex-direction: column; gap: 12px; }
  .badges-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .badges-list .store-badge { justify-content: center; padding-inline: 8px; }
}

/* Fades, after termius.com: a picture whose subject is at its top left
   fades out to the right, the bottom or both, into the page behind it,
   light or dark. A mask, so one image serves both appearances. */
.fade-right, .fade-bottom, .fade-corner {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.fade-bottom {
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 97%);
}

.fade-right {
  -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 97%);
  mask-image: linear-gradient(to right, #000 62%, transparent 97%);
}

.fade-corner {
  -webkit-mask-image: linear-gradient(to right, #000 58%, transparent 97%), linear-gradient(to bottom, #000 52%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 58%, transparent 97%), linear-gradient(to bottom, #000 52%, transparent 96%);
  mask-composite: intersect;
}

/* The VPN: a device, its tunnel to a server at home, and out from there,
   over the app's own VPN control. Drawn, not captured. */
.vpn-stage {
  /* A stage, not a tile's picture: as tall as the scene. */
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 64px) clamp(16px, 3vw, 40px);
  container-type: inline-size;
}

.vpn-scene {
  display: grid;
  justify-items: center;
  gap: clamp(28px, 4vw, 44px);
  width: min(100%, 860px);
  font-size: clamp(12px, 1.9cqi, 16px);
}

.route {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.route .end {
  display: grid;
  justify-items: center;
  gap: 0.7em;
  flex: none;
  width: 11em;
  text-align: center;
  color: var(--muted);
  font-size: 0.92em;
  font-weight: 550;
}

.route .end > span:last-child { line-height: 1.3; }

.route .glyph { width: 4.6em; height: 4.6em; }

/* Its row as tall as a glyph, so all three labels line up. */
.devices-pair { grid-template-columns: auto auto; grid-template-rows: 4.6em auto; align-items: center; gap: 0.7em 0.35em; }
.devices-pair span { grid-column: 1 / -1; }
.devices-pair .mac { width: 5.4em; }
.devices-pair .iphone { width: 1.9em; }
.devices-pair svg { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.devices-pair .screen { fill: var(--mock-bg); }
.devices-pair .rows { stroke: var(--accent); stroke-width: 2.2; opacity: 0.55; }

/* The path between, its packets moving along it. */
.pipe {
  position: relative;
  flex: 1;
  height: 4.6em;
  display: grid;
  place-items: center;
}

.pipe i {
  position: absolute;
  inset: 50% 0.4em auto;
  height: 3px;
  border-radius: 2px;
  translate: 0 -50%;
  background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 16px);
  opacity: 0.7;
}

.pipe.ssh i {
  height: 1.25em;
  border-radius: 1em;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 80%, transparent) 0 6px, transparent 6px 18px) 0 50% / 100% 3px no-repeat,
    color-mix(in srgb, var(--t2) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t2) 40%, transparent);
  opacity: 1;
}

.pipe b {
  position: relative;
  margin-top: -3.2em;
  padding: 0.15em 0.6em;
  border-radius: 1em;
  background: var(--mock-bg);
  box-shadow: 0 0 0 0.5px var(--mock-line);
  color: var(--accent);
  font-size: 0.78em;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: no-preference) {
  .pipe i { animation: packets 1.1s linear infinite; }
  .pipe.ssh i { animation: packets-ssh 0.9s linear infinite; }
}

@keyframes packets { to { background-position: 16px 0; } }
@keyframes packets-ssh { to { background-position: 18px 50%, 0 0; } }

/* The app's own VPN row, a little larger than it draws it. */
.vpn-shot { display: block; width: min(100%, 520px); }
.vpn-shot .shot { border-radius: 12px; }
@media (max-width: 600px) { .vpn-shot { width: 100%; } }

/* The app's VPN row: Off, All, Network, with All on. */
.vpn-card { max-width: 25em; font-size: 1em; }

.vpn-row { display: flex; align-items: center; gap: 0.6em; }

.vpn-row b { font-size: 1.15em; font-weight: 650; }

.vpn-icon svg { display: block; width: 1.6em; height: 1.6em; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }

.segments {
  display: flex;
  margin-left: auto;
  padding: 2px;
  border-radius: 0.6em;
  background: var(--mock-field);
  font-size: 0.9em;
}

.segments span { padding: 0.25em 0.85em; border-radius: 0.5em; color: var(--mock-muted); }

.segments .on { background: var(--mock-bg); color: var(--mock-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

.vpn-status { margin-top: 0.55em !important; color: var(--mock-muted) !important; font-size: 0.88em; }

/* On a phone the route stands up: device, tunnel, server, the web. */
@media (max-width: 600px) {
  .vpn-scene { font-size: 14px; }
  .route { flex-direction: column; align-items: center; }
  .route .end { width: auto; }
  .pipe { flex: none; width: 4.6em; height: 3.4em; }
  .pipe i { inset: 0.3em auto; left: 50%; width: 3px; height: auto; translate: -50% 0;
    background: repeating-linear-gradient(180deg, var(--accent) 0 8px, transparent 8px 16px); }
  .pipe.ssh i { width: 1.25em; height: auto;
    background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, transparent) 0 6px, transparent 6px 18px) 50% 0 / 3px 100% no-repeat,
      color-mix(in srgb, var(--t2) 16%, transparent); }
  .pipe b { margin: 0 0 0 7em; }
  @keyframes packets { to { background-position: 0 16px; } }
  @keyframes packets-ssh { to { background-position: 50% 18px, 0 0; } }
}

/* AI agents, the site's second picture: the chat, dictating, with the model
   menu beside it, their bottoms level as the menu opens from the composer.
   Phones get the iPhone's chat with the menu open. */
.agents-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(190px, 23vw, 300px);
  gap: clamp(16px, 2.4vw, 32px);
  align-items: end;
}

.agents-stage .layer .shot {
  border-radius: 14px;
  box-shadow: 0 34px 70px -26px rgba(0, 0, 0, 0.5), 0 12px 24px -14px rgba(0, 0, 0, 0.35);
}

/* Narrower, the chat alone, wide enough to read. */
@media (max-width: 900px) {
  .agents-stage { display: block; }
  .agents-stage .layer { display: none; }
  /* The iPhone's chat, at a width that reads like a phone. */
  .agents-stage .shot { max-width: 440px; }
}

/* Any agent: a chat one agent turned down, switched to another that
   finished it, in the chat's own style. Drawn, not captured. */
.chat-stage {
  /* A stage, not a tile's picture: as tall as the chat. */
  aspect-ratio: auto;
  padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 40px);
}

.mock.chat {
  display: grid;
  gap: 0.75em;
  max-width: 480px;
  padding: 1.2em 1.2em 0.9em;
  font-size: clamp(12px, 2.6cqi, 15px);
  --bubble: #ddefe2;
}

.chat .you {
  justify-self: end;
  max-width: 82%;
  padding: 0.55em 0.95em;
  border-radius: 1.1em;
  background: var(--bubble);
}

.chat .refused { color: var(--mock-muted); }

.chat .switched {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
  padding: 0.6em 0.75em;
  border-radius: 0.6em;
  background: var(--mock-field);
  font-size: 0.88em;
}

.chat .ran { margin-bottom: -0.4em; color: var(--mock-muted); font-size: 0.88em; }

.chat code {
  padding: 0.05em 0.3em;
  border-radius: 0.25em;
  background: var(--mock-field);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
}

/* The agent's mark, as the model menu draws it: two letters in a rounded square */
.agent-mark {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  border: 1px solid currentColor;
  border-radius: 0.35em;
  font-size: 0.72em;
  font-weight: 600;
  opacity: 0.75;
}

.chat .switched .agent-mark { margin-top: 0.1em; }

.chat .chat-bar {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-top: 0.2em;
  padding-top: 0.75em;
  border-top: 1px solid var(--mock-line);
  color: var(--mock-muted);
  font-size: 0.88em;
}

.chat .chat-bar .chat-plan { margin-left: auto; }

@media (prefers-color-scheme: dark) {
  .mock.chat { --bubble: #24402e; }
}

/* The waitlist: an email field and a button as one rounded bar, then a
   line on what happens to the address. No script; the server answers. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.waitlist .hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }

a.pill { text-decoration: none; }
a.pill:hover { border-color: var(--accent); color: var(--text); }

.waitlist {
  display: flex;
  gap: 6px;
  width: min(100%, 460px);
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
}

.waitlist input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  outline: none;
}

.waitlist:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

.waitlist button {
  flex: none;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.waitlist button:hover { filter: brightness(1.08); }

.waitlist-note { margin: 10px 0 0; color: var(--muted); font-size: 0.88rem; }

/* On the hero's dark sky, in either appearance. */
.hero-waitlist { display: grid; justify-items: center; margin: 30px 0 4px; }
.hero .waitlist { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); }
.hero .waitlist input[type="email"] { color: #fff; }
.hero .waitlist input::placeholder { color: rgba(255, 255, 255, 0.5); }
.hero .waitlist-note { color: rgba(222, 240, 230, 0.7); }

.closing-waitlist { display: grid; justify-items: center; margin-top: 18px; }

.plan-price .waitlist { margin-top: 18px; }

.waitlist-page { text-align: center; padding: clamp(60px, 10vw, 120px) 0; }

@media (max-width: 420px) {
  .waitlist { flex-direction: column; border-radius: 22px; }
  .waitlist input[type="email"] { padding: 12px 14px; }
}

.g-indigo { background: linear-gradient(135deg, #8fa8ff, #4f63e0 52%, #2a2f8c); }

/* The setup guide: numbered steps, each a column of words and commands. */
.guide { max-width: 860px; padding: clamp(40px, 7vw, 80px) 0 0; }

.guide-note {
  display: grid;
  gap: 10px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  color: var(--muted);
}
.guide-note p { margin: 0; }
.guide-note b { color: var(--text); }

.guide-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  padding-top: clamp(40px, 6vw, 64px);
  scroll-margin-top: 72px;
}
.step-n {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 2px 0 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}
.guide-step h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 2.6vw, 1.9rem); letter-spacing: -0.02em; }
.guide-step h3 { margin: 26px 0 8px; font-size: 1.05rem; }
.guide-step p { margin: 0 0 10px; color: var(--muted); }
.guide-step p b { color: var(--text); }
.guide-step .aside { font-size: 0.92rem; }
.guide-step code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; }
.guide-step p code { padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.guide-step pre {
  margin: 0 0 12px;
  padding: 14px 16px;
  overflow-x: auto;
  border-radius: 12px;
  background: #101513;
  color: #e3ece6;
  font-size: 0.86rem;
  line-height: 1.55;
}
@media (max-width: 600px) {
  .guide-step { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* How it works: one picture of the parts, then a section on each. */
.hiw-map { padding: clamp(40px, 7vw, 80px) 0 0; }
.hiw-diagram {
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--radius);
  background:
    radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--brand-2) 18%, transparent), transparent 65%),
    radial-gradient(60% 80% at 100% 100%, color-mix(in srgb, #6d52dc 16%, transparent), transparent 65%),
    var(--stage-b);
  font-size: clamp(12px, 1.3vw, 15px);
}
.hiw-col { display: grid; gap: 12px; flex: none; width: 15em; }
.hiw-label { margin: 0 0 2px; color: var(--muted); font-size: 0.82em; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; }
.hiw-box {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.8em;
  align-items: center;
  padding: 0.9em 1em;
  border-radius: 14px;
  background: var(--mock-bg);
  color: var(--mock-text);
  box-shadow: 0 0 0 0.5px var(--mock-line), 0 16px 32px -20px rgba(0, 0, 0, 0.45);
}
.hiw-box .glyph { grid-row: span 2; width: 2.6em; height: 2.6em; }
.hiw-box small { color: var(--mock-muted); }
.hiw-inner { grid-column: 1 / -1; margin-top: 0.8em; padding: 0.7em 0.85em; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 10px; display: grid; }
.hiw-inner small { color: var(--mock-muted); }
.hiw-link { flex: 1; min-width: 4em; display: grid; justify-items: center; gap: 4px; padding: 0 0.6em; color: var(--muted); font-size: 0.85em; }
.hiw-link span { font-weight: 700; color: var(--accent); letter-spacing: 0.04em; }
.hiw-link i { width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 13px); }
.hiw-link small { text-align: center; }
.hiw-caption { max-width: 720px; margin: 18px auto 0; text-align: center; color: var(--muted); }
@media (max-width: 860px) {
  .hiw-diagram { flex-direction: column; }
  .hiw-col { width: min(100%, 22em); }
  .hiw-link { width: auto; padding: 0.8em 0; }
  .hiw-link i { width: 2px; height: 2.4em; background: repeating-linear-gradient(180deg, var(--accent) 0 7px, transparent 7px 13px); }
}

.hiw-parts { display: grid; gap: clamp(28px, 4vw, 44px); max-width: 860px; padding: clamp(48px, 8vw, 96px) 0 0; }
.hiw-part { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; align-items: start; }
.hiw-part .glyph { width: 52px; height: 52px; }
.hiw-part h2 { margin: 0 0 8px; font-size: clamp(1.3rem, 2.3vw, 1.6rem); letter-spacing: -0.02em; }
.hiw-part p { margin: 0; color: var(--muted); }
.hiw-sees { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 860px; margin: 0 auto; }
.hiw-sees ul { margin: 6px 0 0; padding-left: 1.1em; color: var(--muted); }
.hiw-sees li + li { margin-top: 6px; }
.hiw-more { margin: 22px 0 0; text-align: center; }
@media (max-width: 600px) {
  .hiw-sees { grid-template-columns: 1fr; }
  .hiw-part { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hiw-part .glyph { width: 44px; height: 44px; }
}

/* The account page (decision 0067) */
.account h2 { margin-top: 40px; }
.account-form { display: grid; gap: 8px; margin: 26px 0 0; }
.account-form label { font-weight: 600; color: var(--text); }
.account-form .waitlist { width: min(100%, 480px); }
.account-form input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  outline: none;
}
.account-form button:disabled { opacity: 0.6; cursor: default; }
.account-note { margin-top: 16px; font-size: 0.95rem; }
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.link-button:hover { text-decoration: underline; }
.account .cta .button { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.account-rows {
  margin: 26px 0 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.account-rows > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 14px 20px;
}
.account-rows > div + div { border-top: 1px solid var(--line); }
.account-rows dt { color: var(--muted); }
.account-rows dd { margin: 0; color: var(--text); }
.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
}
.tag.warn { background: color-mix(in srgb, #d97a1c 16%, transparent); color: #b8640f; }
.account-devices { padding-left: 1.2em; }
.account-problem {
  margin-top: 22px;
  padding: 12px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, #d0453a 12%, transparent);
  color: var(--text);
}
/* Layout classes (.cta's flex) mustn't show what the script hides. */
.account [hidden] { display: none !important; }