/* Wrize site. Tokens from Brand/wrize-v1/GUIDE.md. Landing follows hero-3. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.ae5d613ff115.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  font-optical-sizing: auto;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-variable.8e9a9bf864ae.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #10141A;
  --surface: #1A2129;
  --elevated: #242C36;
  --ink: #E8EEF3;
  --ink-warm: #F6EFE8;
  --secondary: #9AA4AE;
  --tertiary: #7A848E;
  --wax: #C21D3A;
  --wax-text: #E87076;
  --wax-hover: #C6324C;
  --focus: #E8EEF3;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --measure: 68ch;
  --header-h: 4.5rem;
  --gutter: clamp(1.25rem, 6.5vw, 7.5rem);
  --radius: 0;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--paper);
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.011em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: "";
  position: fixed;
  inset: auto -10% 30% auto;
  width: min(52vw, 40rem);
  height: min(70vh, 36rem);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(194, 29, 58, 0.18), transparent 68%);
}

@media (prefers-reduced-transparency: reduce) {
  body::before { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--wax-text); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: #F08A8E; }
a:active { transform: none; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: 0.75rem;
  z-index: 20;
  padding: 0.5rem 0.75rem;
  background: var(--elevated);
  color: var(--ink);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Header: quiet, wordmark top left, lots of air like hero-3 */
.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.1rem, 3.2vw, 2.15rem) var(--gutter) 0;
  min-height: var(--header-h);
}
.wordmark {
  display: inline-flex;
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
  line-height: 0;
}
.wordmark img {
  width: clamp(7.5rem, 16.1vw, 14.5rem); /* photoreal min 80px; ~232px at 1440 */
  height: auto;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 1.35rem;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}
.site-nav a {
  color: var(--secondary);
  text-decoration: none;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] {
  color: var(--wax-text);
}

/* Footer */
.site-footer {
  position: relative;
  z-index: 1;
  padding: 3rem var(--gutter) 2.5rem;
  margin-top: auto;
  border-top: 1px solid rgba(232, 238, 243, 0.08);
}
.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.35rem;
  font-size: 0.9375rem;
}
.site-footer .footer-links a {
  color: var(--secondary);
  text-decoration: none;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
.site-footer .footer-links a:hover { color: var(--ink); }
.site-footer .entity,
.site-footer .copyright,
.site-footer .apple-credit {
  margin: 0.85rem 0 0;
  color: var(--tertiary);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0;
  max-width: 42rem;
}
.site-footer .entity { margin-top: 1.5rem; color: var(--secondary); }

/* ---------- Landing / hero (hero-3 language) ---------- */
.page-home { display: flex; flex-direction: column; }
.page-home::before {
  /* Glow sits behind the phone on the right, like the comp */
  inset: 8% -8% auto auto;
  width: min(70vw, 48rem);
  height: min(80vh, 44rem);
  background: radial-gradient(ellipse at 55% 50%, rgba(194, 29, 58, 0.28), transparent 70%);
}

.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  padding: clamp(1.75rem, 6vw, 4.5rem) var(--gutter) 3rem;
}
/* On stacked layouts, keep the whole phone in the first viewport. The wax
   seal is a separate element inside .hero-phone, so it scales with the
   phone and stays in the first screen as long as the cutout does. */
@media (max-width: 959px) {
  .hero {
    height: calc(100dvh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    box-sizing: border-box;
    padding-bottom: 1.25rem;
  }
}

.hero-copy { max-width: 22.5rem; }
@media (min-width: 480px) {
  .hero-copy { max-width: 34rem; }
}

.hero-headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 1.05rem + 5.15vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: var(--ink-warm);
  text-wrap: balance;
}

.hero-sub {
  margin: 1.25rem 0 0;
  max-width: 32ch;
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--secondary);
  font-weight: 400;
}

.app-store-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.85rem;
}
.app-store {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
  /* Apple minimum width 100px; comp is ~322px at 1440. Badge art is unmodified. */
}
.app-store img {
  width: clamp(10.5rem, 22vw, 20.15rem);
  height: auto;
}
.app-store:active img {
  transform: scale(0.97);
  transition: transform 120ms var(--ease-out);
}
.app-store[aria-disabled="true"] {
  pointer-events: none;
  cursor: default;
}
.app-store[aria-disabled="true"]:active img {
  transform: none;
}
.app-store-caption {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--secondary);
}

.hero-visual {
  position: relative;
  margin: 0;
  flex: 1 1 auto;
}
/* Phone + seal share one box so the seal can be placed in phone-relative
   percentages and will never drift off the bezel as the cutout scales. */
.hero-phone {
  position: relative;
  width: min(100%, 28rem);
  max-width: min(100%, 28rem);
  margin-inline: auto;
  aspect-ratio: 886 / 1183;
  line-height: 0;
}
.hero-phone-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* Official seal, sitting on the tilted phone glass. Coordinates are
   percentages of the 886 x 1183 locked cutout: left 350, top 716, size
   163 (18.397%). The matrix maps the seal onto the screen plane
   (horizontals at 2.2deg along the composer, verticals at -6.6deg along
   the inner bezel) so the mark reads as lying on the glass, not pasted
   upright on the page. Placement is the empty area right of the typing
   bubble and above the composer, with at least 8% of phone width (71px)
   from every inner glass edge. The transform is unitless and scales
   identically at every width. */
.hero-seal-pic {
  position: absolute;
  left: 39.503%;
  top: 60.524%;
  width: 18.397%;
  height: auto;
  margin: 0;
  pointer-events: none;
  line-height: 0;
  transform: matrix(0.999263, 0.038388, -0.114937, 0.993373, 0, 0);
  transform-origin: 50% 50%;
}
.hero-seal {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  pointer-events: none;
}
/* hero-3 has no Demo label under the phone; alt text on the cutout covers it */

@media (max-width: 959px) {
  .hero-copy { flex: 0 0 auto; }
  .hero-visual {
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .hero-phone {
    width: auto;
    height: auto;
    max-width: min(100%, 28rem);
    max-height: 100%;
    aspect-ratio: 886 / 1183;
    margin-inline: 0;
  }
  .hero-phone-img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
  }
}

@media (min-width: 960px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(20rem, 0.92fr) minmax(22rem, 1.15fr);
    align-items: center;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    min-height: calc(100dvh - var(--header-h));
    height: auto;
    max-height: none;
    padding-top: 0;
    padding-bottom: 0;
  }
  .hero-copy { max-width: 40rem; }
  .hero-sub { max-width: 36ch; }
  .hero-phone {
    width: auto;
    max-width: min(100%, 38rem);
    max-height: calc(100dvh - var(--header-h) - 3.75rem);
    aspect-ratio: 886 / 1183;
    margin-inline: auto;
  }
  .hero-phone-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* ---------- Legal / support reading layout ---------- */
.page-doc { position: relative; z-index: 1; }
.page-doc::before {
  inset: -10% auto auto 40%;
  width: min(60vw, 36rem);
  height: 28rem;
  background: radial-gradient(ellipse at 70% 0%, rgba(194, 29, 58, 0.16), transparent 70%);
}

.doc-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 2rem var(--gutter) 4.5rem;
}

.doc-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink-warm);
}
.doc-updated {
  margin: 0 0 1.75rem;
  color: var(--secondary);
  font-size: 0.9375rem;
}

.prose {
  max-width: var(--measure);
  min-width: 0;
}
.prose h2 {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 2.75rem 0 0.8rem;
  scroll-margin-top: 5rem;
}
.prose h3 {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 1.75rem 0 0.55rem;
}
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }
.prose p { margin: 0.85rem 0; }
.prose ul, .prose ol {
  margin: 0.7rem 0 1rem;
  padding-left: 1.2rem;
}
.prose li { margin: 0.4rem 0; }
.prose li::marker { color: var(--secondary); }
.prose strong { font-weight: 600; }

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 1.15rem 0 1.6rem;
}
.prose th, .prose td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 1rem 0.7rem 0;
  border-bottom: 1px solid rgba(232, 238, 243, 0.1);
}
.prose th {
  color: var(--secondary);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}
.prose tr:last-child td { border-bottom: 0; }

/* TOC: compact scroll on small screens, sticky column on desktop */
.toc {
  font-size: 0.875rem;
  line-height: 1.4;
}
.toc-heading {
  margin: 0 0 0.7rem;
  color: var(--tertiary);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 14rem;
  overflow: auto;
}
.toc a {
  color: var(--secondary);
  text-decoration: none;
  display: inline-block;
  padding: 0.28rem 0;
}
.toc a:hover { color: var(--ink); }

@media (min-width: 1100px) {
  .doc-wrap {
    grid-template-columns: 15.5rem minmax(0, 72ch);
    column-gap: 4.5rem;
    align-items: start;
    padding-top: 2.75rem;
  }
  .toc {
    position: sticky;
    top: 1.5rem;
    order: 0;
  }
  .toc ol { max-height: calc(100dvh - 6rem); }
  .article { order: 1; }
}

.faq + .faq { margin-top: 0; }
.support-mail { margin-top: 3rem; }

@media (prefers-reduced-motion: reduce) {
  .app-store:active img { transform: none; }
}

@media print {
  body::before, .page-home::before, .page-doc::before { display: none; }
  .site-header, .site-footer, .toc { position: static; }
  a { color: inherit; }
}

/* ---------- Sections S1 to S3 (pending Nathan approval)
   Used only by the removable #site-sections-pending-approval block
   in index.html. Safe to leave in place if that block is deleted. ---------- */

.site-sections {
  position: relative;
  z-index: 1;
}

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 1rem + 4.72vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--ink-warm);
  text-wrap: balance;
}

/* S1: two Demo chats, her last bubble is the focal point */
.s1 {
  position: relative;
  padding: clamp(3.75rem, 9vw, 8rem) 0 clamp(5rem, 11vw, 8.5rem);
  isolation: isolate;
}
.s1 .section-title {
  padding-inline: var(--gutter);
  max-width: 22ch;
  margin-bottom: clamp(2.25rem, 5vw, 3.75rem);
}
.s1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2rem;
  width: min(84vw, 58rem);
  height: 18rem;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 70%, rgba(218, 39, 95, 0.58), transparent 68%);
}

.s1-threads {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  margin-inline: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.s1-threads::-webkit-scrollbar { display: none; }
.s1-threads .demo-thread {
  flex: 0 0 min(22.5rem, 85vw);
  scroll-snap-align: start;
}

@media (min-width: 960px) {
  .s1-threads {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: start;
    gap: clamp(1.5rem, 2.8vw, 2.5rem);
    overflow: visible;
    scroll-snap-type: none;
    padding-inline: var(--gutter);
    max-width: none;
  }
  .s1-threads .demo-thread { flex: none; }
}

.demo-thread {
  position: relative;
  margin: 0;
  padding: 1.55rem 1.45rem 1.85rem;
  border-radius: 1.85rem;
  background: #10101A;
  border: 1px solid rgba(232, 112, 118, 0.38);
  box-shadow:
    0 0 0 1px rgba(194, 29, 58, 0.1),
    0 18px 50px rgba(8, 4, 12, 0.45),
    0 0 56px rgba(218, 39, 95, 0.32);
}
.demo-pill {
  display: inline-flex;
  align-items: center;
  margin: 0 0 1.1rem;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  background: #7E3E50;
  color: #F3D6DC;
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.bubbles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.bubble {
  margin: 0;
  max-width: min(92%, 28ch);
}
.bubble p {
  margin: 0;
  padding: 0.85rem 1.05rem;
  border-radius: 1.2rem;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: -0.015em;
  font-weight: 450;
}
.bubble.them p {
  background: #22222C;
  color: var(--ink);
}
.bubble.me {
  align-self: flex-end;
  margin-left: 3.25rem;
  max-width: min(28ch, calc(100% - 3.25rem));
}
.bubble.me p {
  background: #9C4560;
  color: #F8EEF1;
}
.bubble.focal {
  display: flex;
  align-items: flex-end;
  gap: 0.65rem;
  max-width: min(100%, calc(28ch + 3.4rem));
  margin-top: 0.2rem;
}
.bubble.focal img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 2.75rem;
  box-shadow: 0 0 0 2px #10101A;
}
.bubble.focal p {
  background: #C81E46;
  color: #FFF4F6;
  font-weight: 500;
  box-shadow: 0 0 34px rgba(218, 39, 95, 0.65);
  border-radius: 1.25rem 1.25rem 1.25rem 0.55rem;
}

/* S2: copy left, one result card right. Not a phone. */
.s2 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
  padding: clamp(3.5rem, 8.5vw, 7rem) var(--gutter) clamp(6rem, 13vw, 11rem);
  isolation: isolate;
  overflow-x: clip;
}
.s2::after {
  content: "";
  position: absolute;
  right: 2%;
  bottom: 8%;
  width: min(90vw, 54rem);
  height: 28rem;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at 55% 55%, rgba(218, 39, 95, 0.58), transparent 68%);
}
.s2-copy { max-width: 22rem; }
.s2-copy .section-title {
  font-size: clamp(2.5rem, 1.05rem + 5vw, 6.15rem);
  max-width: none;
}
.s2-copy p {
  margin: 1.15rem 0 0;
  max-width: 34ch;
  color: var(--secondary);
  font-size: clamp(1.125rem, 0.95rem + 0.55vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
}
.s2-copy p + p { margin-top: 0.85rem; }

.result-card {
  position: relative;
  margin: 0 auto;
  width: min(100%, 28rem);
  padding: 1.6rem 1.45rem 1.45rem;
  border-radius: 2rem;
  background: #14111C;
  border: 1px solid rgba(232, 112, 118, 0.38);
  box-shadow:
    0 0 0 1px rgba(194, 29, 58, 0.12),
    0 28px 70px rgba(8, 4, 12, 0.55),
    0 0 70px rgba(218, 39, 95, 0.4);
  transform: rotate(4deg);
  transform-origin: 70% 80%;
}
@media (prefers-reduced-motion: reduce) {
  .result-card { transform: none; }
}
.result-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.result-head img {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  object-fit: cover;
}
.result-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.03em;
  color: var(--ink-warm);
}
.result-line {
  margin: 0;
  padding: 1.1rem 1.25rem;
  border-radius: 1.25rem;
  background: #C81E46;
  color: #FFF4F6;
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-weight: 500;
  box-shadow: 0 0 34px rgba(218, 39, 95, 0.5);
}
.result-demo {
  margin: 0.7rem 0 0;
  text-align: right;
  color: var(--tertiary);
  font-size: 0.8125rem;
  font-weight: 500;
}
.tones {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.05rem 0 0;
  padding: 0;
}
.tone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.35rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(232, 238, 243, 0.16);
  background: #3A3943;
  color: var(--secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
}
.tone.is-on {
  background: #CE3C5C;
  border-color: transparent;
  color: #FFF4F6;
  box-shadow: 0 0 18px rgba(218, 39, 95, 0.5);
}
.steer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.95rem;
  min-height: 2.85rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  background: #21202B;
  border: 1px solid rgba(232, 238, 243, 0.08);
}
.steer-placeholder {
  color: #9AA4AE;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}
.steer-action {
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

@media (min-width: 960px) {
  .s2 {
    display: grid;
    grid-template-columns: minmax(26rem, 1.2fr) minmax(22rem, 1fr);
    align-items: center;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
  }
  .s2-copy { max-width: 42rem; }
  .s2-copy .section-title { max-width: none; }
  .result-card {
    margin-inline: auto 0;
    transform: rotate(6.5deg);
    width: min(100%, 36rem);
  }
}

/* S3: large type, dark space, then the existing footer */
.s3 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(82dvh, 44rem);
  padding: clamp(6rem, 16vw, 12rem) var(--gutter) clamp(13rem, 22vw, 20rem);
  isolation: isolate;
  text-align: center;
  overflow-x: clip;
}
.s3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1rem;
  width: min(100%, 80rem);
  height: 36rem;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 92%, rgba(218, 39, 95, 0.78), transparent 66%);
}
.s3 h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 1.15rem + 9.4vw, 9.1rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--ink-warm);
}

.page-home:has(#site-sections-pending-approval) .site-footer {
  border-top-color: transparent;
  background: transparent;
  margin-top: -12.5rem;
  padding-top: 0;
  padding-bottom: 3.25rem;
  text-align: center;
  position: relative;
  z-index: 2;
}
.page-home:has(#site-sections-pending-approval) .site-footer .footer-links {
  justify-content: center;
}
.page-home:has(#site-sections-pending-approval) .site-footer .entity,
.page-home:has(#site-sections-pending-approval) .site-footer .copyright,
.page-home:has(#site-sections-pending-approval) .site-footer .apple-credit {
  margin-inline: auto;
}

@media (prefers-reduced-transparency: reduce) {
  .s1::after, .s2::after, .s3::after { opacity: 0.4; }
  .demo-thread, .result-card, .bubble.focal p, .result-line, .tone.is-on {
    box-shadow: 0 12px 28px rgba(8, 4, 12, 0.4);
  }
}

@media print {
  .s1::after, .s2::after, .s3::after { display: none; }
  .result-card { transform: none; }
}