:root {
  --pink:#db2777;
  --light-pink:#f472b6;
  --blush:#fff1f7;
  --ink:#261a24;
  --muted:#756b73;
  --quiet:#7d6474;
  --line:#e9dfe5;
  --paper:#fff;
  --green:#26755b;
  --display:"Manrope",sans-serif;
  --body:"DM Sans",sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  accent-color: var(--pink);
  scroll-behavior: smooth;
  scroll-padding-top: 32px;
}
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  background: #fff;
}
a {
  color: inherit;
  text-decoration: none;
}
::selection {
  background: #fbcfe2;
  color: var(--ink);
}
input,
textarea {
  caret-color: var(--pink);
}
button {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 6px;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
p,
h1,
h2,
h3 {
  margin: 0;
}
.wrap {
  width: min(1280px, calc(100% - 112px));
  margin-inline: auto;
}
.skip-link {
  position: absolute;
  top: -80px;
  left: 24px;
  padding: 12px;
  background: #fff;
  z-index: 50;
}
.skip-link:focus {
  top: 12px;
}
.site-header {
  height: 106px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand {
  display: block;
  width: 146px;
  height: 49px;
}
.brand img {
  width: 160px;
  max-width: none;
  margin: -2px 0 0 -8px;
}
.site-header nav {
  display: flex;
  gap: 34px;
  font-size: 14px;
  font-weight: 550;
}
.site-header nav a:hover {
  color: var(--pink);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  border: 0;
  border-radius: 100px;
  padding: 17px 25px;
  font-weight: 650;
  font-size: 15px;
  line-height: 1.3;
  transition: background .18s, transform .18s;
}
.button:hover {
  transform: translateY(-2px);
}
.button.small {
  padding: 13px 21px;
  font-size: 14px;
}
.button.dark {
  background: var(--ink);
  color: white;
}
.button.dark:hover {
  background: #4b2b43;
}
.button.primary {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 7px 20px #db277720;
}
.button.primary:hover {
  background: #bf1d65;
}
.button span {
  font-size: 20px;
}
.hero {
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  align-items: center;
  gap: 35px;
  padding-top: 51px;
  padding-bottom: 89px;
  min-height: 710px;
}
h1 {
  font-family: var(--display);
  font-size: clamp(56px, 6.4vw, 94px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.055;
}
.hero-last {
  white-space: nowrap;
}
.hero-description {
  max-width: 445px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  margin-top: 29px;
}
.hero-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-top: 30px;
}
.hero-stage {
  position: relative;
  min-width: 0;
  height: 485px;
  background: var(--blush);
  border-radius: 48% 48% 42% 48%;
  margin-top: 30px;
}
.browser-toolbar {
  height: 40px;
  background: #fcfafb;
  border-bottom: 1px solid #eee7ec;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 15px;
  color: #766b72;
  font-size: 13px;
}
.window-dots {
  display: flex;
  gap: 5px;
}
.window-dots i {
  height: 6px;
  width: 6px;
  background: #dbcdd6;
  border-radius: 50%;
}
.address {
  border: 1px solid #eee8ec;
  background: #fff;
  border-radius: 5px;
  text-align: center;
  flex: 1;
  font-size: 10px;
  padding: 2px;
}
@media (min-width: 1500px) {
  .hero {
    padding-top: 70px;
    padding-bottom: 115px;
  }
  .hero-stage {
    height: 510px;
  }
}
@media (max-width: 1100px) {
  .wrap {
    width: calc(100% - 64px);
  }
  .hero {
    gap: 20px;
  }
  .hero-actions {
    gap: 16px;
  }
  .hero-stage {
    height: 435px;
  }
  h1 {
    font-size: 7vw;
  }
  .hero-description {
    font-size: 16px;
  }
}
@media (max-width: 800px) {
  .wrap {
    width: calc(100% - 40px);
  }
  .site-header {
    height: 85px;
    gap: 15px;
  }
  .site-header nav {
    display: none;
  }
  .brand {
    width: 130px;
  }
  .brand img {
    width: 145px;
  }
  .hero {
    grid-template-columns: 1fr;
    padding-top: 35px;
    padding-bottom: 75px;
    gap: 70px;
  }
  .hero-copy {
    max-width: 590px;
    margin-inline: auto;
    width: 100%;
  }
  h1 {
    font-size: clamp(52px, 10.5vw, 82px);
  }
  .hero-description {
    max-width: 480px;
  }
  .hero-stage {
    height: 450px;
    max-width: 490px;
    width: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 400px) {
  .wrap {
    width: calc(100% - 32px);
  }
  .button.small {
    padding: 12px 15px;
  }
  .hero-actions {
    gap: 18px;
  }
  .button {
    padding: 16px 20px;
  }
  .hero-stage {
    height: 428px;
  }
  .hero-description {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
h2 {
  font-family: var(--display);
  font-weight: 750;
  font-size: clamp(30px, 3.1vw, 43px);
  letter-spacing: -.04em;
  line-height: 1.2;
}
h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -.035em;
}
.faq-section {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 75px;
  padding-block: 65px 95px;
  border-top: 1px solid var(--line);
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list details:first-child {
  border-top: 1px solid var(--line);
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 21px 0;
  font-size: 15px;
  font-weight: 550;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary > span {
  font-weight: 400;
  font-size: 22px;
  color: #b75986;
  transition: transform .18s;
}
.faq-list details[open] summary > span {
  transform: rotate(45deg);
}
.faq-list details p {
  font-size: 14px;
  color: var(--muted);
  padding: 0 28px 23px 0;
  line-height: 1.9;
}
.closing-section {
  padding-bottom: 30px;
}
.closing-card {
  background: #d82475;
  color: white;
  border-radius: 22px;
  padding: 57px 64px;
  position: relative;
  overflow: hidden;
}
.closing-card h2 {
  font-size: clamp(32px, 4vw, 55px);
  margin-top: 21px;
  position: relative;
  z-index: 1;
  max-width: 700px;
}
.closing-card p {
  font-size: 16px;
  color: #fff;
  margin: 17px 0 26px;
  position: relative;
  z-index: 1;
}
.button.white {
  background: #fff;
  color: #ba2569;
  position: relative;
  z-index: 1;
}
.button.white:hover {
  background: #fff0f7;
}
.closing-mark {
  position: absolute;
  width: 510px;
  right: -72px;
  bottom: -58px;
  transform: rotate(-12deg);
  opacity: .2;
  filter: brightness(0) invert(1);
}
.site-footer {
  display: flex;
  align-items: center;
  gap: 25px;
  padding-block: 28px 36px;
}
.site-footer .brand {
  width: 120px;
  height: 40px;
}
.site-footer .brand img {
  width: 133px;
}
.site-footer p {
  font-size: 12px;
  color: var(--quiet);
}
.site-footer > a:last-child {
  font-size: 12px;
  margin-left: auto;
  color: #816b79;
}
.site-footer > a:last-child span {
  margin-left: 8px;
  color: #b85481;
}
dialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 40px);
  border: 1px solid #ebdce4;
  border-radius: 20px;
  padding: 38px;
  color: var(--ink);
  box-shadow: 0 25px 100px #35112426;
  overflow-y: auto;
}
dialog::backdrop {
  background: #29172175;
  backdrop-filter: blur(5px);
}
.dialog-close {
  position: absolute;
  right: 17px;
  top: 12px;
  width: 35px;
  height: 35px;
  border: 0;
  border-radius: 50%;
  background: #fbf0f6;
  color: #8b4b6a;
  font-size: 26px;
  line-height: 1;
}
.dialog-close:hover {
  background: #f7ddea;
}
dialog h2 {
  font-size: 32px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .faq-section {
    gap: 45px;
  }
  .closing-card {
    padding: 48px;
  }
  .closing-mark {
    width: 450px;
    right: -100px;
  }
  .hero-actions .button {
    padding-inline: 20px;
    font-size: 14px;
  }
}
@media (max-width: 800px) {
  .faq-section {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 45px 55px;
  }
  .faq-list summary {
    font-size: 14px;
  }
  .closing-card {
    padding: 36px 25px;
    border-radius: 16px;
  }
  .closing-card h2 {
    font-size: 35px;
    max-width: 420px;
  }
  .closing-mark {
    width: 300px;
    right: -95px;
    bottom: -50px;
    opacity: .13;
  }
  .closing-card p {
    font-size: 14px;
  }
  .site-footer {
    flex-wrap: wrap;
    gap: 12px 18px;
    padding-top: 12px;
  }
  .site-footer > a:last-child {
    width: 100%;
    margin: 0;
  }
  .site-footer p {
    font-size: 11px;
  }
  dialog {
    padding: 32px 25px;
  }
  dialog h2 {
    font-size: 28px;
  }
}
h1 {
  letter-spacing: -.04em;
  word-spacing: .035em;
}
h2 {
  letter-spacing: -.04em;
}
.faq-list details p {
  font-size: 16px;
}
.site-footer p,
.site-footer > a:last-child {
  font-size: 12px;
}
.hero-description,.faq-list details p {
  color: #70646d;
}
@media (max-width: 800px) {
  .closing-card h2 {
    font-size: 34px;
  }
}
@media (max-width: 380px) {
  h1 {
    font-size: 48px;
  }
  .hero-actions {
    gap: 14px;
  }
  .hero-actions .button {
    font-size: 13px;
    padding-inline: 17px;
  }
}
.hero-copy {
  min-width: 0;
}
@media (max-width: 380px) {
  h1 {
    font-size: clamp(40px, 13.1vw, 48px);
  }
  .hero-stage {
    min-width: 0;
  }
}
/* Motion reinforces the read → check → block story without looping decoration. */
.button { transition: transform .22s cubic-bezier(.2,.75,.25,1), background .2s, box-shadow .2s; }
.button > span:last-child { display: inline-block; transition: transform .22s ease; }
.button:hover > span:last-child { transform: translate(2px, -2px); }
.button:active { transform: translateY(0) scale(.97); }
.button:disabled { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: dialog-in .24s cubic-bezier(.2,.75,.25,1); }
  dialog[open]::backdrop { animation: backdrop-in .2s ease-out; }
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button:hover, .button:active, .button:hover > span:last-child { transform: none; }
}
/* A dimensional request-boundary scene, with a kinetic typographic entrance. */
.title-line { display: block; overflow: clip; padding-bottom: .09em; margin-bottom: -.09em; }
.title-line > span { display: block; transform-origin: left bottom; }
.hero-stage { height: 610px; perspective: 1100px; background: radial-gradient(ellipse at 52% 46%, #ffe0ee, #fff4f9 63%, #fff0 72%); border-radius: 0; }
.button.primary,.button.white { transition:translate .2s ease-out,transform .2s,box-shadow .25s,background .2s; }
.button.primary:hover { box-shadow:0 9px 30px #db277740; }
@media(max-width:1100px) {.hero-stage{height:590px}}
@media(max-width:800px) {.hero-stage{height:580px}.hero{gap:65px}}
@media(max-width:380px) {.hero-stage{height:560px}}
@media(prefers-reduced-motion:reduce) {.title-line>span{transform:none;filter:none}.button{translate:none!important}}
/* Keep captions outside the depth layers even at the maximum pointer tilt. */
@media(max-width:800px) {.hero{padding-bottom:95px}}
/* The gate has its own contained play area, separate from the 3D hero. */
/* One connected experience: app action, animated boundary, decision history. */
.ui-icon { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hero-stage { background:none; }
dialog::backdrop { backdrop-filter:none; }
/* Keep all three decisions from a sample session visible together. */
/* Visual endpoints stay paired with their labels as the selected app changes. */
/* A readable browser behind a clear, raised glass surface. */
.hero-stage.glass-hero { height:auto; min-height:570px; display:flex; flex-direction:column; justify-content:center; gap:22px; padding:16px 12px 0; perspective:1200px; }
.glass-frame { position:relative; height:430px; width:100%; transform-style:preserve-3d; transform:rotateX(calc(4deg + var(--rotate-x,0deg))) rotateY(calc(-9deg + var(--rotate-y,0deg))) rotateZ(-2deg); transition:transform .35s ease-out; }
.glass-browser { position:absolute; inset:0; background:white; border:1px solid #dcced7; border-radius:14px; box-shadow:5px 7px 0 #ead9e3,6px 8px 0 #d3bdca; overflow:hidden; }

.glass-pane { position:absolute;inset:-7px;transform:translateZ(24px);border:2px solid #eec6da;border-radius:19px;background:linear-gradient(125deg,#fff5 0%,#ffffff05 33%,#ffffff00 56%,#fff7 57%,#ffffff08 61%,#f7c9df18 100%);box-shadow:inset 2px 2px 0 #fff,inset -3px -3px 0 #e8bed059,7px 8px 0 #ebd9e570;pointer-events:none; }
.glass-edge { position:absolute;inset:5px;border:1px solid #ffffffaa;border-radius:13px; }
.glass-seal { position:absolute;top:-16px;right:17px;display:flex;align-items:center;gap:7px;border:1px solid #e7bacf;border-radius:20px;padding:6px 12px;background:#fff8fc;color:#ae326a;font-size:11px;font-weight:600;box-shadow:0 2px 0 #f2d6e4; }
.glass-seal img{width:23px;height:18px;object-fit:cover}
.glass-impact{position:absolute;width:55px;height:55px;border:2px solid #db2777;border-radius:50%;opacity:0;pointer-events:none;z-index:3;box-shadow:inset 0 0 0 8px #db277713}.glass-impact::after{content:'';position:absolute;inset:-12px;border:1px solid #e75995;border-radius:50%}.glass-demo-status{text-align:center;font-size:12px;color:#987086;min-height:38px;margin-top:-10px;line-height:1.6}
@media(max-width:800px) {.hero-stage.glass-hero{min-height:565px;max-width:480px;padding-inline:10px}.glass-frame{height:430px}.glass-demo-status{font-size:12px}}
@media(max-width:380px) {.glass-frame{height:440px}.glass-seal{font-size:10px}}
@media(prefers-reduced-motion:reduce) {.glass-frame{transform:rotateY(-5deg) rotateZ(-2deg);transition:none}}
.glass-frame { container-type:inline-size; }
.glass-impact { transform:translate(-50%,-50%) translateZ(30px); }
/* Real pointer interaction on a polished, transparent glass cover. */
.glass-pane {
  border:1.5px solid #f3b6d1;
  background:linear-gradient(118deg,#fff9 0%,#ffffff12 18%,#fff0 32%,#fff8 33%,#ffffff12 35%,#fde7f008 61%,#ffffff75 77%,#fff1 79%,#fbd3e426 100%);
  box-shadow:inset 2px 2px 1px #ffffffef,inset -2px -2px 1px #e7a6c377,6px 8px 0 #f9e1ec80,7px 9px 0 #ecb7cf5c;
}
.glass-edge { inset:4px; border-top:1px solid white; border-left:1px solid #ffffffc9; border-right:1px solid #e9a9c65c; border-bottom:1px solid #e9a9c65c; }
.glass-pane::after { content:''; position:absolute;inset:10px 5px;border-right:2px solid #fff9;border-radius:12px;pointer-events:none; }
.glass-seal { left:50%;right:auto;top:-19px;transform:translateX(-50%);padding:0;width:64px;height:38px;justify-content:center;border-color:#f3c2d8;background:#fff9fcde;box-shadow:inset 1px 1px 0 white,0 2px 0 #f0bfd544;overflow:hidden; }
.glass-seal img { width:72px;height:72px;max-width:none;object-fit:contain;flex-shrink:0; }

.glass-invitation { text-align:center;font-size:14px;line-height:1.7;color:#77566a;margin:14px 0 0;max-width:370px;align-self:center; }
.glass-invitation strong { display:block;font-size:17px;letter-spacing:-.03em;color:#33202c;margin-bottom:4px; }
.glass-invitation b { color:#b52669;font-weight:650; }
.glass-demo-status { font-size:12px;min-height:38px;margin-top:-10px; }
.send-blocked .glass-demo-status { color:#ae245f;font-weight:600; }
.visitor-agent-tag { display:none;position:fixed;z-index:1000;pointer-events:none;align-items:center;gap:5px;white-space:nowrap;padding:5px 9px;border-radius:7px;background:#cf246e;color:#fff;font:500 11px var(--body);box-shadow:0 2px 0 #ad205833; }
.visitor-agent-tag.visible { display:flex; }.visitor-agent-tag img{width:17px;height:17px;filter:brightness(0) invert(1)}
.glass-impact.visitor-impact {position:fixed;z-index:999;transform:translate(-50%,-50%); }
@media(hover:hover) and (pointer:fine) {.glass-frame,.glass-frame *{cursor:url('assets/agent-cursor.svg') 3 2,auto}}
@media(max-width:800px) {.glass-invitation{font-size:13px;max-width:310px}.glass-demo-status{font-size:12px}}
/* Familiar mail anatomy beneath the glass: folders, inbox, reading pane, reply. */
.glass-hero .glass-frame { height:592px; }

@media(max-width:1100px) {.glass-hero .glass-frame{height:615px}}
@media(max-width:800px) {.glass-hero .glass-frame{height:605px}.hero-stage.glass-hero{max-width:520px}}
@media(max-width:380px) {.glass-hero .glass-frame{height:615px}}

/* Keep the glass at the edges so the email remains unobscured. */
.glass-pane { background:transparent;backdrop-filter:none;box-shadow:inset 1px 1px 0 #fff,6px 8px 0 #f9e1ec80,7px 9px 0 #ecb7cf5c; }
.glass-pane::after { inset:4px;border-right:1px solid #fff9; }
.inline-wordmark { display:inline-block;width:auto;height:1.42em;max-width:none;object-fit:contain;vertical-align:-.39em;margin:0 -.14em 0 -.22em; }
.glass-hero .glass-demo-status { margin:10px 0 0;min-height:25px;font-size:15px;font-weight:600;color:#a62d63; }

/* A tighter introduction and a compact, scroll-free action recap. */
.hero { padding-top:12px; min-height:0; }
.hero-stage.glass-hero { margin-top:0; }
@media(max-width:800px) { .hero { padding-top:8px; } }
/* Familiar app surfaces share one read-only glass boundary. */
.hero-app-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin:0 -8px 10px; position:relative; z-index:4; }
.hero-app-tab { display:flex; align-items:center; gap:5px; border:1px solid transparent; border-radius:9px; background:#fff; padding:8px 7px; color:#786774; font-size:11px; }
.hero-app-tab img { width:18px; height:18px; object-fit:contain; }
.hero-app-tab.active { border-color:#e9a9c6; background:#fff1f7; color:#9f225d; }
.hero-app-tab:hover { background:#fff1f7; }

.glass-hero .glass-frame { height:540px; }
@media(max-width:1100px) { .hero-app-tab { padding-inline:6px; }.hero-app-tab span{font-size:10px}.glass-hero .glass-frame{height:565px} }
@media(max-width:800px) {.glass-hero .glass-frame{height:550px}.hero-app-tabs{margin-inline:0}.hero-app-tab{padding:8px}.hero-app-tab span{font-size:11px} }
@media(max-width:380px) { .hero-app-tab{padding:7px 5px}.hero-app-tab span{font-size:10px}.glass-hero .glass-frame{height:565px} }
/* A desktop-style app dock beneath the protected window. */
.hero-stage.glass-hero { gap:18px; }
.hero-app-tabs { align-self:center; flex-wrap:nowrap; align-items:end; gap:12px; margin:12px 0 0; padding:12px 15px 17px; border:1px solid #e8d9e2; border-radius:22px; background:linear-gradient(145deg,#fffafde8,#eee7edcc); box-shadow:inset 0 1px 0 #fff,0 6px 0 #eee5ec70,0 12px 24px #4121340a; }
.hero-app-tab { position:relative; display:grid; place-items:center; width:48px; height:48px; padding:8px; border:1px solid #ffffff; border-radius:13px; background:#fff; box-shadow:0 2px 5px #40203612; transform-origin:center bottom; transition:transform .18s ease,box-shadow .18s; }
.hero-app-tab img { width:32px; height:32px; object-fit:contain; }
.hero-app-tab span { position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%); opacity:0; pointer-events:none; padding:4px 9px; border:1px solid #e8d9e2; border-radius:7px; background:#fff; color:#493643; font-size:11px; white-space:nowrap; box-shadow:0 3px 10px #4020360a; }
.hero-app-tab:hover span,.hero-app-tab:focus-visible span { opacity:1; }
.hero-app-tab.active { background:#fff; border-color:#f3b4d0; }
.hero-app-tab::after { content:''; position:absolute; bottom:-10px; width:4px; height:4px; border-radius:50%; background:transparent; }
.hero-app-tab.active::after { background:#b4316c; }
.glass-hero .glass-demo-status { margin:0; }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .hero-app-tab:hover,.hero-app-tab:focus-visible { transform:translateY(-5px) scale(1.22);box-shadow:0 7px 12px #40203616; }
 .hero-app-tab:has(+ .hero-app-tab:hover),.hero-app-tab:hover + .hero-app-tab { transform:translateY(-2px) scale(1.08); }
}
/* One data list, repeated visually for a continuous verified-app ribbon. */
@media(max-width:600px) { .hero-app-tabs{gap:10px;padding:10px 12px 16px}.hero-app-tab{width:42px;height:42px;padding:7px}.hero-app-tab img{width:28px;height:28px} }
@media(prefers-reduced-motion:reduce) {.hero-app-tab{transition:none} }
/* A moving app wall with one inspectable verification card in the foreground. */
/* Coverage explanation beside the layer demo. */

/* Generic app icons and the company-wide calendar invitation. */
.hero-app-tab img { width:36px;height:36px; }

@media(max-width:600px) { .hero-app-tab img { width:30px;height:30px; } }

.hero-app-tab { padding:5px; }
.hero-app-tab img { width:38px;height:38px;display:block;object-fit:contain; }
@media(max-width:650px) {.hero-app-tab{padding:3px}.hero-app-tab img{width:34px;height:34px}}

/* The heart of the page: browser, onlyread and server as upright 3D panes in a row. */
.layer-demo { --ld-ink:#fbeef5;--ld-muted:#b995aa;--ld-line:#ffffff1c;--ld-green:#5fd3a0;--ld-pink:#f472b6;--tilt-x:0deg;--tilt-y:0deg;--s:1;
  position:relative;margin-top:40px;padding:34px 36px 26px;border-radius:30px;color:var(--ld-ink);overflow:hidden;isolation:isolate;
  background:radial-gradient(80% 70% at 50% 45%,#4a1238 0%,#26091d 45%,#14070f 100%); box-shadow:0 30px 80px #5b163f40; }
.layer-demo::before { content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(30% 40% at 50% 45%,#db277733,transparent 70%),radial-gradient(30% 30% at 90% 0%,#f472b61a,transparent 70%); }
.layer-head { display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap; }
.layer-title h3 { margin:0;font:750 clamp(26px,3.2vw,38px)/1.1 var(--display);letter-spacing:-.04em;color:#fff; }
.layer-controls { display:flex;gap:8px;padding:5px;border-radius:999px;background:#ffffff0d;border:1px solid var(--ld-line); }
.layer-controls button { padding:10px 18px;border:0;border-radius:999px;background:none;color:#e6c6d8;font:600 13px var(--body);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s; }
.layer-controls button:hover { color:#fff;background:#ffffff12; }
.layer-controls [aria-pressed="true"] { color:#fff;background:linear-gradient(135deg,#c8206b,#db2777);box-shadow:0 6px 18px #db277766,inset 0 1px 0 #ffffff55; }
.layer-controls button:focus-visible { outline:2px solid var(--ld-pink);outline-offset:2px; }

.layer-body { display:grid;gap:8px; }
.layer-scene { position:relative;height:550px;perspective:1900px;perspective-origin:50% 40%; }
/* Panes stand along the stack's Z axis; rotateY turns that axis into left-to-right on screen. */
.layer-stack { position:absolute;left:50%;top:44%;width:420px;height:280px;margin:-140px 0 0 -210px;transform-style:preserve-3d;
  transform:scale(var(--s)) rotateX(calc(-12deg + var(--tilt-x))) rotateY(calc(-50deg + var(--tilt-y))) translateZ(-300px);transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.layer-floor { position:absolute;left:-700px;width:1820px;top:calc(100% + 36px);height:1500px;transform-origin:top;transform:translateZ(-450px) rotateX(90deg);
  background:radial-gradient(closest-side,#db277750,#db277712 55%,transparent),repeating-linear-gradient(0deg,#f472b61f 0 1px,transparent 1px 50px),repeating-linear-gradient(90deg,#f472b61f 0 1px,transparent 1px 50px);
  -webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent);mask-image:radial-gradient(closest-side,#000 25%,transparent); }

.slab { --z:300px;--t:16px;--side:#c9b5c2;--side-2:#b39cab;position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(var(--z));transition:transform 1.3s cubic-bezier(.2,.9,.2,1); }
.slab-face { position:absolute;inset:0;border-radius:16px;overflow:hidden; }
.slab-server { --z:270px; }
.slab-guard { --z:300px;--t:12px;--side:#f472b6aa;--side-2:#db277799; }
.slab-browser { --z:330px;--t:14px;--side:#e7d9e1;--side-2:#cdb9c6; }
.layer-demo.is-open .slab-server { --z:0px;transition-delay:.1s; }
.layer-demo.is-open .slab-browser { --z:600px; }

/* Browser: the familiar app, printed on the first pane. */
.slab-browser .slab-face { background:#fff;box-shadow:0 0 0 1px #ffffffaa,0 0 50px #f472b640; }
.face-bar { display:flex;align-items:center;gap:5px;height:34px;padding:0 14px;background:#f6eff3;border-bottom:1px solid #eadbe3; }
.face-bar i { width:7px;height:7px;border-radius:50%;background:#dcc7d3; }
.face-bar span { margin-left:10px;padding:3px 14px;border-radius:99px;background:#fff;font:11px ui-monospace,monospace;color:#7d6474; }
.face-app { display:grid;grid-template-columns:96px 1fr;height:calc(100% - 34px);color:#2c1b27; }
.face-nav { display:flex;flex-direction:column;gap:6px;padding:14px 10px;background:#fbf7f9;border-right:1px solid #f0e4ea;font-size:12px;color:#7a6371; }
.face-nav strong { font-size:12px;color:#3b2634;margin-bottom:6px; }.face-nav span{padding:4px 8px;border-radius:6px}.face-nav .selected{background:#fde4f0;color:#b3245f;font-weight:600}

/* onlyread: pink glass with the seal etched into it. */
.slab-guard .slab-face { background:linear-gradient(135deg,#f472b64d,#db27772e 55%,#f472b640);border:1.5px solid #ffb3d6b3;box-shadow:0 0 70px #db277773,inset 0 0 40px #ffc4df33;transition:box-shadow .4s,background .4s; }
.guard-seal { position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;display:grid;place-items:center;border-radius:28px;background:#fff;box-shadow:0 0 0 6px #ffffff2e,0 0 40px #ff9ccb;transition:box-shadow .4s,transform .4s; }
.guard-seal img { width:74px;height:74px; }
.guard-scan { position:absolute;top:0;bottom:0;left:-30%;width:30%;opacity:0;background:linear-gradient(90deg,transparent,#fff6,#ffd6ea,transparent); }
.guard-impact { position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:3px solid #ff4d9d;opacity:0; }
.slab-guard .face-tag { position:absolute;left:16px;bottom:12px;font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#ffd5e8b3; }
.layer-demo[data-phase="inspecting"] .guard-scan { animation:guard-scan 1.1s linear infinite; }
.layer-demo[data-phase="inspecting"] .guard-seal { box-shadow:0 0 0 6px #ffffff40,0 0 60px #ff9ccb,0 0 110px #db2777; }
.layer-demo.is-read:is([data-phase="deciding"],[data-phase="returning"],[data-phase="allowed"]) .guard-seal { box-shadow:0 0 0 6px #5fd3a066,0 0 60px #5fd3a0aa; }
.layer-demo.is-write:is([data-phase="deciding"],[data-phase="blocked"]) .slab-guard .slab-face { background:linear-gradient(135deg,#ff4d9d73,#db277759);box-shadow:0 0 90px #ff2f86,inset 0 0 50px #ff9ccb66; }
@keyframes guard-scan { to { left:100%;opacity:1; } }

/* Server: dark hardware at the far end of the row. */
.slab-server { --t:22px;--side:#2b1a26;--side-2:#1d111a; }
.slab-server .slab-face { background:linear-gradient(135deg,#3a2733,#231621);border:1px solid #ffffff1f;box-shadow:0 30px 60px #0008; }
.slab-server .face-tag { position:absolute;left:18px;top:14px;font:11px ui-monospace,monospace;color:#b89aad; }
.rack { position:absolute;left:18px;right:18px;top:44px;display:grid;gap:12px; }
.rack>div { display:flex;align-items:center;gap:8px;height:48px;padding:0 14px;border-radius:9px;background:linear-gradient(180deg,#44303e,#2f1f2a);border:1px solid #ffffff14; }
.rack b { width:8px;height:8px;border-radius:50%;background:#5c4655;transition:background .3s,box-shadow .3s; }
.rack span { flex:1;height:14px;margin-left:10px;border-radius:3px;background:repeating-linear-gradient(90deg,#ffffff1a 0 2px,transparent 2px 6px); }
.layer-demo.is-read:is([data-phase="returning"],[data-phase="allowed"]) .rack b { background:var(--ld-green);box-shadow:0 0 10px var(--ld-green); }
.layer-demo.is-read[data-phase="returning"] .rack b:nth-child(2) { animation:rack-blink .35s steps(2) infinite; }
@keyframes rack-blink { 50% { background:#5c4655;box-shadow:none; } }

/* Billboards: labels, beam and packet face the viewer whatever the stack's angle. */
.stack-label,.layer-packet { position:absolute;display:block;transform-style:flat; }
.stack-label { left:50%;top:100%;width:220px;margin:26px 0 0 -110px;text-align:center;transform-origin:50% 0;transform:translateZ(var(--z)) rotateY(50deg) rotateX(12deg);transition:transform 1.3s cubic-bezier(.2,.9,.2,1),opacity .6s;opacity:0; }
.layer-demo.is-open .stack-label { opacity:1; }
.label-server { --z:270px; }.label-guard{--z:300px}.label-browser{--z:330px}
.layer-demo.is-open .label-server { --z:0px; }.layer-demo.is-open .label-browser{--z:600px}
.stack-label b { display:block;font:700 19px var(--display);letter-spacing:-.02em;color:#fff; }
.stack-label small { display:block;font-size:13px;color:var(--ld-muted);margin-top:2px; }
.stack-label img { display:block;height:32px;width:auto;margin:0 auto; }
.label-guard small { color:#ffb6d7; }
.layer-demo.is-read[data-phase="allowed"] .label-server small { color:var(--ld-green); }
.layer-beam { position:absolute;display:block;left:50%;top:50%;width:600px;height:2px;margin-top:-1px;transform-origin:0 50%;transform:rotateY(-90deg);opacity:0;transition:opacity .8s .7s;background:linear-gradient(90deg,#f472b600,#f472b6aa 20%,#fff 50%,#f472b6aa 80%,#f472b600); }
.layer-demo.is-open .layer-beam { opacity:.6; }
.layer-packet { left:50%;top:50%;width:176px;margin:-30px 0 0 -88px;padding:9px 12px;border-radius:12px;opacity:0;pointer-events:none;transform-origin:50% 50%;
  background:#1c0b16e6;border:1.5px solid var(--ld-pink);box-shadow:0 0 0 4px #f472b624,0 0 26px #f472b699;color:#fff; }
.layer-packet b { display:block;font:600 10px ui-monospace,monospace;color:#ffb6d7; }
.layer-packet code { display:block;margin-top:2px;font:600 13px ui-monospace,monospace;white-space:nowrap; }
.layer-demo[data-phase="returning"] .layer-packet { border-color:var(--ld-green);box-shadow:0 0 0 4px #5fd3a024,0 0 26px #5fd3a099; }
.layer-demo[data-phase="returning"] .layer-packet b { color:var(--ld-green); }
.layer-demo.is-write[data-phase="deciding"] .layer-packet { border-color:#ff4d9d;background:#3a0a22e6; }

/* Panel under the scene: the same story in words. */
.layer-panel { display:grid;grid-template-columns:1fr 1fr 1.1fr;border-radius:20px;background:#ffffff0a;border:1px solid var(--ld-line);box-shadow:inset 0 1px 0 #ffffff14; }
.layer-panel>* { padding:20px 22px;min-width:0; }
.layer-panel>*+* { border-left:1px solid var(--ld-line); }
.panel-head { display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--ld-muted); }
.panel-method { padding:3px 9px;border-radius:99px;background:#f472b61f;color:#ffb6d7;font:600 11px ui-monospace,monospace; }
.panel-operation { display:block;margin-top:12px;font:600 16px ui-monospace,monospace;color:#fff;overflow-wrap:anywhere; }
.panel-data { display:block;margin-top:4px;font:12px ui-monospace,monospace;color:var(--ld-muted);overflow-wrap:anywhere; }
.layer-steps { list-style:none;margin:0;display:grid;align-content:center;gap:11px; }
.layer-steps li { display:flex;align-items:center;gap:11px;font-size:13px;color:#a8899b;transition:color .3s; }
.layer-steps em { font-style:normal; }
.layer-steps li>span { position:relative;width:18px;height:18px;flex-shrink:0;border-radius:50%;border:1.5px solid #ffffff33;transition:all .3s; }
.layer-steps li.is-active { color:#fff; }.layer-steps li.is-active>span{border-color:var(--ld-pink);background:#f472b633;box-shadow:0 0 12px var(--ld-pink)}
.layer-steps li.is-done { color:#e8d3de; }.layer-steps li.is-done>span{border-color:#f472b6;background:#f472b6}
.layer-steps li.is-done>span::after { content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #2a0b1e;border-width:0 2px 2px 0;transform:rotate(45deg); }
.layer-demo.is-read .layer-steps li[data-step="3"].is-done>span { border-color:var(--ld-green);background:var(--ld-green); }
.layer-demo.is-write .layer-steps li[data-step="3"].is-done>span { border-color:#ff4d9d;background:#ff4d9d; }
.layer-demo.is-write .layer-steps li[data-step="3"].is-done>span::after { left:3px;top:7px;width:9px;height:0;border-width:0 0 2px;transform:none; }
.panel-verdict { font:750 24px var(--display);letter-spacing:-.03em;color:#fff;min-height:32px; }
.layer-demo.is-read[data-phase="allowed"] .panel-verdict { color:var(--ld-green); }.layer-demo.is-write[data-phase="blocked"] .panel-verdict{color:#ff6fae}
.panel-reason { margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--ld-muted);min-height:40px; }
.layer-caption { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding-top:18px;border-top:1px solid var(--ld-line); }
.layer-caption p { margin:0;font:600 16px var(--body);color:#fff;min-height:26px; }
.layer-caption span { font-size:11px;color:#9c7d8f; }

/* Detail dialog. */
#layer-dialog { width:min(820px,calc(100vw - 36px));max-height:85vh;padding:30px;border:1px solid #e3ced9;border-radius:22px;color:var(--ink);background:#fff;box-shadow:0 30px 90px #2a0b1e55; }
#layer-dialog::backdrop { background:#1a0812a6; }
.layer-dialog-close { position:absolute;right:16px;top:12px;border:0;background:none;color:#886276;font-size:28px;padding:5px 10px;cursor:pointer; }
.layer-dialog-kicker { font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pink); }
#layer-dialog h2 { margin:8px 0 0;font:750 32px var(--display);letter-spacing:-.04em; }
.layer-dialog-intro { margin:6px 0 0;font-size:14px;color:var(--quiet); }
.layer-dialog-decision { padding:14px 0;margin:16px 0;border-block:1px solid #eee3e9; }
.layer-dialog-decision>span { font:12px ui-monospace,monospace;color:#a04270; }.layer-dialog-decision p{margin:4px 0 0;font-size:14px;color:#6f5664}
.protocol-inspector { display:grid;grid-template-columns:1.2fr 1fr;gap:14px; }
.protocol-inspector>div { min-width:0;padding:14px;border-radius:12px;background:#faf6f8;border:1px solid #efe4ea; }
.inspector-heading { display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#6e5d67;margin-bottom:10px; }.inspector-heading>span:nth-child(2){color:var(--quiet)}
.protocol-inspector pre { margin:0;font:11px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:#53424c; }
.layer-demo.is-write #http-response { color:#9c4d67; }
#protocol-takeaway { margin:14px 0 0;font-size:13px;color:#7b5f6f; }
.layer-dialog-credit { margin:6px 0 0;font-size:11px;color:var(--quiet); }

@media(max-width:1100px) { .layer-demo{--s:.8}.layer-scene{height:460px} }
@media(max-width:850px) {
  .layer-demo { padding:26px 20px 20px;--s:.62; }
  .layer-scene { height:370px; }
  .layer-panel { grid-template-columns:1fr 1fr; }.panel-result{grid-column:1/-1;border-left:0!important;border-top:1px solid var(--ld-line)}
}
@media(max-width:560px) {
  .layer-demo { --s:.42;padding:22px 14px 16px;border-radius:22px; }
  .layer-head { gap:16px; }.layer-controls{width:100%}.layer-controls button{flex:1;padding:10px 8px;font-size:12px}
  .layer-scene { height:250px;margin:0 -14px; }
  .stack-label b { font-size:24px; }.stack-label small{display:none}.stack-label img{height:40px}
  .layer-panel { grid-template-columns:1fr; }.layer-panel>*+*{border-left:0;border-top:1px solid var(--ld-line)}
  .layer-caption { flex-direction:column;align-items:flex-start;gap:4px; }.layer-caption p{font-size:15px}
  .protocol-inspector { grid-template-columns:1fr; }#layer-dialog{padding:24px 18px}
}
@media(max-width:360px) { .layer-demo{--s:.36}.layer-scene{height:220px}.layer-controls button{font-size:11px;padding:9px 6px} }
@media(prefers-reduced-motion:reduce) {
  .layer-stack,.slab,.stack-label,.layer-beam,.layer-controls button,.guard-seal,.slab-guard .slab-face { transition:none; }
  .layer-demo .guard-scan,.layer-demo .rack b { animation:none!important; }
}

/* Continuous rounded shells, matching the hero's raised glass edge. */
.slab { --rim:26px; --shell:#d6bdcc; }
.slab-shell { position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none; }
.slab-shell i { position:absolute;inset:0;border:5px solid var(--shell);border-radius:var(--rim);background:var(--shell);transform:translateZ(calc(var(--depth) * -1px));box-shadow:inset 0 0 0 1px #ffffff30; }
.slab .slab-face { border-radius:var(--rim);border:4px solid #f6eaf1;box-shadow:inset 0 0 0 1px #fff,0 14px 35px #14070f33; }
.slab-browser { --shell:#cdb8c5; }
.slab-browser .slab-face { border-color:#f6eaf1;background:#fff;box-shadow:0 0 0 1px #fff8,inset 0 0 0 1px #fff,0 18px 40px #14070f33; }
.slab-browser .face-bar { height:37px;background:linear-gradient(#fff,#f5edf2); }
.slab-browser .face-app { height:calc(100% - 37px); }
.slab-guard { --shell:#d96b9f; }
.slab-guard .slab-shell i { background:transparent;border-color:#d96b9f88;box-shadow:none; }
.slab-guard .slab-face { border:5px solid #f7bad7;background:linear-gradient(125deg,#fff3,#f472b622 34%,#ffffff08 65%,#ffbbda33);box-shadow:inset 2px 2px 0 #fff9,inset -3px -3px 0 #d9569455,0 0 40px #db27772b; }
.slab-guard .slab-face::after { content:'';position:absolute;inset:5px;pointer-events:none;border:1px solid #ffe6f3aa;border-radius:17px; }
.slab-guard .guard-seal { border:3px solid #ffe8f3;border-radius:30px;box-shadow:2px 3px 0 #e6b2cc,4px 6px 0 #c779a0,0 12px 24px #3d102744; }
.slab-server { --shell:#3e2a38; }
.slab-server .slab-face { border:5px solid #755368;background:linear-gradient(135deg,#46303e,#251921);box-shadow:inset 1px 1px 0 #b491a655,inset -2px -2px 0 #170d1680,0 20px 45px #0005; }
.slab-server .rack { top:47px;left:18px;right:18px;gap:11px; }
.slab-server .rack>div { border-radius:13px;border:2px solid #65475a;background:linear-gradient(#513a49,#35232f);box-shadow:inset 0 1px 0 #ffffff15,0 3px 0 #1f141c; }
.layer-packet { border-radius:16px;border-width:2px; }
.layer-demo.is-write:is([data-phase="deciding"],[data-phase="blocked"]) .slab-guard .slab-face { border-color:#ffadd1;box-shadow:inset 2px 2px 0 #ffe5f2aa,inset -3px -3px 0 #d9569455,0 0 45px #ff2f8680; }

/* Browser pane: a real search or composer that stays busy until the request settles. */
.face-main { position:relative;padding:14px 16px 0;min-width:0;color:#2c1b27; }
.layer-demo:not(.is-write) .face-compose,.layer-demo.is-write .face-search { display:none; }
.search-box { display:flex;align-items:center;gap:8px;height:38px;padding:0 10px 0 11px;border:1.5px solid #e6d3de;border-radius:11px;background:#fff;font-size:14px;font-weight:500;transition:border-color .25s,box-shadow .25s; }
.search-box svg { width:15px;height:15px;flex-shrink:0;fill:none;stroke:#9a7d8e;stroke-width:1.6;stroke-linecap:round; }
.search-box>span { flex:1;white-space:nowrap; }
.face-main[data-state="loading"] .search-box { border-color:#db2777;box-shadow:0 0 0 3px #db27771f; }
.face-spinner { display:none;width:13px;height:13px;flex-shrink:0;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:face-spin .7s linear infinite; }
.search-box .face-spinner { color:#db2777; }
.face-main[data-state="loading"] .face-spinner { display:block; }
@keyframes face-spin { to { transform:rotate(360deg); } }
.face-subhead { display:block;margin:12px 2px 8px;font-size:11px;font-weight:600;letter-spacing:.02em;color:#7d6474; }
.when-done,.when-loading { display:none; }
.face-main[data-state="loading"] .when-loading,.face-main[data-state="done"] .when-done { display:inline; }
.face-main[data-state="loading"] .compose-button .when-idle { display:none; }
.search-results { display:grid;gap:7px; }
.skeleton-row { display:none;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#faf5f8; }
.face-main[data-state="loading"] .skeleton-row { display:flex; }
.skeleton-row>i { width:28px;height:28px;border-radius:50%;flex-shrink:0; }
.skeleton-row div { flex:1;display:grid;gap:6px; }.skeleton-row span{height:7px;border-radius:4px}.skeleton-row span:last-child{width:60%}
.skeleton-row>i,.skeleton-row span { background:linear-gradient(90deg,#f0e4ea 0%,#fbf6f9 40%,#f0e4ea 80%) 0 0/300% 100%;animation:face-shimmer 1.2s linear infinite; }
@keyframes face-shimmer { from { background-position:100% 0; } to { background-position:-50% 0; } }
.result-card { display:none;align-items:center;gap:10px;padding:9px 10px;border:1.5px solid #bfe5cf;border-radius:11px;background:#f1faf5;animation:face-arrive .45s cubic-bezier(.2,.8,.2,1); }
.face-main[data-state="done"] .result-card { display:flex; }
.result-card>i { display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;background:#fde0ee;color:#b3245f;font:700 10px var(--body);font-style:normal; }
.result-card div { flex:1;display:flex;flex-direction:column;min-width:0; }.result-card strong{font-size:13px}.result-card span{font-size:11px;color:#7e6878}
.result-card>b { padding:4px 10px;border:1px solid #e6d3de;border-radius:7px;background:#fff;font-size:11px;color:#6f5664; }
@keyframes face-arrive { from { opacity:0;transform:translateY(6px); } }
.face-heading { display:block;margin-bottom:10px;font:700 16px var(--display);letter-spacing:-.02em; }
.compose-box { padding:10px 12px;border:1.5px solid #e6d3de;border-radius:12px;background:#fff; }
.compose-head { display:flex;align-items:center;gap:8px;font-size:11px;color:#7d6474; }
.compose-head>i { display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fde0ee;color:#b3245f;font:700 8px var(--body);font-style:normal; }
.compose-box p { margin:8px 0 10px;font-size:14px;font-weight:500;line-height:1.35; }
.compose-foot { display:flex;align-items:center;justify-content:space-between; }
.compose-tools { display:flex;gap:6px; }.compose-tools i{width:14px;height:14px;border-radius:4px;background:#f1e6ec}
.compose-button { display:flex;align-items:center;gap:6px;padding:6px 13px;border-radius:8px;background:#db2777;color:#fff;font-size:12px;transition:background .25s; }
.compose-button .face-spinner { width:11px;height:11px; }
.face-main[data-state="loading"] .compose-button { background:#e98ab4; }
.compose-error { display:none;align-items:center;gap:9px;margin-top:9px;padding:8px 10px;border:1px solid #f4b3d1;border-radius:10px;background:#ffeef6;animation:face-arrive .4s cubic-bezier(.2,.8,.2,1); }
.face-main[data-state="blocked"] .compose-error { display:flex; }
.compose-error>b { display:grid;place-items:center;width:20px;height:20px;flex-shrink:0;border-radius:50%;background:#db2777;color:#fff;font-size:12px; }
.compose-error div { display:flex;flex-direction:column; }.compose-error strong{font-size:12px;color:#b3245f}.compose-error span{font-size:10.5px;color:#7e6878}

/* The packet travels in a flat layer above the scene, placed at points projected from the panes, so it never slices through them. */
.layer-anchor { position:absolute;left:50%;top:50%;width:2px;height:2px;margin:-1px;pointer-events:none;transform:translateZ(var(--az)); }
[data-anchor="browser"] { --az:600px; }[data-anchor="guard"]{--az:300px}[data-anchor="server"]{--az:0px}
.layer-scene>.layer-packet { left:0;top:0;margin:0;z-index:6;transform-style:flat;will-change:transform,opacity; }
.layer-demo.is-read .guard-impact { border-color:#5fd3a0; }
@media(prefers-reduced-motion:reduce) { .face-spinner,.skeleton-row>i,.skeleton-row span { animation:none; }.result-card,.compose-error{animation:none} }

/* A quieter object study. Scroll controls the distance between the three layers. */
.layer-demo { --spread:0;scroll-margin-top:48px; }
.layer-scroll-hint { margin:10px 0 0;color:#cbb7c4;font-size:14px; }
.layer-demo .slab-browser,.layer-demo.is-open .slab-browser { --z:calc(324px + 276px * var(--spread)); }
.layer-demo .slab-server,.layer-demo.is-open .slab-server { --z:calc(276px - 276px * var(--spread)); }
.layer-demo .label-browser,.layer-demo.is-open .label-browser { --z:calc(324px + 276px * var(--spread)); }
.layer-demo .label-server,.layer-demo.is-open .label-server { --z:calc(276px - 276px * var(--spread)); }
.layer-demo [data-anchor="browser"] { --az:calc(324px + 276px * var(--spread)); }
.layer-demo [data-anchor="server"] { --az:calc(276px - 276px * var(--spread)); }
.layer-demo .slab,.layer-demo .stack-label { transition:none; }
.layer-demo .stack-label,.layer-demo.is-open .stack-label { opacity:var(--spread); }
.layer-demo .layer-beam { display:none; }
.layer-scene>.layer-packet { width:190px;padding:12px 16px;border:1px solid #efdae5;border-radius:18px;background:#fff9fc;color:#533449;box-shadow:0 4px 0 #d9b9ca,0 12px 24px #170b1425; }
.layer-packet b { font:500 11px var(--body);color:#a17189; }
.layer-packet code { font:600 15px/1.35 var(--body);white-space:normal;margin-top:4px; }
.layer-demo[data-phase="returning"] .layer-packet { background:#f3fcf7;border-color:#c5e3d0;box-shadow:0 4px 0 #bad3c3,0 12px 24px #170b1425; }
.layer-demo[data-phase="returning"] .layer-packet b { color:#528366; }
.layer-demo.is-write[data-phase="deciding"] .layer-packet { background:#fff3f8;border-color:#e8abc6; }
.layer-panel { display:block;background:none;border:0;box-shadow:none; }
.layer-panel .panel-request,.layer-panel .layer-steps { display:none; }
.layer-panel .panel-result { display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 24px;border:0!important;padding:0; }
.panel-result .panel-reason { display:none; }
.panel-verdict { font-size:20px;min-height:28px; }
@media(max-width:560px) { .layer-scroll-hint{font-size:12px}.layer-panel .panel-result{gap:12px}.panel-verdict{font-size:17px} }

/* Small protocol marks sit beside the human-readable request. */
.layer-scene>.layer-packet { width:216px;padding-left:49px;min-height:64px; }
.packet-protocol { position:absolute;left:12px;top:15px;width:27px;height:31px;display:grid;place-items:center;color:#d6338b; }
.packet-protocol svg { width:27px;height:29px;overflow:visible; }
.packet-trpc { display:none;width:27px;height:27px;object-fit:contain; }
.layer-demo.is-write .packet-gql { display:none; }
.layer-demo.is-write .packet-trpc { display:block; }

/* One calm, human status line beneath the scene. */
.packet-protocol { top:50%;transform:translateY(-50%); }
.layer-panel[hidden] { display:none; }
.layer-caption { justify-content:center;align-items:center;margin-top:0;padding:6px 0 4px;border:0;text-align:center; }
.layer-caption p { font:500 clamp(14px,1.5vw,17px)/1.5 var(--body);color:#dec7d5;min-height:26px; }

/* Full-width browser chrome, with a quieter protective glass surface. */
.slab-browser .face-bar { width:100%;height:40px;padding:0 12px;background:linear-gradient(#f9f4f7,#e9dfe6);border-bottom:1px solid #dac8d3; }
.slab-browser .face-bar>i { flex:0 0 7px; }
.slab-browser .face-bar>span { flex:1;min-width:0;margin-left:8px;padding:5px 12px;border:1px solid #e6d9e1;border-radius:7px;background:#fffcfe;text-align:center; }
.slab-browser .face-app { height:calc(100% - 40px); }
.slab-guard .slab-face { border:4px solid #efb8d1;background:linear-gradient(125deg,#fff3 0%,#f7c7dd12 42%,#fff2 80%,#fff4 100%);box-shadow:inset 2px 2px 0 #fff9,inset -2px -2px 0 #b85f8b55,0 12px 32px #18091825; }
.slab-guard .slab-face::after { inset:7px;border-color:#ffedf566;border-radius:16px; }
.slab-guard .guard-seal { width:108px;height:108px;margin:-54px;border-radius:32px;background:linear-gradient(145deg,#fffcfe,#f9e7f0);border:2px solid #fff8fc;box-shadow:2px 3px 0 #dba6c0,4px 6px 0 #b9799a,0 14px 28px #2a0b1e2b; }
.slab-guard .guard-seal img { width:78px;height:78px; }
.layer-demo[data-phase="inspecting"] .guard-seal { box-shadow:2px 3px 0 #dba6c0,4px 6px 0 #b9799a,0 0 30px #ffbddb55; }
.layer-demo.is-read:is([data-phase="deciding"],[data-phase="returning"],[data-phase="allowed"]) .guard-seal { box-shadow:2px 3px 0 #dba6c0,4px 6px 0 #b9799a,0 0 24px #5fd3a04d; }
.slab-guard .face-tag { left:0;right:0;bottom:24px;text-align:center;font:500 14px var(--body);letter-spacing:.01em;text-transform:none;color:#ffeaf5cc; }
.guard-scan { display:none; }
.layer-demo.is-write:is([data-phase="deciding"],[data-phase="blocked"]) .slab-guard .slab-face { background:linear-gradient(125deg,#fff3,#ec6ca22b);border-color:#f5a9cb;box-shadow:inset 2px 2px 0 #fff9,inset -2px -2px 0 #b85f8b55,0 0 30px #ff2f8633; }

/* Headline between the hero and the demo. The hero browser flies past it on its way into the demo. */
.dive { position:relative;z-index:25;padding:90px 0 70px;text-align:center; }
/* Sits above the travelling hero browser, so the browser passes behind the words. */
.dive-line-1 { margin:0;font-size:clamp(16px,1.6vw,20px);color:var(--muted); }
.dive-line-2 { margin:10px 0 0;font:750 clamp(38px,6vw,78px)/1 var(--display);letter-spacing:-.04em;color:var(--ink); }
.dive-line-2 em { font-style:normal;color:var(--pink); }
.dive-caption { margin:18px 0 0;font:650 clamp(18px,1.8vw,24px) var(--display);letter-spacing:-.02em;color:var(--ink); }
.dive-caption span { color:var(--pink); }
.inside-band { position:relative;margin-top:-1px;padding:20px 0 110px;background:#14070f;border-radius:0 0 48px 48px; }
.inside-band .layer-demo { margin-top:0;box-shadow:none; }
@media(max-width:700px) { .dive{padding:60px 0 44px}.inside-band{padding-bottom:60px;border-radius:0 0 28px 28px} }

/* The hero browser travels into the demo and lands on its browser pane; app.js drives these while scrolling. */
.glass-frame.is-traveling { transition:none;pointer-events:none;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--ts,1),var(--tsy,var(--ts,1))) rotateX(var(--rx,4deg)) rotateY(var(--ry,-9deg)) rotateZ(var(--rz,-2deg)); }
.hero.is-diving { position:relative;z-index:20; }
/* The travelling hero browser can overhang the viewport; clip without creating a scroll container. */
html,body { overflow-x:clip; }

/* Dusk: the page dims gradually as the hero browser flies down, until it matches the demo's band.
   app.js sets its opacity and clips it to the band's bottom; the lit browser (z 20), the headline (z 25)
   and the band (z 16) stay above it. */
.dusk { position:fixed;left:0;right:0;top:0;height:var(--dusk-h,100vh);z-index:15;background:#14070f;opacity:0;pointer-events:none; }
.inside-band { z-index:16; }
/* The band darkens with the dusk instead of being dark from the start: white mixed toward the dark by the
   same amount the dusk layer dims the page, so page and band always share one colour. */
.inside-band { --band-dark:1;background:color-mix(in srgb,#14070f calc(var(--band-dark) * 100%),#fff); }
.dive { --dusk:0; }
.dive-line-1 { color:color-mix(in srgb,var(--muted),#d8c2ce calc(var(--dusk) * 100%)); }
.dive-line-2,.dive-caption { color:color-mix(in srgb,var(--ink),#fff calc(var(--dusk) * 100%)); }
.dive-line-2 em,.dive-caption span { color:color-mix(in srgb,var(--pink),#f472b6 calc(var(--dusk) * 100%)); }
/* Once the headline turns light it can pass over the white browser; a halo that grows with the dusk keeps it legible. */
.dive-line-1,.dive-line-2,.dive-caption { text-shadow:0 2px 20px color-mix(in srgb,#14070f calc(var(--dusk) * 85%),transparent),0 0 3px color-mix(in srgb,#14070f calc(var(--dusk) * 55%),transparent); }

/* Where onlyread works: shown in the hero and again in the closing card. */
/* Real product icons in the "works with" chips, and the Chrome Web Store call to action. */
.store-cta { gap:10px; }
.store-cta .ui-icon { transition:transform .3s ease; }
.store-cta:hover .ui-icon,.store-cta:focus-visible .ui-icon { transform:translate(3px,-3px); }
/* Chrome mark in the store button: flat and single-colour, in the button's text colour. The wrapper runs a one-time
   entrance spin and pulse ring; the mark rolls a full turn on hover while a soft white glow blooms behind it.
   Nothing loops. */
.store-logo { position:relative;display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;animation:store-logo-in 1s .9s both cubic-bezier(.3,1.25,.5,1); }
.store-logo::before { content:'';position:absolute;inset:-9px;border-radius:50%;background:radial-gradient(closest-side,#fffffff2,#ffffff80 55%,#fff0);filter:blur(4px);opacity:0;transform:scale(.6) rotate(0deg);transition:opacity .35s ease,transform .8s cubic-bezier(.2,.8,.2,1); }
.store-logo::after { content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid #fff;opacity:0;animation:store-logo-pulse .9s 1.55s ease-out both;pointer-events:none; }
.store-mark { position:relative;width:26px;height:26px;fill:currentColor;transition:transform .8s cubic-bezier(.3,1.35,.5,1); }
.store-cta:hover .store-mark,.store-cta:focus-visible .store-mark { transform:rotate(360deg) scale(1.08); }
.store-cta:hover .store-logo::before,.store-cta:focus-visible .store-logo::before { opacity:.55;transform:scale(1); }
.store-cta:active .store-mark { transform:rotate(360deg) scale(.88);transition-duration:.15s; }
@keyframes store-logo-in { from { transform:rotate(-220deg) scale(.3);opacity:0; } 65% { transform:rotate(18deg) scale(1.12);opacity:1; } to { transform:none;opacity:1; } }
@keyframes store-logo-pulse { from { transform:scale(.9);opacity:.85; } to { transform:scale(2.1);opacity:0; } }
@media(prefers-reduced-motion:reduce) {
  .store-logo,.store-logo::after { animation:none; }
  .store-mark,.store-cta .ui-icon { transition:none; }
  .store-cta:hover .store-mark,.store-cta:focus-visible .store-mark,.store-cta:active .store-mark,.store-cta:hover .ui-icon { transform:none; }
  .store-logo::before { transition:opacity .2s; }
}

/* ── Middle of the page, in the hero and closing-card language: big Manrope type, the OR glass seal, pink as a surface. */
.coverage { display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:60px;padding:120px 0 60px; }
.coverage h2 { font-size:clamp(34px,4.2vw,58px);line-height:1.02;letter-spacing:-.04em; }
.coverage-number { display:block;margin-bottom:.1em;font-size:clamp(90px,13vw,190px);line-height:.85;letter-spacing:-.04em;color:var(--pink); }
.coverage p { margin:22px 0 0;max-width:470px;font-size:17px;line-height:1.7;color:var(--muted); }

.steps { padding:40px 0 110px; }
.steps-row { display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0;padding:0;list-style:none;counter-reset:none; }
.steps-row li { position:relative;padding:34px 30px 32px;border-radius:24px;background:#fff7fb;border:1px solid #f4dbe7;overflow:hidden; }
.step-num { position:absolute;right:20px;top:-4px;font:800 150px/1 var(--display);letter-spacing:-.08em;color:#fbdcea;pointer-events:none; }
.steps-row h3 { position:relative;margin:70px 0 0;font-size:24px;letter-spacing:-.04em; }
.steps-row p { position:relative;margin:10px 0 0;font-size:15px;line-height:1.65;color:var(--muted); }

.pricing { padding:40px 0 120px; }
.pricing h2 { font-size:clamp(38px,5.4vw,72px);line-height:1;letter-spacing:-.04em;text-align:center; }
.pricing h2 em { font-style:normal;color:var(--pink); }
@media(max-width:560px) { .pricing h2 { font-size:min(38px,9.2vw); } }
.plans { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;margin-top:60px; }
.plan { position:relative;display:flex;flex-direction:column;padding:34px 30px 30px;border-radius:26px;background:#fff;border:1px solid #efdde6;box-shadow:0 18px 40px #7a1d4a0f; }
.plan h3 { font-size:15px;font-weight:700;letter-spacing:.02em;color:#a9366b; }
.plan-price { margin:14px 0 0;display:flex;flex-direction:column;gap:4px; }
.plan-price strong { font:800 clamp(44px,4.6vw,60px)/1 var(--display);letter-spacing:-.04em; }
.plan-price span { font-size:14px;color:var(--muted); }
.plan-pitch { margin:12px 0 0;font-size:15px;color:var(--muted);min-height:3em; }
.plan-includes { margin:26px 0 0;padding-top:24px;border-top:1px solid #f1e3ea;font-size:14.5px;font-weight:700;color:var(--ink); }
.plan-featured .plan-includes { color:#fff;border-color:#ffffff38; }
.plan-includes + .plan-features { margin-top:14px;padding-top:0;border-top:0; }
.plan-features { display:grid;gap:10px;margin:24px 0 28px;padding:22px 0 0;border-top:1px solid #f1e3ea;list-style:none; }
.plan-features li { display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.45; }
.plan-features svg { width:18px;height:18px;flex-shrink:0;margin-top:1px;fill:none;stroke:var(--pink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; }
.plan-button { justify-content:center;width:100%;margin-top:auto; }
.plan .plan-button:not(.white):not(.dark) { background:#fff1f7;color:#a9366b; }
.plan .plan-button:not(.white):not(.dark):hover { background:#ffe2ef; }
.plan-featured { background:#d82475;border-color:#d82475;color:#fff;box-shadow:0 26px 60px #d8247540; }
.plan-featured h3,.plan-featured .plan-price span,.plan-featured .plan-pitch { color:#fff; }
.plan-featured .plan-price small { opacity:1; }
.plan-featured .plan-features { border-color:#ffffff38; }
.plan-featured .plan-features svg { stroke:#fff; }
.plan-badge { position:absolute;top:20px;right:22px;padding:5px 11px;border-radius:99px;background:#0000001f;font-size:12px;font-weight:650;color:#fff; }
.contact-form { display:grid;gap:10px; }
.contact-form label { display:grid;gap:5px;font-size:12px;font-weight:600;color:#6f5a66; }
.contact-form input,.contact-form textarea { width:100%;padding:10px 12px;border:1px solid #e8d6df;border-radius:11px;background:#fdf9fb;font:inherit;font-size:14px;font-weight:400;color:var(--ink);resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus { outline:none;border-color:var(--pink);box-shadow:0 0 0 3px #db277724;background:#fff; }
.contact-form input[aria-invalid="true"] { border-color:#c62a5f; }
.contact-form .plan-button { margin-top:6px; }
.contact-form { margin-top:22px; }
.contact-intro { margin:10px 0 0;font-size:15px;color:var(--muted); }
.form-status { min-height:20px;margin:0;font-size:13px;color:var(--muted); }
.form-status.is-error { color:#b3245f; }
.faq-section h2 { font-size:clamp(34px,4.2vw,56px);letter-spacing:-.04em; }
.faq-list summary > span { color:var(--pink); }
@media(max-width:900px) { .plans{grid-template-columns:1fr;max-width:460px;margin-inline:auto} }
@media(max-width:800px) { .coverage{grid-template-columns:1fr;gap:30px;padding-top:80px}.steps-row{grid-template-columns:1fr}.steps{padding-bottom:70px}.pricing{padding-bottom:80px} }
@media(max-width:620px) { .plans{grid-template-columns:1fr}.plans{margin-top:40px} }

/* The closing card repeats the hero's store button in white: pink mark and a pink glow instead of white. */
.button.white.store-cta { color:#c21f68; }
.button.white.store-cta .store-logo { animation:none; }
.button.white.store-cta .store-logo::after { display:none; }
.button.white.store-cta .store-logo::before { background:radial-gradient(closest-side,#f472b6cc,#f472b666 55%,#f472b600); }
.contact-trap { position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden; }
.plan-price small { font-size:.4em;font-weight:600;letter-spacing:-.01em;margin-left:3px;color:inherit;opacity:.75; }

.trademark-note { flex-basis:100%;margin:6px 0 0;font-size:12px;line-height:1.6;color:var(--quiet); }
.site-footer { flex-wrap:wrap; }

/* Pin: the demo holds still, vertically centred, while the reader scrolls through a runway below it, so a quick
   scroll can't carry it off screen before it plays. app.js opens the stack exactly as the pin engages. */
.inside-band .layer-demo { position:sticky;top:max(12px,calc(50svh - 360px));z-index:1; }
.pin-runway { height:75svh; }
@media(max-width:850px) { .inside-band .layer-demo { top:max(12px,calc(50svh - 330px)); } }
@media(max-width:560px) { .inside-band .layer-demo { top:max(12px,calc(50svh - 240px)); }.pin-runway{height:65svh} }
@media(prefers-reduced-motion:reduce) { .inside-band .layer-demo { position:relative;top:auto; }.pin-runway{display:none} }

/* The agent's cursor inside the demo's browser pane: it glides to Search or Publish and clicks before each request. */
.search-go { flex-shrink:0;padding:5px 11px;border-radius:8px;background:#db2777;color:#fff;font-size:12px;font-weight:600;transition:transform .12s,background .2s; }
.face-main[data-state="loading"] .search-go { display:none; }
.search-go.is-pressed,.compose-button.is-pressed { transform:scale(.92);background:#be185d; }
.face-cursor { position:absolute;left:0;top:0;z-index:5;display:flex;align-items:flex-start;pointer-events:none;opacity:0;will-change:transform; }
.face-cursor img { position:relative;width:22px;height:22px;filter:drop-shadow(0 2px 3px #3c10281f); }
.face-cursor b { position:absolute;right:12px;top:17px;padding:3px 7px;border-radius:6px;background:#db2777;color:#fff;font-size:10px;font-weight:600;white-space:nowrap; }
.face-click { position:absolute;left:-9px;top:-9px;width:20px;height:20px;border-radius:50%;border:2px solid #db2777;opacity:0; }
@media(prefers-reduced-motion:reduce) { .face-cursor { display:none; } }

/* Glare while onlyread inspects a request: one soft, slanted band of light crosses the glass from left to right
   over the whole 1.25s inspection, like light catching a pane of glass. */
.guard-sweep { position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;border-radius:inherit;overflow:hidden; }
.guard-sweep i { position:absolute;top:-25%;bottom:-25%;left:var(--scan);width:42%;transform:skewX(-20deg);mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent 0,#ffffff14 18%,#ffe4f166 38%,#ffffffcc 47%,#fff 50%,#ffffffcc 53%,#ffe4f166 62%,#ffffff14 82%,transparent 100%); }
.guard-sweep i::after { content:'';position:absolute;inset:0 0 0 70%;width:8%;background:linear-gradient(90deg,transparent,#ffffff80,transparent); }
@property --scan { syntax:'<percentage>';inherits:true;initial-value:-60%; }
@keyframes guard-sweep { 0% { --scan:-60%;opacity:0; } 12% { opacity:1; } 88% { opacity:1; } 100% { --scan:118%;opacity:0; } }
.layer-demo[data-phase="inspecting"] .guard-sweep { opacity:1;animation:guard-sweep 1.24s cubic-bezier(.4,0,.35,1) 1 both; }
@media(prefers-reduced-motion:reduce) { .layer-demo[data-phase="inspecting"] .guard-sweep { animation:none;opacity:0; } }

/* ── Hero app screens: Mail keeps the inbox layout; Social, Messages and Calendar get their own real layouts. */

.app-screen { display:none;height:calc(100% - 88px);overflow:hidden;font-size:12px;color:#2c2230; }

/* Social: one feed post with reactions and a comment box. */

/* Messages: chat list on the left, the open group chat on the right. */

/* Calendar: a real week view with the new event blocked on Friday, and its editor. */

/* Social: the ex's engagement post. */

/* Social fits without scrolling; Like is its own blockable button; the comment box is one aligned row. */

/* Enterprise contact dialog (Formspree). */
#contact-dialog { width:min(560px,calc(100% - 32px));padding:34px 34px 30px; }
.contact-kicker { font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--pink); }
#contact-dialog h2 { margin-top:6px; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.chips { display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0;padding:0;border:0; }
.chips legend { width:100%;margin-bottom:6px;font-size:12px;font-weight:600;color:#6f5a66; }
.chip { position:relative; }
.chip input { position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none; }
.chip span { display:block;padding:7px 14px;border:1px solid #e8d6df;border-radius:99px;background:#fdf9fb;font-size:13px;font-weight:500;color:#5b4852;cursor:pointer;transition:background .15s,border-color .15s,color .15s; }
.chip input:checked + span { background:var(--pink);border-color:var(--pink);color:#fff; }
.chip input:focus-visible + span { outline:2px solid var(--pink);outline-offset:2px; }
.contact-form textarea::placeholder { color:var(--quiet); }
.contact-done { text-align:center;padding:20px 0 4px; }
.done-mark { display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fde4f0; }
.done-mark svg { width:28px;height:28px;fill:none;stroke:var(--pink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; }
.contact-done h2 { margin-top:16px; }.contact-done p{margin:8px 0 22px;color:var(--muted)}
@media(max-width:520px) { .form-row{grid-template-columns:1fr}#contact-dialog{padding:26px 20px 22px} }
/* The demo email subject is styled like a heading but isn't one, so the page outline stays clean for search engines. */

/* Live tabs: a real embedded post, the onlyread on/off switch, and a click shield while protection is on. The `app-*`
   class on the browser is set by app.js (`app-${post.app}`), so these selectors never appear in the HTML as written. */
.app-x .screen-x,.app-reddit .screen-reddit,.app-instagram .screen-instagram,.app-tiktok .screen-tiktok,.app-youtube .screen-youtube { display:flex;flex-direction:column; }
.live-embed { position:relative;flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start;padding:8px 12px 0;overflow:hidden; }
.live-frame { display:block;border:0;background:transparent;opacity:0;transition:opacity .4s; }
.live-embed.is-loaded .live-frame { opacity:1; }
.live-shield { position:absolute;inset:0;z-index:2;border:0;padding:0;background:transparent;cursor:not-allowed; }
.live-shield:focus-visible { outline:3px solid #db2777;outline-offset:-3px; }
.guard-off .live-shield { display:none; }
/* Chrome sends mouse input straight to a cross-origin iframe unless the iframe itself is out of hit testing, so a
   transparent shield on top is not enough on its own. On, the live post takes no pointer events at all. */
.hero-stage:not(.guard-off) .live-frame { pointer-events:none; }
/* Turning onlyread off lifts the glass off the browser. */

/* Off: the glass itself fades away; the onlyread logo stays as the switch, greyed with an OFF badge. */
.hero-stage .glass-pane { transition:border-color .35s,background .35s,box-shadow .35s; }
.hero-stage.guard-off .glass-pane { border-color:transparent;background:none;box-shadow:none; }
.hero-stage.guard-off .glass-pane::after,.hero-stage.guard-off .glass-edge { opacity:0; }
.live-frame { transform-origin:top center;flex-shrink:0; }
/* The live tabs drop the app bar so the embedded post fits at its real size, like a feed column. */

.is-live .app-screen { height:calc(100% - 40px); }
.live-embed { padding:6px 8px 0; }
/* The onlyread logo on the glass: decorative on most tabs, a real toggle on the live tab, where the logo is the
   knob of a pill switch (pink and right when on, grey and left when off). */
.glass-seal { font:inherit;cursor:default; }
.seal-knob { display:contents; }
.is-live .glass-seal { width:72px;height:40px;padding:0;border-radius:99px;border:2px solid #fff;background:#db2777;box-shadow:0 4px 14px #db277759,inset 0 1px 3px #0002;pointer-events:auto;cursor:pointer;justify-content:flex-start;transition:background .25s,box-shadow .25s; }
.is-live .seal-knob { display:grid;place-items:center;position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0003;overflow:hidden;transform:translateX(32px);transition:transform .25s cubic-bezier(.3,1.4,.5,1); }
.is-live .seal-knob img { position:absolute;left:50%;top:50%;width:34px;height:34px;max-width:none;margin:0;object-fit:contain;transform:translate(-50%,-50%); }
.is-live.guard-off .glass-seal { background:#b9adb4;box-shadow:0 3px 10px #3c102822,inset 0 1px 3px #0002; }
.is-live.guard-off .seal-knob { transform:none; }
.is-live.guard-off .seal-knob img { filter:grayscale(1); }
.is-live .glass-seal:hover { box-shadow:0 0 0 4px #f9cfe2,0 4px 14px #db277759; }
.is-live .glass-seal:focus-visible { outline:3px solid #db2777;outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { .is-live .seal-knob,.is-live .glass-seal { transition:none; } }
/* X tab: the tweet sits centred on X's light timeline grey. */
.screen-x { background:#f7f9f9; }
.screen-x .live-embed { align-items:center;padding-bottom:20px; }
.screen-youtube { background:#0f0f0f; }.screen-youtube .live-embed{align-items:center;padding-bottom:20px}
.screen-reddit { background:#dae0e6; }.screen-reddit .live-embed{align-items:center;padding-bottom:20px}
.screen-instagram { background:#fafafa; }
/* Nine app tabs: shrink them on phones so the whole row fits. */
@media(max-width:560px) { .hero-app-tabs{gap:3px;padding:5px;max-width:calc(100vw - 24px);flex-wrap:nowrap}.hero-app-tab{padding:4px;flex:1 1 0;min-width:0}.hero-app-tab img{width:100%;max-width:30px;height:auto;aspect-ratio:1} }
/* One shared background for every live tab, so the posts read as a set. */
.screen-x,.screen-reddit,.screen-instagram,.screen-tiktok,.screen-youtube { background:#f4f1f3; }

/* Hero polish: pink glow behind the browser, two-line headline, demo/live mode switch, animated try hint. */
.hero-stage.glass-hero { background:none; }
.hero-stage.glass-hero::before { content:'';position:absolute;inset:-12% -18% -8%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#ffc6df 0%,#ffdcec 38%,#ffeef6 62%,#fff0 100%);filter:blur(8px); }
/* Two-column hero on tablets: keep the glow off the paragraph beside the browser. */
@media(min-width:561px) and (max-width:1100px) { .hero-stage.glass-hero::before { inset:-12% -4% -8%; } }
.hero { isolation:isolate; }
h1#hero-title { font-size:clamp(40px,5.15vw,76px); }
@media(max-width:560px) { h1#hero-title { font-size:10.2vw; } }
.hero-app-tab[hidden] { display:none; }

/* Live post loading: a skeleton of the coming post, with a pink glare sweeping across it like the onlyread glass.
   The real post fades in over it, and the skeleton fades away. */
.live-skel { position:absolute;left:50%;top:8px;width:340px;height:300px;z-index:1;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:12px;background:#fff;border:1px solid #ece3e8;box-shadow:0 8px 22px #7a1d4a0d;overflow:hidden;transition:opacity .5s ease,transform .5s ease; }
.live-skel i { display:block;font-style:normal;border-radius:6px;background:#f1eaee; }
.sk-logo { position:absolute;top:14px;right:14px;width:18px;height:18px;object-fit:contain;opacity:.9; }
.sk-head { display:flex;align-items:center;gap:10px;margin-bottom:2px; }
.sk-head > div { flex:1;display:grid;gap:6px; }
.sk-avatar { width:34px;height:34px;flex-shrink:0;border-radius:50%!important; }
.sk-line { height:10px; } .sk-line.sm{height:8px} .sk-line.lg{height:14px}
.sk-media { flex:1;min-height:60px;border-radius:8px!important; }
.sk-media.square { border-radius:2px!important; }
.sk-actions { display:flex;gap:14px;margin-top:auto; } .sk-actions i{width:44px;height:12px}
.live-skel.sk-youtube,.live-skel.sk-tiktok { padding:0;border:0;background:#1d1d1f;border-radius:10px;align-items:center;justify-content:center; }
.sk-youtube .sk-logo { opacity:.6; }
.sk-tiktok .sk-logo { opacity:.7;filter:invert(1); }
.sk-play { width:60px;height:42px;border-radius:12px!important;background:#ffffff1f!important;position:relative; }
.sk-play::after { content:'';position:absolute;left:50%;top:50%;margin:-9px 0 0 -6px;border:9px solid transparent;border-left:15px solid #ffffff66;border-right:0; }
.live-skel::after { content:'';position:absolute;inset:-20% auto -20% 0;width:38%;transform:translateX(-120%) skewX(-18deg);background:linear-gradient(90deg,#fff0,#fde4f0aa 40%,#fff 50%,#fde4f0aa 60%,#fff0);animation:skel-glare 1.35s cubic-bezier(.45,0,.4,1) infinite; }
.sk-youtube::after,.sk-tiktok::after { background:linear-gradient(90deg,#fff0,#ff9ccb22 40%,#ffffff2e 50%,#ff9ccb22 60%,#fff0); }
@keyframes skel-glare { to { transform:translateX(320%) skewX(-18deg); } }
.live-frame { transform-origin:top center; }
.live-embed .live-frame { transition:opacity .55s ease; }
.live-embed.is-loaded .live-skel { opacity:0;transform:scale(.985);pointer-events:none; }
@media(prefers-reduced-motion:reduce) { .live-skel::after { animation:none;opacity:0; } .live-skel,.live-embed .live-frame { transition:none; } }
/* Phones: short live posts (X, YouTube, Reddit) sit near the top of the tall browser, like a feed, instead of floating mid-screen. */
@media(max-width:560px) { .screen-x .live-embed,.screen-youtube .live-embed,.screen-reddit .live-embed { align-items:flex-start;padding-top:22px; } }
/* Tab names are for screen readers only: the hover tooltip got stuck on touch screens. */
.hero-app-tab span { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;opacity:1!important; }

/* ── Hero browser on phones: flat and centred, a phone-friendly height, compact app layouts, tighter controls. */
@media(max-width:560px) {
  .hero-stage.glass-hero { padding:22px 0 0;gap:14px;max-width:none;min-height:0; }
  .glass-hero .glass-frame { height:480px; }
  .glass-frame:not(.is-traveling) { transform:none; }
  .glass-pane { inset:-5px; }
  .glass-browser { box-shadow:0 14px 34px #7a1d4a1f; }
  /* Mail: folders become a slim icon rail so the inbox has room. */

  /* Calendar: a shorter grid leaves room for the whole event panel, Invite included. */

  /* Controls: mode switch and app icons read as one compact block. */

  .hero-app-tabs { padding:5px;gap:4px; }
  .glass-demo-status { margin-top:-6px;font-size:12px;min-height:30px; }
}

/* Phones: browser sized to the screen, app switcher below it (as on desktop), status under that. */
@media(max-width:560px) {
  .hero { gap:28px; }
  .hero-description { margin-top:14px; }
  .hero-actions { margin-top:20px; }
  .hero-stage.glass-hero { padding-top:26px;gap:12px; }
  .hero-app-tabs { order:0;margin:6px 0 0; }
  .glass-hero .glass-frame { height:clamp(360px,56svh,440px); }
  .glass-demo-status { margin-top:2px; }
}
/* Footer links: privacy, source, store and contact. */
.footer-links { display:flex;flex-wrap:wrap;gap:6px 18px;margin-left:auto;font-size:12px; }
.footer-links a,.footer-links button { padding:0;border:0;background:none;color:#816b79;font:inherit;cursor:pointer; }
.footer-links a:hover,.footer-links button:hover { color:var(--pink); }
.footer-links :focus-visible { outline:2px solid var(--pink);outline-offset:2px;border-radius:3px; }
@media(max-width:800px) { .footer-links { width:100%;margin-left:0; } }
@media(max-width:560px) { .footer-links a,.footer-links button { padding-block:6px; } }

/* Coverage: the request sorter. Each chip is a task from the Mind2Web recordings (site favicon, site, task). Chips
   cross from the agent to the app; reads pass through the onlyread glass, writes stop at it and fade. app.js runs it
   while it is in view. Styled like the hero: a window with the hard pink offset shadow, a glass strip for the boundary,
   pill chips, the onlyread mark on the strip, nothing else. */
.traffic { width:100%;max-width:600px;justify-self:center;border:1px solid #f1d6e2;border-radius:26px;background:#fff;box-shadow:6px 8px 0 #f6e3ec,7px 9px 0 #e4ccd8;overflow:hidden; }
.lanes { --foot:48px;position:relative;height:calc(320px + var(--foot));overflow:hidden;background:linear-gradient(90deg,#fff 0 62%,#fff7fb 62%); }
.boundary { position:absolute;top:0;bottom:0;left:62%;width:14px;transform:translateX(-50%);background:linear-gradient(180deg,#ffd9e8,#fbc4da);border-inline:1px solid #f3a6c8;box-shadow:inset 1px 0 0 #fff9,0 0 26px #db27772e; }
/* The onlyread mark sits on the strip, in a white disc like the switch's knob. */
.boundary img { position:absolute;bottom:9px;left:50%;width:34px;max-width:none;height:34px;padding:3px;transform:translateX(-50%);border-radius:50%;background:#fff;box-shadow:0 0 0 1px #f1cadb,0 2px 0 #f0bfd5; }
.req { position:absolute;left:0;height:34px;display:flex;align-items:center;gap:8px;padding:0 13px 0 7px;border:1px solid #efdfe7;border-radius:99px;background:#fff;font-size:12.5px;line-height:1;color:#6f5f69;white-space:nowrap;will-change:transform;box-shadow:0 2px 0 #f3e4eb; }
.req img { width:18px;height:18px;border-radius:4px;object-fit:contain; }
.req b { font-weight:600;color:var(--ink); }
.req b::after { content:'·';margin-left:7px;color:#c9b8c2; }
.req.dropped { border-color:#e36a97;background:#fff1f6;color:#8c3a5d;box-shadow:0 2px 0 #f4c6d8; }
.req .tag { display:none; }
@media(max-width:800px) { .traffic { max-width:none; } .lanes { --foot:42px;height:calc(260px + var(--foot)); } .req { height:30px;font-size:11.5px;gap:6px;padding:0 11px 0 6px; } .boundary { width:10px; } .boundary img { width:30px;height:30px;bottom:7px; } }
@media(max-width:480px) { .req span,.req b::after { display:none; } }

/* ── Hero glass, made visible. The pane is only a holder (its depth, and the seal on its top edge); the sheet inside it
   is the glass: a tinted, bevelled, lit surface. app.js lowers the sheet onto the browser when onlyread switches on
   (the page opens with it off, then flips it on once the headline has landed) and lifts it off when it is switched off. */
.glass-pane { border:0;background:none;box-shadow:none;transform-style:preserve-3d; }
.glass-pane::after { display:none; }
.glass-sheet { position:absolute;inset:0;border-radius:inherit;border:2px solid #f0a2c5;pointer-events:none;
  background:linear-gradient(116deg,#ffffffa6 0%,#ffffff30 18%,#ffffff0f 34%,#ffffff26 58%,#ffffff40 78%,#f7c8df59 100%);
  box-shadow:inset 0 0 0 1px #ffffffe6,inset 0 0 54px #db27771f,0 0 0 4px #ffe4f0,0 24px 60px #db277733,6px 8px 0 #f9e1ecb3,7px 9px 0 #ecb7cf80; }
.glass-sheet::before { content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(112deg,transparent 31%,#ffffff59 37%,#ffffffb3 40.5%,#ffffff59 44%,transparent 50%),linear-gradient(112deg,transparent 72%,#ffffff80 75%,transparent 78%); }
.glass-sheet .glass-edge { inset:5px;border-radius:13px;border-top:1px solid #fff;border-left:1px solid #ffffffe0;border-right:1px solid #e9a0c466;border-bottom:1px solid #e9a0c466;opacity:1; }
.glass-glare { position:absolute;inset:0;overflow:hidden;border-radius:inherit; }
.glass-glare b { position:absolute;top:-30%;bottom:-30%;left:-45%;width:38%;opacity:0;transform:skewX(-20deg);mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent 0,#ffffff1a 18%,#ffe4f18c 38%,#fff 50%,#ffe4f18c 62%,#ffffff1a 82%,transparent 100%); }
.hero-stage.glass-lifted .glass-sheet { opacity:0;visibility:hidden; }
/* The seal is the onlyread switch on every tab: a pill with the logo as its knob, pink and right when on, grey and left
   when off. Only the live tabs let the visitor flip it (see .is-live .glass-seal). */
.glass-seal { width:72px;height:40px;padding:0;border-radius:99px;border:2px solid #fff;background:#db2777;box-shadow:0 4px 14px #db277759,inset 0 1px 3px #0002;justify-content:flex-start;transition:background .25s,box-shadow .25s; }
.seal-knob { display:grid;place-items:center;position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0003;overflow:hidden;transform:translateX(32px);transition:transform .25s cubic-bezier(.3,1.4,.5,1); }
.seal-knob img { position:absolute;left:50%;top:50%;width:34px;height:34px;max-width:none;margin:0;object-fit:contain;transform:translate(-50%,-50%); }
.hero-stage.guard-off .glass-seal { background:#b9adb4;box-shadow:0 3px 10px #3c102822,inset 0 1px 3px #0002; }
.hero-stage.guard-off .seal-knob { transform:none; }
.hero-stage.guard-off .seal-knob img { filter:grayscale(1); }
@media(max-width:560px) { .glass-sheet { box-shadow:inset 0 0 0 1px #ffffffe6,inset 0 0 40px #db27771f,0 0 0 3px #ffe4f0,0 16px 40px #db277733; } }
@media(prefers-reduced-motion:reduce) { .glass-seal,.seal-knob { transition:none; } }

/* A second, thin bright streak follows the main glare band. */
.glass-glare b.thin { left:-22%;width:9%;background:linear-gradient(90deg,transparent,#ffffffd9 50%,transparent); }

/* ── Liquid glass for the hero's app dock and mode switch: a frosted, translucent slab over the pink glow, with a bright
   bevel on the lit edges, a thinner one on the far edges, a soft inner glow, and a specular highlight (--lx) that
   follows the pointer along the top edge. The dock icons sit on it as small glass tiles. */
@property --lx { syntax:'<percentage>';inherits:false;initial-value:50%; }
.hero-app-tabs { transition:--lx .3s ease-out; }
.hero-app-tabs { isolation:isolate;border:1px solid #ffffffbf;border-radius:24px;
  background:linear-gradient(135deg,#ffffff73 0%,#ffffff26 45%,#ffffff59 100%);
  -webkit-backdrop-filter:blur(24px) saturate(2.1) brightness(1.05);backdrop-filter:blur(24px) saturate(2.1) brightness(1.05);
  box-shadow:inset 2px 2px 0 -1px #fff,inset -2px -2px 0 -1px #ffffff8c,inset 0 0 0 1px #ffffff59,inset 0 -10px 16px -12px #db27774d,inset 0 0 20px #ffffff66,0 1px 0 #ffffffcc,0 18px 44px #7a1d4a24,0 4px 10px #7a1d4a0f; }
.hero-app-tabs::before { content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(150px 48px at var(--lx) -10px,#ffffffd9,#ffffff00 70%),linear-gradient(180deg,#ffffff99,#ffffff00 40%,#ffffff00 72%,#ffffff40); }
.hero-app-tabs::after { content:'';position:absolute;inset:1px;border-radius:23px;pointer-events:none;
  box-shadow:inset 0 1.5px 0 #ffffffe6,inset 0 -1.5px 0 #ffffffb3,inset 0 0 0 1px #db277712; }
.hero-app-tab { border:1px solid #ffffffe6;background:linear-gradient(160deg,#ffffffbf,#ffffff73);box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #ffffff66,0 3px 8px #40203614; }
.hero-app-tab.active { border-color:#f3b4d0;background:linear-gradient(160deg,#fff,#fff3f8);box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #ffd9e8,0 6px 16px #db277726; }
@media(prefers-reduced-motion:reduce) { .hero-app-tabs { transition:none; } }

/* ── Agent cursors inside the browser window (app.js builds and drives them): each AI agent's arrow and label in its
   maker's colour with its mark, a click ring at the tip, and a "refused" tag when a write hits the glass. The thing an
   agent reads flashes in the agent's colour (.agent-peek). Hidden with reduced motion. */
.agent-cursors { position:absolute;inset:0;z-index:30;pointer-events:none; }
.agent-cursor { position:absolute;left:0;top:0;width:22px;height:22px;color:var(--c);opacity:0;will-change:transform;transition:opacity .6s; }
.agent-cursor.is-on { opacity:1; }
.agent-arrow { width:22px;height:22px;flex:none;transform-origin:2px 2px;filter:drop-shadow(0 2px 4px #4a0f2f40); }
.agent-ring { position:absolute;left:-12px;top:-12px;width:28px;height:28px;border-radius:50%;border:2.5px solid var(--c);opacity:0;transform:scale(.3); }
.agent-cursor span { position:absolute;left:15px;top:15px;width:max-content;display:flex;align-items:center;gap:5px;padding:4px 9px 4px 7px;border-radius:4px 10px 10px 10px;background:var(--c);color:#fff;font:600 11px/1.2 var(--body);white-space:nowrap;box-shadow:0 2px 0 #0000001f; }
/* Near the window's right or bottom edge the label moves to the other side of the arrow, so it is never clipped. */
.agent-cursor.left span { left:auto;right:12px;border-radius:10px 4px 10px 10px; }
.agent-cursor.flip span { top:auto;bottom:12px;border-radius:10px 10px 10px 4px; }
.agent-cursor.left.flip span { border-radius:10px 10px 4px 10px; }
.agent-cursor span img { width:12px;height:12px;display:block; }
.agent-cursor span b { display:none;margin-left:2px;padding-left:7px;border-left:1px solid #ffffff73;font-weight:700; }
.agent-cursor.has-tag span b { display:inline; }
.agent-peek { animation:agent-peek 1s ease-out; }
@keyframes agent-peek { 0% { box-shadow:inset 0 0 0 2px transparent; } 25% { box-shadow:inset 0 0 0 2px var(--peek),inset 0 0 0 999px color-mix(in srgb,var(--peek) 10%,transparent); } 100% { box-shadow:inset 0 0 0 2px transparent; } }
@media(prefers-reduced-motion:reduce) { .agent-cursors { display:none; } .agent-peek { animation:none; } }

/* ── The seal as an obvious switch: a grab cursor, a hover nudge of the knob toward the other side, and the knob can
   be dragged (app.js). It works on every tab; on the example apps, off
   lets the write through (the button turns into its done state, green). */
.glass-frame .glass-seal { pointer-events:auto;cursor:grab;touch-action:none; }
.glass-frame .glass-seal:active { cursor:grabbing; }
.glass-seal:hover .seal-knob { transform:translateX(27px); }
.hero-stage.guard-off .glass-seal:hover .seal-knob { transform:translateX(5px); }
.glass-seal:hover { box-shadow:0 0 0 4px #f9cfe2,0 4px 14px #db277759; }
.hero-stage.guard-off .glass-seal:hover { box-shadow:0 0 0 4px #e9e1e6,0 3px 10px #3c102822; }
.glass-seal:focus-visible { outline:3px solid #db2777;outline-offset:3px; }

/* The knob's logo must not start a native image drag when the knob is slid. */
.glass-seal,.glass-seal * { -webkit-user-select:none;user-select:none;-webkit-user-drag:none; }
.glass-seal img { pointer-events:none; }

/* The dive headline sets the wordmark instead of the word: it scales with the type and keeps its own pink through the
   flight, when the text around it turns white. */
.dive-wordmark { display:inline-block;width:auto;height:1.42em;max-width:none;vertical-align:-.39em;margin:0 -.2em 0 -.28em;filter:drop-shadow(0 2px 20px color-mix(in srgb,#14070f calc(var(--dusk) * 85%),transparent)); }
/* The Mind2Web credit lives in the footer small print as a link. */
.trademark-note a { color:inherit;text-decoration:underline;text-underline-offset:2px; }
.trademark-note a:hover { color:var(--pink); }

/* While the hero browser flies into the demo, its page cross-fades into a copy of the demo's own browser page, so the
   handoff to the stack shows one page, not two. app.js builds the copy from the stack's pane and scales it to fit. */
.handoff-face { position:absolute;inset:0;z-index:40;background:#fff;opacity:0;pointer-events:none; }
.handoff-face[hidden] { display:none; }
.handoff-face > .slab-browser { position:absolute;left:0;top:0;transform-origin:0 0; }
.handoff-face .slab-face { border-radius:0;box-shadow:none; }

/* Phones: setup cards sit tighter, with a smaller numeral, so three of them don't run a screen and a half. */
@media(max-width:560px) {
  .steps { padding:24px 0 70px; }
  .steps-row { gap:14px; }
  .steps-row li { padding:24px 22px 24px; }
  .step-num { right:14px;top:-2px;font-size:104px; }
  .steps-row h3 { margin-top:40px;font-size:22px; }
}

/* Phones: no flight, so no dusk to blend the page into the dark band. Instead the dive headline becomes the top of the
   dark chapter: full-bleed, rounded at the top, text already in its night colours (--dusk:1), and the band follows flush.
   The hero's bottom padding comes in to match. */
@media(max-width:700px) {
  .hero { padding-bottom:44px; }
  /* The chapter: headline block and band as one dark, rounded shape. overflow:clip rounds the pinned headline's corners
     without making the chapter a scroll container (which would break the pins). */
  .inside-chapter { background:#14070f;border-radius:28px;overflow:clip; }
  /* The headline pins at the top of the screen (app.js sets --dive-top below zero when headline plus card are taller
     than the screen, so the headline's first line slides off instead of the card's foot). Compact type so both fit. */
  .dive { --dusk:1;position:sticky;top:var(--dive-top,0px);width:100vw;margin-inline:calc(50% - 50vw);padding:18px 16px 14px;background:#14070f;border-radius:0; }
  .dive-line-1 { font-size:14px; }
  .dive-line-2 { margin-top:4px;font-size:30px; }
  .dive-caption { margin-top:8px;font-size:15px; }
  .inside-band { margin-top:0;padding-top:6px;border-radius:0; }
  /* One unit: the headline (sticky in the chapter) and the card (sticky in the band) must let go at the same moment,
     or the card rolls up under the headline. The band's bottom margin pulls the chapter's content box up by the card's
     height plus the gap, so the headline's release point meets the card's; the chapter's padding puts the space back so
     the next section still follows the band. app.js sets --release from the measured heights. */
  .inside-chapter { padding-bottom:var(--release,0px); }
  .inside-band { margin-bottom:calc(-1 * var(--release,0px)); }
  /* A soft edge under the pinned headline, so the card rolls under it instead of being cut off by a hard line. */
  .dive::after { content:'';position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(#14070f,#14070f00);pointer-events:none; }
}

/* Phones: a lighter top. Smaller brand in a shorter header, so the headline starts sooner and the two wordmarks
   (header and paragraph) stop reading as a repeat. */
@media(max-width:560px) {
  .site-header { height:68px; }
  .brand { width:104px;height:36px; }
  .brand img { width:116px;margin:-1px 0 0 -6px; }
  .hero { padding-top:10px; }
}

/* Header call to action: a compact "Go read-only" pill at the right of the top bar, on every screen size, so the store
   is always one tap away. Static Chrome glyph (the hero's spins in; this one keeps still). */
.site-header-right { display:flex;align-items:center;gap:34px; }
.nav-cta { display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 12px;border-radius:99px;background:var(--pink);color:#fff;font-size:14px;font-weight:650;line-height:1;text-decoration:none;white-space:nowrap;box-shadow:0 6px 18px #db277733;transition:background .2s,box-shadow .2s; }
.nav-cta:hover { background:#be185d;box-shadow:0 8px 22px #db277740; }
.nav-cta:focus-visible { outline:3px solid var(--pink);outline-offset:3px; }
.nav-cta-mark { width:18px;height:18px;fill:currentColor;flex:none; }
@media(max-width:800px) { .site-header-right { gap:18px; } }
@media(max-width:560px) { .nav-cta { padding:8px 13px 8px 10px;font-size:13px; } .nav-cta-mark { width:16px;height:16px; } }
/* Phones: the header pill is the call to action; the hero's big button would be a second one a few lines below it. */
@media(max-width:560px) { .hero-actions { display:none; } .hero-description { margin-bottom:6px; } }

/* Phones: the card still pins, so a flick cannot carry the reader past the request before it plays, but it pins
   centred on the screen with a shorter runway, and the band ends right after it, so the hold reads as a pause on the
   card rather than a stuck card over empty black. */
@media(max-width:700px) {
  .inside-band .layer-demo { position:sticky;top:var(--card-top,140px); }
  .pin-runway { height:70svh; }
  .inside-band { padding-bottom:28px; }
  /* A thin bar at the foot of the pinned card fills as the hold goes by (--hold from app.js), so the reader can see the
     page is still moving under their thumb while the card waits for the request to play. */
  .pin-progress { position:absolute;left:50%;bottom:9px;width:min(150px,40%);height:3px;border-radius:2px;transform:translateX(-50%);background:linear-gradient(90deg,#f472b6 calc(var(--hold,0) * 100%),#ffffff24 0);opacity:calc(min(1, var(--hold,0) * 6));pointer-events:none; }
}
@media(min-width:701px) { .pin-progress { display:none; } }

/* Pro in early access: the coming price, a slash drawn across it, then "Early access" stamped on top and glowing.
   app.js adds .is-on when the card comes into view; without it (no script, reduced motion) the final state shows. */
.plan-price-early { flex-direction:row;justify-content:center; }
.price-stack { position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:6px;padding-block:4px; }
.plan-price-early .price-was { position:relative;color:#ffffff73; }
.plan-featured .plan-price-early .price-was small { opacity:1; }
.price-slash { position:absolute;left:-6px;right:-6px;top:52%;height:4px;border-radius:4px;background:#fff;opacity:.85;transform:rotate(-12deg) scaleX(1);transform-origin:left center; }
.plan-featured .plan-price-early .price-now { white-space:nowrap;font:800 clamp(30px,2.9vw,36px)/1 var(--display);letter-spacing:-.03em;color:#fff; }
.plan-price .price-now .price-wave, .plan-price .price-now .price-wave > span { font-size:inherit;color:inherit; }
.price-wave { display:inline-flex; }
.price-wave > span { display:inline-block;text-shadow:0 0 10px #fff9,0 0 24px #ffd1e6b3; }
@media (prefers-reduced-motion: no-preference) {
  .plan-price-early.can-animate .price-slash { transform:rotate(-12deg) scaleX(0); }
  .plan-price-early.can-animate .price-now { opacity:0;transform:translateY(-10px) scale(1.15); }
  .plan-price-early.is-on .price-slash { animation:price-slash .55s .25s cubic-bezier(.65,0,.35,1) forwards; }
  .plan-price-early.is-on .price-now { animation:price-stamp .45s .85s cubic-bezier(.2,1.3,.4,1) forwards; }
  /* A wave of light runs through the letters, each rising and glowing in turn */
  .plan-price-early.is-on .price-wave > span { animation:price-wave 2.6s calc(1.4s + var(--i) * 90ms) ease-in-out infinite; }
}
@keyframes price-slash { from { transform:rotate(-12deg) scaleX(0); } to { transform:rotate(-12deg) scaleX(1); } }
@keyframes price-stamp { from { opacity:0;transform:translateY(-10px) scale(1.15); } to { opacity:1;transform:none; } }
@keyframes price-wave {
  0%, 60%, 100% { transform:translateY(0);text-shadow:0 0 10px #fff9,0 0 24px #ffd1e6b3; }
  30% { transform:translateY(-5px);text-shadow:0 0 14px #fff,0 0 34px #fff,0 0 60px #ffd1e6; }
}
/* The waitlist button's gift tile */
.button .plan-gift { white-space:nowrap;position:absolute;top:-12px;right:14px;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;background:#fff;color:#ba2569;font-size:12px;font-weight:700;box-shadow:0 4px 12px #6d0f3a33;border:1px solid #f6c9dc; }
.button .plan-gift .gift-icon { width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none; }
.plan .plan-button .plan-gift { display:flex;align-items:center;gap:5px; }
.plan-button:has(.plan-gift) { position:relative;overflow:visible; }