/* ===========================================================================
   Eden — The AI Office
   Design system merged from the Grok "Eden" brand site (palette, type, voice)
   and the Grok "Desk/Academy" product site (structure, modules, pricing).
   No build step. No external JS. Fonts degrade to system stacks offline.
   ======================================================================== */

:root {
  --paper: #efece4;
  --linen: #f6f3ec;
  --ink: #1b1d19;
  --ink-soft: #5a5d55;
  --stone: #5a5d55;
  --forest: #3a4638;
  --sage: #55624f;
  --cream: #f4f1ea;

  --line: rgba(27, 29, 25, 0.12);
  --line-strong: rgba(27, 29, 25, 0.22);

  --font-display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino,
    "Times New Roman", serif;
  --font-sans: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-soft: 0 18px 50px -28px rgba(27, 29, 25, 0.35);
  --wrap: 1120px;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  background: var(--paper);
  color: var(--ink);
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  background: var(--paper);
  color: var(--ink);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

p {
  text-wrap: pretty;
  margin: 0;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- layout primitives ------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) {
  .wrap {
    padding-inline: 32px;
  }
}

.section {
  padding-block: 64px;
}

@media (min-width: 768px) {
  .section {
    padding-block: 96px;
  }
}

.section--linen {
  background: var(--linen);
  border-block: 1px solid var(--line);
}

.section--edge {
  border-bottom: 1px solid var(--line);
}

.kicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0;
}

.kicker--cream {
  color: rgba(244, 241, 234, 0.7);
}

.lede {
  color: var(--ink-soft);
  line-height: 1.7;
}

.measure {
  max-width: 58ch;
}

.h-display {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.05;
}

.h-section {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1.1;
}

.h-card {
  font-size: 1.35rem;
  line-height: 1.25;
}

.stack > * + * {
  margin-top: 1rem;
}

.grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 900px) {
  .grid--2 {
    grid-template-columns: 1fr 1fr;
  }
  .grid--split {
    grid-template-columns: 5fr 7fr;
    gap: 48px;
  }
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.center {
  text-align: center;
}

/* --- buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--forest {
  background: var(--forest);
  color: var(--cream);
}

.btn--forest:hover {
  background: #2d3a2c;
}

.btn--cream {
  background: var(--cream);
  color: var(--ink);
}

.btn--cream:hover {
  background: #fff;
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn--ghost:hover {
  background: rgba(27, 29, 25, 0.05);
}

.btn--ghost-cream {
  border-color: rgba(244, 241, 234, 0.35);
  color: var(--cream);
}

.btn--ghost-cream:hover {
  background: rgba(244, 241, 234, 0.1);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.arrow {
  width: 1em;
  height: 1em;
  flex: none;
}

/* --- site header ------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(239, 236, 228, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header--over {
  position: absolute;
  inset-inline: 0;
  top: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
  color: var(--cream);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-xs);
  background: rgba(27, 29, 25, 0.08);
}

.site-header--over .brand-mark {
  background: rgba(244, 241, 234, 0.16);
}

.brand-mark svg {
  width: 15px;
  height: 15px;
  fill: var(--forest);
}

.site-header--over .brand-mark svg {
  fill: var(--cream);
}

.site-nav {
  display: none;
  align-items: center;
  gap: 28px;
  font-size: 15px;
}

@media (min-width: 900px) {
  .site-nav {
    display: flex;
  }
}

.site-nav a {
  text-decoration: none;
  color: var(--ink-soft);
}

.site-header--over .site-nav a {
  color: rgba(244, 241, 234, 0.8);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-header--over .site-nav a:hover,
.site-header--over .site-nav a[aria-current="page"] {
  color: var(--cream);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 899px) {
  .header-cta .btn {
    display: none;
  }
}

.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.site-header--over .nav-toggle {
  border-color: rgba(244, 241, 234, 0.35);
}

@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.mobile-nav.is-open {
  display: block;
}

.mobile-nav ul {
  padding-block: 12px;
}

.mobile-nav a {
  display: block;
  padding: 12px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

/* --- hero -------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  display: flex;
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(27, 29, 25, 0.78) 0%,
    rgba(27, 29, 25, 0.42) 45%,
    rgba(27, 29, 25, 0.5) 100%
  );
}

.hero__body {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  width: 100%;
  padding-block: 120px 72px;
}

.hero h1 {
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 0.95;
  max-width: 16ch;
  margin-top: 14px;
}

.hero h1 span {
  display: block;
  color: rgba(244, 241, 234, 0.78);
}

.hero__lede {
  margin-top: 22px;
  max-width: 46ch;
  color: rgba(244, 241, 234, 0.82);
  font-size: 1.06rem;
  line-height: 1.7;
}

/* page hero (interior pages) */

.page-hero {
  padding-block: 56px 40px;
  border-bottom: 1px solid var(--line);
  background: var(--linen);
}

.page-hero h1 {
  margin-top: 12px;
}

.page-hero .lede {
  margin-top: 18px;
}

/* --- cards ------------------------------------------------------------- */

.card {
  background: var(--linen);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px;
}

.card--paper {
  background: var(--paper);
}

.card--flush {
  padding: 0;
  overflow: hidden;
}

.card__body {
  padding: 24px;
}

@media (min-width: 768px) {
  .card__body {
    padding: 32px;
  }
}

.figure {
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

.figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.ratio-16-10 {
  aspect-ratio: 16 / 10;
}

.ratio-3-4 {
  aspect-ratio: 3 / 4;
}

.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover--top {
  object-position: top center;
}

/* tag pills */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  color: var(--forest);
  background: var(--paper);
}

/* --- agent cards ------------------------------------------------------- */

.agent {
  background: var(--linen);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}

.agent__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--stone);
}

.agent__role {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}

.agent__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.agent__head h3 {
  font-size: 2rem;
}

/* --- trait grid (hairline separated) ----------------------------------- */

.trait-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: 40px;
}

@media (min-width: 600px) {
  .trait-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .trait-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.trait {
  background: var(--linen);
  padding: 28px;
}

.trait h3 {
  font-size: 1.5rem;
}

.trait p {
  margin-top: 10px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* --- numbered steps ---------------------------------------------------- */

.steps {
  margin-top: 32px;
  display: grid;
  gap: 22px;
}

.step {
  display: flex;
  gap: 16px;
}

.step__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--forest);
}

.step__icon svg {
  width: 18px;
  height: 18px;
}

.step h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
}

.step p {
  margin-top: 4px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* --- module list (the office) ------------------------------------------ */

.module {
  border-top: 1px solid var(--line);
  padding-block: 32px;
  display: grid;
  gap: 20px;
}

@media (min-width: 900px) {
  .module {
    grid-template-columns: 4fr 8fr;
    gap: 48px;
  }
}

.module__num {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--sage);
  text-transform: uppercase;
}

.module h3 {
  font-size: 1.75rem;
  margin-top: 8px;
}

.module__replaces {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--stone);
  font-style: italic;
}

.module dt {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 18px;
}

.module dd {
  margin: 6px 0 0;
  color: var(--ink-soft);
  line-height: 1.7;
  font-size: 15.5px;
}

.module dl > dt:first-child {
  margin-top: 0;
}

/* --- pricing ----------------------------------------------------------- */

.price-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  background: var(--linen);
  display: flex;
  flex-direction: column;
}

.price-card--forest {
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
}

.price-card--forest .kicker,
.price-card--forest .price-note,
.price-card--forest .price-list li {
  color: rgba(244, 241, 234, 0.78);
}

.price-amount {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  margin-top: 18px;
}

.price-amount small {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-weight: 400;
}

.price-card--forest .price-amount small {
  color: rgba(244, 241, 234, 0.7);
}

.price-note {
  margin-top: 12px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.65;
}

.price-list {
  margin-top: 24px;
  display: grid;
  gap: 10px;
  font-size: 15px;
  color: var(--ink-soft);
}

.price-list li {
  padding-left: 22px;
  position: relative;
}

.price-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--sage);
}

.price-card--forest .price-list li::before {
  background: rgba(244, 241, 234, 0.6);
}

.price-card .btn {
  margin-top: 28px;
  align-self: flex-start;
}

/* --- call demo --------------------------------------------------------- */

.demo {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--linen);
  overflow: hidden;
}

.demo__head {
  padding: 28px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.demo__switch {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.demo__switch button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 9px 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.demo__switch button[aria-selected="true"] {
  background: var(--forest);
  color: var(--cream);
}

.demo__body {
  display: grid;
  gap: 0;
}

@media (min-width: 900px) {
  .demo__body {
    grid-template-columns: 5fr 7fr;
  }
}

.demo__portrait {
  position: relative;
  min-height: 300px;
  background: var(--stone);
}

.demo__script {
  padding: 28px;
  display: grid;
  gap: 14px;
  align-content: start;
}

@media (min-width: 768px) {
  .demo__script {
    padding: 36px;
  }
}

.line {
  display: grid;
  gap: 4px;
  opacity: 0;
  transform: translateY(6px);
  animation: line-in 420ms ease forwards;
}

.line__who {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}

.line__text {
  font-size: 16.5px;
  line-height: 1.6;
}

.line--caller .line__text {
  color: var(--ink-soft);
}

.line--agent .line__text {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.45;
}

@keyframes line-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.demo__outcome {
  margin-top: 8px;
  padding: 16px 18px;
  border-radius: var(--r-sm);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--forest);
}

/* --- dark CTA ---------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
}

.cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.cta__scrim {
  position: absolute;
  inset: 0;
  background: rgba(27, 29, 25, 0.55);
}

.cta__body {
  position: relative;
  z-index: 2;
  padding-block: 96px;
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.cta h2 {
  margin-top: 14px;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
}

.cta p {
  margin-top: 18px;
  color: rgba(244, 241, 234, 0.78);
  font-size: 15.5px;
  line-height: 1.7;
}

.cta .btn-row {
  margin-top: 30px;
  justify-content: center;
}

/* --- form -------------------------------------------------------------- */

.form {
  display: grid;
  gap: 18px;
}

.field {
  display: grid;
  gap: 7px;
}

.field label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  width: 100%;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.form-note {
  font-size: 13.5px;
  color: var(--stone);
  line-height: 1.6;
}

/* --- fine print -------------------------------------------------------- */

.fineprint {
  font-size: 13.5px;
  color: var(--stone);
  line-height: 1.7;
}

.rules {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.rules li {
  padding-left: 22px;
  position: relative;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.65;
}

.rules li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--sage);
}

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

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--linen);
  padding-block: 48px;
}

.footer-grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.footer-heading,
.footer-grid h4 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 500;
}

.footer-links {
  margin-top: 14px;
  display: grid;
  gap: 9px;
  font-size: 15px;
}

.footer-links a {
  text-decoration: none;
  color: var(--ink-soft);
}

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

.footer-base {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--stone);
}

/* --- a11y -------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--forest);
  color: var(--cream);
  padding: 12px 18px;
  z-index: 100;
  border-radius: 0 0 var(--r-sm) 0;
}

.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   REFINEMENT LAYER — appended 2026-08-18.
   Additive only: no existing token or rule is redefined, so nothing regresses.
   Aim is the register the owner asked for — Bentley, not bargain.
   ======================================================================== */

/* --- optical sizing -----------------------------------------------------
   Source Serif 4 is a variable font with an optical-size axis. Large display
   text wants a higher optical size. Fraunces (and its wonk axis) is retired. */
h1,
.h-display,
.hero h1,
.cta h2 {
  font-optical-sizing: auto;
  letter-spacing: -0.022em;
}

.h-section,
h2 {
  font-optical-sizing: auto;
  letter-spacing: -0.016em;
}

/* Tabular figures wherever a number is compared against another number —
   prices, stats, arithmetic. Proportional digits make columns look drunk. */
.price-amount,
.price-list,
[data-figure],
.stat,
table {
  font-variant-numeric: tabular-nums;
}

/* --- typographic detail ------------------------------------------------- */
.lede,
.measure,
p {
  hanging-punctuation: first last;
}

/* Stop a heading from ending in a single orphaned word. */
h1,
h2,
h3 {
  text-wrap: balance;
}

::selection {
  background: color-mix(in oklab, var(--sage) 30%, transparent);
  color: var(--ink);
}

/* --- focus, made deliberate rather than default ------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.site-header--over :where(a, button):focus-visible {
  outline-color: var(--cream);
}

/* --- quiet motion -------------------------------------------------------
   Sections lift in once, only for readers who have not asked for less
   motion, and only where JS marked them. Without JS they are simply visible,
   so nothing depends on script to be readable. */
@media (prefers-reduced-motion: no-preference) {
  /* FAIL-SAFE: content is hidden ONLY once JS has confirmed it is running and
     has armed the reveal by putting .reveal-ready on <html>. Without script,
     with script errors, or if the observer never fires (a background tab, a
     non-compositing viewport), nothing is ever hidden. An earlier version of
     this rule hid by default and left six sections permanently invisible. */
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }

  /* Media eases rather than snaps when it finally decodes. */
  .figure img,
  .agent__media video,
  .card--flush img {
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .figure:hover img {
    transform: scale(1.014);
  }
}

/* --- surface depth, kept restrained ------------------------------------- */
.price-card,
.agent,
.demo {
  box-shadow: var(--shadow-soft);
}

.card--flush {
  overflow: clip;
}

/* --- print: a page a buyer can actually take into a meeting -------------- */
@media print {
  .site-header,
  .mobile-nav,
  .nav-toggle,
  .cta,
  .demo__switch,
  .skip-link,
  video {
    display: none !important;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  .section {
    padding-block: 18pt;
    break-inside: avoid;
  }

  .price-card,
  .module,
  .trait {
    break-inside: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}

/* ===========================================================================
   SOFTWARE SPEND CALCULATOR — pricing.html only, appended for T82.
   ======================================================================== */

.software-calculator {
  background: var(--paper);
}

.software-calculator__layout {
  display: grid;
  gap: 28px;
  margin-top: 40px;
  align-items: start;
}

.software-calculator__form,
.software-calculator__form > div {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.software-calculator__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--linen);
  overflow: hidden;
}

.software-calculator__legend {
  width: 100%;
  padding: 20px 22px 14px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.2;
}

.software-calculator__product {
  display: grid;
  gap: 14px;
  padding: 18px 22px;
  border-top: 1px solid var(--line);
}

.software-calculator__choice {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.software-calculator__choice input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--forest);
}

.software-calculator__details,
.software-calculator__choice label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.software-calculator__details {
  gap: 6px;
}

.software-calculator__product-name {
  font-weight: 600;
  line-height: 1.35;
}

.software-calculator__product-note {
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.5;
}

.software-calculator__source {
  width: fit-content;
  color: var(--forest);
  font-size: 12.5px;
  text-underline-offset: 3px;
}

.software-calculator__amount {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
}

.software-calculator__currency {
  padding-left: 13px;
  color: var(--stone);
  font-variant-numeric: tabular-nums;
}

.software-calculator__cost {
  width: 100%;
  min-width: 0;
  padding: 11px 12px 11px 4px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.software-calculator__cost:focus {
  outline: 0;
}

.software-calculator__amount:focus-within {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}

.software-calculator__summary {
  min-width: 0;
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--forest);
  color: var(--cream);
  box-shadow: var(--shadow-soft);
}

.software-calculator__summary .kicker,
.software-calculator__summary .fineprint {
  color: rgba(244, 241, 234, 0.72);
}

.software-calculator__selected {
  margin-top: 14px;
  color: rgba(244, 241, 234, 0.76);
  font-size: 14px;
}

.software-calculator__totals {
  display: grid;
  gap: 0;
  margin-top: 22px;
}

.software-calculator__totals > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 16px;
  align-items: baseline;
  padding-block: 14px;
  border-top: 1px solid rgba(244, 241, 234, 0.18);
}

.software-calculator__totals dt {
  color: rgba(244, 241, 234, 0.74);
  font-size: 13px;
  line-height: 1.35;
}

.software-calculator__totals dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
}

.software-calculator__totals small {
  grid-column: 1 / -1;
  color: rgba(244, 241, 234, 0.58);
  font-size: 11.5px;
}

.software-calculator__totals .software-calculator__difference {
  border-top-color: rgba(244, 241, 234, 0.38);
}

.software-calculator__difference dd {
  font-size: 1.65rem;
}

.software-calculator__comparison {
  margin-top: 18px;
  color: rgba(244, 241, 234, 0.88);
  font-size: 14px;
  line-height: 1.6;
}

.software-calculator__fineprint {
  margin-top: 18px;
}

@media (min-width: 620px) {
  .software-calculator__product {
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: center;
  }
}

@media (min-width: 960px) {
  .software-calculator__layout {
    grid-template-columns: minmax(0, 7fr) minmax(310px, 5fr);
    gap: 36px;
  }

  .software-calculator__summary {
    position: sticky;
    top: 96px;
  }
}

@media (max-width: 420px) {
  .software-calculator__product,
  .software-calculator__legend,
  .software-calculator__summary {
    padding-inline: 18px;
  }

  .software-calculator__totals > div {
    grid-template-columns: 1fr;
  }

  .software-calculator__totals dd {
    text-align: left;
  }
}

/* ===========================================================================
   TOOL + 1280 LAYOUT FIXES — 2026-08-25
   Desk calculator, software comparator, academy grid hole, contact/pricing
   voids, header clearance, demo launcher orphan, portal squeeze.
   Higher specificity on purpose: several pages keep competing inline <style>.
   ======================================================================== */

/* --- homepage desk calculator ----------------------------------------- */

#desk .desk-panes summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
}

#desk .desk-panes summary::-webkit-details-marker,
#desk .desk-panes summary::marker {
  display: none;
  content: "";
}

#desk .desk-panes summary::after {
  content: "";
  flex: none;
  width: 0.62em;
  height: 0.62em;
  margin-top: -0.2em;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

#desk .desk-panes details[open] summary::after {
  margin-top: 0.22em;
  transform: rotate(-135deg);
}

#desk .desk-panes details:not([open]) summary {
  color: var(--sage);
}

#desk .desk-panes summary:hover {
  color: var(--forest);
}

#desk .desk-grid,
#desk .desk-grid--2,
#desk .desk-grid--4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  gap: 12px;
}

#desk .desk-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

#desk .desk-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
}

#desk .desk-grid label {
  min-width: 0;
  max-width: 100%;
}

#desk .desk-grid input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 840px) {
  #desk .desk {
    align-items: stretch;
  }

  #desk .desk > * {
    min-height: 100%;
  }

  #desk .desk-total {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-self: stretch;
  }
}

/* --- software comparator empty / include states ----------------------- */

.software-calculator__hint {
  display: none;
  margin: 0;
  color: var(--sage);
  font-size: 12.5px;
  line-height: 1.45;
}

.software-calculator__product.has-amount:not(.is-included) .software-calculator__hint {
  display: block;
}

.software-calculator__product:not(.is-included) .software-calculator__amount {
  opacity: 0.55;
}

.software-calculator__layout.is-empty .software-calculator__difference {
  display: none;
}

/* --- academy 8-stage grid: no phantom 9th cell ------------------------ */

.trait-grid {
  background: transparent;
  border: 0;
  gap: 12px;
}

.trait {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* --- contact "For the owner": do not leave an empty right half -------- */

.page-hero + .section--edge > .wrap > .card.card--paper {
  max-width: none !important;
  width: 100%;
}

@media (min-width: 840px) {
  .page-hero + .section--edge > .wrap:not(.grid):has(> .card + p) {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }

  .page-hero + .section--edge > .wrap:not(.grid):has(> .card + p) > p {
    margin-top: 0 !important;
  }
}

@media (min-width: 900px) {
  #price > .wrap.grid--2:first-of-type {
    grid-template-columns: 1fr;
  }

  .grid--2:has(> :only-child),
  .grid--3:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- sticky / overlay header must clear hero copy --------------------- */

.hero:has(> .site-header--over) > .hero__body {
  padding-top: 7.5rem !important;
}

body:has(> .site-header:not(.site-header--over)) .page-hero {
  padding-top: 48px;
}

/* --- demo launcher: last card stays one cell, not a full-row hole ----- */

@media (min-width: 700px) {
  .demo-body .launch-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  }

  .demo-body .launch-grid:has(> :only-child),
  .demo-body #premium .launch-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- portal: widen the 560-ish left column, CSS only ------------------ */

@media (min-width: 900px) {
  .portal-body .portal-main > .wrap {
    max-width: min(1280px, calc(100% - 0px));
  }

  .portal-body .grid--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }

  .portal-body .grid--2:has(> :only-child),
  .portal-body .grid--split:has(> :only-child) {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 560px) and (max-width: 899px) {
  .portal-body .grid--split,
  .portal-body .grid--2 {
    grid-template-columns: 1fr;
  }
}