/* =============================================================================
   deals.contact — marketing site
   -----------------------------------------------------------------------------
   The design system's editorial direction, expressed as a scrolling page.

   The reference kit renders the homepage as a pannable "desk" — a lovely idea
   for a showcase, but a real marketing page has to be linkable, crawlable,
   keyboard-navigable and readable on a phone, none of which a drag-to-explore
   canvas does well. So the desk's *texture* is what carries over: mono
   marginalia in the gutters, oversized ghost numerals numbering sections,
   real transcripts set as typography, dotted rules instead of banded
   backgrounds, the coral dot as a section marker, and slight rotations on
   pinned artefacts.

   Per the system: continuous paper, no gradients, no photography, ink panels
   only for the final CTA and footer.
   ============================================================================= */

.site { overflow-x: hidden; }

.wrap-page { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--space-5); }
.wrap-text { max-width: 680px; }

/* ----------------------------------------------------------------- nav ---- */

.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: oklch(99% 0.004 80 / 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: 66px; }
.site-nav__links { display: flex; align-items: center; gap: var(--space-6); }
.site-nav__links a {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--ink-1);
}
.site-nav__links a:hover { color: var(--coral-700); text-decoration: none; }
.site-nav__cta { display: flex; align-items: center; gap: var(--space-4); }
@media (max-width: 820px) { .site-nav__links { display: none; } }

/* -------------------------------------------------------------- section ---- */

.sec { padding: var(--space-9) 0; border-top: var(--border-dotted); position: relative; }
.sec:first-of-type { border-top: 0; }

/* Mono marginalia — sits in the left gutter on wide screens, inline otherwise. */
.marginalia {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: oklch(48% 0.025 60 / 0.7);
  margin-bottom: var(--space-4);
}
@media (min-width: 1240px) {
  .sec > .wrap-page { position: relative; }
  .marginalia--gutter { position: absolute; left: -150px; top: 4px; width: 130px; text-align: right; margin: 0; }
}

.sec__title { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.sec__lead { font-size: var(--text-md); color: var(--text-muted); margin-top: var(--space-4); max-width: 60ch; }

.dot { color: var(--coral-500); }

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

.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }

.plan { display: flex; flex-direction: column; }
.plan--pick { border-color: var(--coral-300); box-shadow: var(--shadow-m); }
.plan__name { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-faint); display: flex; align-items: center; gap: 6px; }
.plan__pick-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral-500); }
.plan__price { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: -0.03em; margin: 6px 0 2px; }
.plan__per { font-size: var(--text-sm); color: var(--text-faint); font-family: var(--font-body); font-weight: var(--weight-regular); }
.plan__list { list-style: none; margin: var(--space-4) 0 var(--space-5); padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: var(--text-sm); }
.plan__list li { display: flex; gap: 9px; align-items: flex-start; }
.plan__list li::before { content: "•"; color: var(--coral-500); font-weight: 700; line-height: 1.4; }
.plan__list li.is-off { color: var(--text-faint); }
.plan__list li.is-off::before { content: "—"; color: var(--text-faint); }
.plan__cta { margin-top: auto; }

/* ----------------------------------------------------------------- faq ---- */

.faq details {
  border-bottom: var(--border-dotted);
  padding: var(--space-4) 0;
}
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--text-md);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-display);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--coral-500); font-size: 20px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-muted); max-width: 68ch; }

/* -------------------------------------------------------- ink panel/CTA ---- */

.ink {
  background: var(--brand);
  color: var(--text-on-brand);
}
.ink h2, .ink h3 { color: var(--text-on-brand); }
.ink .mono, .ink .faint { color: oklch(78% 0.015 70); }
.ink a { color: var(--coral-300); }

.cta-final { padding: var(--space-9) 0; text-align: center; }
.cta-final h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.cta-final p { color: oklch(80% 0.015 70); margin: var(--space-4) auto 0; max-width: 46ch; }
.cta-final .btn--primary { background: var(--coral-500); color: var(--ink-1); }
.cta-final .btn--primary:hover { background: var(--coral-300); }

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

.site-foot { padding: var(--space-7) 0 var(--space-6); border-top: 1px solid oklch(38% 0.02 60); }
.site-foot__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.site-foot__links { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.site-foot__links a { color: oklch(84% 0.012 75); font-size: var(--text-sm); }

/* --------------------------------------------------------- comparison ----- */

.compare { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.compare th, .compare td { padding: 11px 14px; text-align: left; border-top: var(--border-dotted); }
.compare thead th {
  border-top: 0; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-faint); font-weight: var(--weight-regular);
}
.compare tbody th { font-weight: var(--weight-medium); color: var(--text-muted); }
.compare td { text-align: center; }
.compare .yes { color: var(--coral-500); font-size: 17px; }
.compare .no  { color: var(--text-faint); }
.compare .col-us { background: var(--brand-soft); }
.compare__scroll { overflow-x: auto; }

/* ---------------------------------------------------------------- auth ---- */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth__aside {
  background: var(--brand);
  color: var(--text-on-brand);
  padding: var(--space-8) var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.auth__aside h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-on-brand); }
.auth__aside .quote { color: oklch(88% 0.012 75); }

.auth__main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--space-5);
}
.auth__card { width: 100%; max-width: 396px; }
.auth__card h1 { font-size: var(--text-xl); font-weight: var(--weight-bold); }
.auth__sub { font-size: var(--text-sm); color: var(--text-muted); margin: 6px 0 var(--space-5); }
.auth__foot { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-5); text-align: center; }

/* Transcript shown on the auth aside — reuses the slip motif on ink. */
.auth__slip { border-left: 2px solid var(--coral-500); padding-left: var(--space-4); }
.auth__slip .who {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--coral-300); margin-bottom: 3px;
}
.auth__slip .line { font-size: var(--text-sm); line-height: 1.55; color: oklch(90% 0.01 75); }
.auth__slip .line + .who { margin-top: var(--space-4); }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
}

/* =============================================================================
   THE DESK  (site-layout-v3)
   -----------------------------------------------------------------------------
   A fixed illustrated desk. One wheel notch, arrow key or swipe advances one
   scene; there are four (pitch, how it works, proof, pricing).

   Two continuity anchors hold the scene together while everything else moves:
     · the laptop screen always runs the live-call UI, in the same place
     · the wall copy crossfades in the same spot

   Desk papers slide on and off per scene and clamp into the visible band, so
   nothing lands in the part of the illustration the viewport crops away.

   GEOMETRY
   The illustration is 1536x1024 and COVER-scaled, so it always fills the
   window and gets cropped rather than letterboxed. Overlays are positioned in
   illustration pixels inside the same scaled box, which keeps the laptop
   screen registered to the drawn laptop at every size.
   ============================================================================= */

.desk-page { height: 100%; overflow: hidden; }
.desk-page body { height: 100%; overflow: hidden; background: oklch(93% 0.018 80); }

.stage {
  position: fixed; inset: 0; overflow: hidden;
  background: oklch(93% 0.018 80);
}

/* The scaled illustration box. Everything on the desk is positioned inside
   this in 1536x1024 coordinates. */
.stage__scene {
  position: absolute;
  left: 50%;
  width: 1536px; height: 1024px;
  transform-origin: top center;
  transform: translateX(-50%) scale(var(--desk-scale, 1));
  top: var(--desk-top, 0px);
  user-select: none;
}
.stage__img {
  position: absolute; inset: 0;
  width: 1536px; height: 1024px;
  display: block;
  -webkit-user-drag: none;
}

/* ------------------------------------------------------- laptop screen ---- */
/* Registered to the screen drawn in the illustration. */

.laptop {
  position: absolute;
  left: 582px; top: 447px; width: 306px; height: 205px;
  background: oklch(22% 0.015 60);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.laptop__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 9px; }
.laptop__id { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: oklch(65% 0.015 70); }
/* On its own line rather than wrapping. The header is only about 300px wide,
   so the name and the number together break mid-number, which reads as a
   glitch: "(415) 555-" above "0134". */
.laptop__num { display: block; margin-top: 2px; color: oklch(78% 0.02 70); white-space: nowrap; }
.laptop__live { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--tracking-caps); color: var(--coral-300); white-space: nowrap; }
.laptop__live i { width: 5px; height: 5px; border-radius: 50%; background: var(--coral-500); animation: dc-pulse 1.4s ease-in-out infinite; }
/* Bottom-anchored, so a new line pushes the older ones up and off the top
   the way a live transcript scrolls. The mask fades them out on the way
   instead of guillotining them at the edge. */
.laptop__lines {
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 8px; flex: 1; min-height: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 20px);
}
.laptop__turn { flex: none; }
.laptop__turn.is-new { opacity: 0; transform: translateY(7px); }
.laptop__turn.is-in {
  opacity: 1; transform: translateY(0);
  transition: opacity 620ms ease, transform 620ms var(--ease-out);
}
.laptop__who {
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: oklch(60% 0.015 70); margin-bottom: 2px;
}
.laptop__who.is-agent { color: var(--coral-300); }
.laptop__text { font-size: 11px; line-height: 1.45; color: oklch(92% 0.008 80); }
.laptop__foot {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center;
  border-top: 1px dotted oklch(40% 0.015 60); padding-top: 7px;
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: oklch(60% 0.015 70);
}
.laptop__ok {
  color: oklch(70% 0.1 150); letter-spacing: var(--tracking-caps);
  opacity: 0; transition: opacity 700ms ease;
}
.laptop__ok.is-on { opacity: 1; }
#callStatus { transition: opacity 400ms ease; }

/* ---------------------------------------------------------- wall copy ---- */
/* Same anchor every scene; the text crossfades. */

.wall { position: absolute; left: 505px; top: var(--wall-top, 210px); width: 440px; }
.wall__panel {
  position: absolute; left: 0; top: 0; width: 100%;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 500ms ease, transform 650ms var(--ease-out);
}
.wall__panel.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.wall__panel h1, .wall__panel h2 {
  font-family: var(--font-display); font-size: 32px;
  font-weight: var(--weight-bold); letter-spacing: var(--tracking-display);
  line-height: 1.06; margin: 0; color: var(--ink-1);
}
.wall__panel--lead h1 { font-size: 38px; }
.wall__panel p {
  font-size: var(--text-sm); line-height: 1.5;
  color: oklch(40% 0.02 60); margin: 10px 0 0; max-width: 400px;
}
.wall__cta { display: flex; gap: 14px; align-items: center; margin-top: 14px; flex-wrap: wrap; }

/* ------------------------------------------------------- desk objects ---- */

.obj {
  position: absolute;
  /* Tilted back from the bottom edge, the way the laptop leans. The
     perspective() call has to come after the 2D placement so the lean is
     applied to the object rather than to the whole stage. */
  transform-origin: 50% 100%;
  transform:
    translate(var(--dx, 0px), var(--dy, 0px))
    rotate(var(--r, 0deg))
    perspective(1400px)
    rotateX(var(--tilt, 0deg));
  opacity: 0;
  pointer-events: none;
  transition: transform 750ms var(--ease-out), opacity 550ms ease;
}
.obj.is-on { opacity: 1; pointer-events: auto; }

/* Paper resting on a desk, lit from the upper left like the illustration.
   Built entirely from box-shadow rather than pseudo-elements: box-shadow
   paints outside the border box, so it survives the overflow:hidden that
   .stats-pad needs for its rounded glue strip.

     1  inset top highlight - the lit top edge of the sheet
     2  inset bottom band   - the visible thickness of the paper
     3  tight contact       - the hard line where it meets the wood
     4  pooled contact      - the soft dark pool under the leaning base
     5  cast shadow         - thrown down and to the right, away from the light
*/
.paper {
  background: var(--surface-card);
  border: 1px solid oklch(80% 0.02 72);
  box-shadow:
    0 1px 0 oklch(100% 0 0 / 0.7) inset,
    0 -3px 0 oklch(88% 0.014 74) inset,
    0 3px 3px -2px oklch(28% 0.03 50 / 0.38),
    0 18px 16px -12px oklch(24% 0.03 50 / 0.45),
    10px 28px 42px -14px oklch(22% 0.03 50 / 0.38);
}

/* Propped objects lean back from their bottom edge, the way the laptop does.
   perspective() has to come after the 2D placement so the lean applies to the
   object itself and not to the whole stage. */
.obj--propped { --tilt: 11deg; }

/* A sticky note lies nearly flat on the wood rather than standing up. */
.obj--flat { --tilt: 3deg; }

.card-biz { border-radius: 8px; padding: 20px 22px 16px; }

/* The ruled lines ran on a fixed 25px rhythm that no text on the card
   shared, so every rule struck through the line beneath it, and the cards
   scale with the illustration, which meant the stripes shimmered as well.
   A top-lit wash gives the paper its surface with no geometry to fall out of
   register, and a single rule under the header does the dividing work the
   ruling was pretending to do. */
.index-card {
  border-radius: 6px; padding: 18px 22px 16px;
  background-image: linear-gradient(176deg,
    oklch(99.4% 0.003 85) 0%,
    oklch(97.6% 0.007 80) 58%,
    oklch(96.0% 0.011 78) 100%);
}
.index-card__head {
  display: flex; gap: 12px; align-items: baseline;
  padding-bottom: 9px;
  border-bottom: 1px solid oklch(90.5% 0.012 76);
}
.index-card__n { font-size: 40px; }
.index-card__title { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-medium); letter-spacing: var(--tracking-display); margin: 0; }
.index-card__quote { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--coral-300); }
.index-card__who { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--coral-700); margin-bottom: 3px; }
.index-card__line { font-size: 13px; line-height: 1.5; }
.index-card__note { margin-top: 8px; font-size: 10px; }

.stats-pad { border-radius: 6px 6px 10px 10px; padding: 0 0 14px; overflow: hidden; }
.stats-pad__glue { height: 22px; background: oklch(90% 0.02 75); border-bottom: 1px solid oklch(82% 0.02 72); }
.stats-pad__body { padding: 12px 24px 0; }
.stat-line { padding: 10px 0; border-bottom: var(--border-dotted); }
.stat-line:last-child { border-bottom: 0; }
.stat-line__v { font-family: var(--font-display); font-size: 36px; font-weight: var(--weight-bold); letter-spacing: -0.035em; line-height: 1; }
.stat-line__c { margin-top: 4px; font-size: 10px; }

.quote-note { border-radius: 6px; padding: 22px 26px 18px; }
.quote-note p {
  font-family: var(--font-display); font-size: var(--text-md);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-display);
  line-height: 1.45; margin: 0;
}

.sheet { border-radius: 6px; padding: 22px 24px 20px; }

.price-table { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; margin-top: 12px; }
.price-table > div { padding: 7px 10px; font-size: 12px; font-weight: var(--weight-medium); }
.price-table .col { border-left: var(--border-dotted); }
.price-table .cell { border-top: var(--border-dotted); }
.price-table .cell--label { color: var(--text-muted); }
.price-table .cell--sep { border-left: var(--border-dotted); }
.price-table .yes { color: var(--coral-500); font-size: 14px; }
.price-table .no { color: var(--text-faint); }
.price-name { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-faint); display: flex; align-items: center; gap: 5px; }
.price-pick { width: 6px; height: 6px; border-radius: 50%; background: var(--coral-500); }
.price-amt { font-family: var(--font-display); font-size: 20px; font-weight: var(--weight-bold); letter-spacing: -0.03em; margin-top: 3px; }
.price-per { font-size: 11px; color: var(--text-faint); font-family: var(--font-body); font-weight: var(--weight-regular); }

.sticky-note {
  background: var(--coral-100);
  box-shadow:
    0 -3px 0 oklch(84% 0.09 60 / 0.5) inset,
    0 2px 2px -1px oklch(28% 0.03 50 / 0.34),
    0 12px 12px -9px oklch(24% 0.03 50 / 0.4),
    7px 18px 28px -12px oklch(22% 0.03 50 / 0.34);
  padding: 14px 14px 18px;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.55;
  color: var(--coral-700);
}

/* ------------------------------------------------------------- chrome ---- */

.chrome {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: 16px 22px;
  pointer-events: none; z-index: 5;
}
.chrome > * { pointer-events: auto; }

.pill {
  background: var(--surface-card);
  border: 1px solid oklch(80% 0.02 72);
  box-shadow: 0 3px 14px oklch(30% 0.02 60 / 0.18);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
}
.pill--sq { border-radius: 8px; padding: 10px 16px; }

.scene-nav { display: flex; gap: 18px; }
.scene-nav button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--ink-1); font-weight: var(--weight-regular);
  transition: color var(--dur-fast) var(--ease-out);
}
.scene-nav button[aria-current="true"] { color: var(--coral-700); font-weight: var(--weight-bold); }

.scene-status {
  position: absolute; left: 22px; bottom: 22px; z-index: 5;
  display: flex; align-items: center; gap: 14px;
}
.scene-dots { display: flex; gap: 6px; }
.scene-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: oklch(70% 0.03 65);
  transition: background 300ms var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.scene-dots button[aria-current="true"] { background: var(--coral-500); transform: scale(1.25); }

.scroll-cue {
  position: absolute; right: 22px; bottom: 22px; z-index: 5;
  transition: opacity var(--dur-med) var(--ease-out);
}
.scroll-cue.is-gone { opacity: 0; pointer-events: none; }

/* --------------------------------------------- fallback: no JS / phone ---- */
/* The desk needs a wide window and a pointer to work. Without JS, or on a
   narrow screen, the same content renders as an ordinary scrolling document —
   which is also what crawlers and screen readers read. */

.no-js .stage,
.desk-off .stage { position: static; overflow: visible; background: var(--surface-page); }
.no-js.desk-page, .no-js .desk-page body,
.desk-off.desk-page, .desk-off .desk-page body { height: auto; overflow: auto; }

.no-js .stage__scene, .desk-off .stage__scene {
  position: static; left: auto; top: auto;
  width: auto; height: auto; transform: none;
}
.no-js .stage__img, .desk-off .stage__img {
  position: static; width: 100%; height: auto; max-width: 720px;
  margin: 0 auto var(--space-6); border-radius: var(--radius-l);
}
.no-js .laptop, .desk-off .laptop {
  position: static; width: auto; max-width: 480px; height: auto;
  margin: 0 auto var(--space-6);
}
.no-js .wall, .desk-off .wall {
  position: static; width: auto; max-width: 620px; margin: 0 auto;
}
.no-js .wall__panel, .desk-off .wall__panel {
  position: static; opacity: 1; transform: none; pointer-events: auto;
  padding: var(--space-6) var(--space-5); border-top: var(--border-dotted);
  transition: none;
}
.no-js .obj, .desk-off .obj {
  position: static; opacity: 1; pointer-events: auto;
  transform: none !important; width: auto !important;
  max-width: 560px; margin: 0 auto var(--space-5); transition: none;
}
.no-js .chrome, .desk-off .chrome { position: static; padding: 16px; }
.no-js .scene-status, .no-js .scroll-cue,
.desk-off .scene-status, .desk-off .scroll-cue { display: none; }
.no-js .scene-nav, .desk-off .scene-nav { display: none; }

/* On the flat layout the objects need a container to sit in. */
.desk-off .desk-flow, .no-js .desk-flow {
  max-width: 640px; margin: 0 auto; padding: 0 var(--space-5) var(--space-8);
}

/* ---------------------------------------------------------- ambient ---- */
/* Two things in the room move. Both sit inside .stage__scene, so they are
   positioned in illustration pixels and scale with the artwork.

   Everything here is decoration: aria-hidden, pointer-events none, and gone
   entirely under prefers-reduced-motion, where a slowly pulsing light is
   exactly the sort of thing people turn that setting on to stop. */

/* The mouth of the shade brightening and fading, like a filament settling.
   Sized to the drawn ellipse and clipped to it by border-radius, with no
   blur, because `screen` lifts dark pixels hardest and even a few pixels of
   spill onto the dome above turns it to fog.

   There is no wider pool of light on the wall, though there was at first: the
   wall is already near-white, so screening warm light over it measured as no
   change at all. A lamp lighting an already-bright wall does very little, and
   the honest cue is the mouth. */
/* The mouth of the shade warming and fading, like a filament settling.
   Sized to the drawn ellipse and clipped to it by border-radius, with no
   blur, because a blend over the dark dome above turns it to fog.

   Two layers, because one cannot do it. The mouth is already a warm
   near-white, about (253, 237, 206), so red is effectively saturated:

     - `screen` can only ADD light, and it adds most to whatever channel has
       the most room. That is blue. So a pale glow screened over this makes
       the mouth COOLER, not warmer. Measured, a white-hot centre took the
       warmth from 47 down to 45, going slightly blue exactly where it was
       supposed to look hot.
     - `multiply` can pull green and blue down, which is what actually makes
       something read as amber, but on its own it only darkens.

   So the tint supplies the colour and the bloom supplies the light, and the
   two animate together. */
.lamp-glow {
  position: absolute;
  /* Matched to the drawn ellipse, which was measured by flood-filling the lit
     interior and taking its principal axes: centre (300, 320), 166 x 41, and
     tilted -16.4 degrees because the lamp head is angled down and to the
     right. A horizontal ellipse over one that is neither horizontal nor that
     shallow reads as a sticker rather than as light. */
  left: 215px; top: 297px; width: 170px; height: 46px;
  pointer-events: none;
  border-radius: 50%;
  transform: rotate(-16.4deg);
  will-change: opacity, transform;
  animation: lamp-breathe 5s ease-in-out infinite;
}

/* The colour. Amber in the middle, thinning outwards. */
.lamp-glow--tint {
  background: radial-gradient(closest-side,
    rgb(255, 176,  72)  0%,
    rgb(255, 196, 116)  38%,
    rgb(255, 222, 174)  70%,
    rgb(255, 255, 255)  100%);
  mix-blend-mode: multiply;
}

/* The light. Kept pale and weaker than the tint, so it lifts the pool
   without washing the colour back out of it. */
.lamp-glow--bloom {
  background: radial-gradient(closest-side,
    rgba(255, 214, 150, 0.85) 0%,
    rgba(255, 226, 176, 0.5)  45%,
    rgba(255, 238, 208, 0.2)  75%,
    transparent 100%);
  mix-blend-mode: screen;
}

@keyframes lamp-breathe {
  /* The rotation is repeated on every frame: a transform in a keyframe
     replaces the element's own, so leaving it out here would spin the glow
     flat the moment the animation started. */
  0%, 100% { opacity: 0.12; transform: rotate(-16.4deg) scale(0.94); }
  50%      { opacity: 1;    transform: rotate(-16.4deg) scale(1.03); }
}

/* The plant. Pivots where the stem meets the pot, measured at 71.6% 95.8% of
   the cutout; rotating about the centre would slide the whole plant sideways
   out of its pot.

   The bend is skewX, not rotate. Skewing about the base displaces each point
   in proportion to its height, so the tips travel and the stem barely does,
   which is how a plant actually moves. A rotation moves the whole thing
   rigidly, like a signpost.

   Every value is negative, which is not an accident. With the origin at the
   bottom, points above it have negative local y, so a negative skew angle is
   what carries the top to the right. The illustration ends at
   x=1536 and the plant is cut off by that edge, so its rightmost leaves have
   a dead straight vertical edge. Leaning left drags that cut into view and
   gives the whole trick away. Leaning right pushes it further off screen,
   where it cannot be seen. So the plant only ever waves right and settles
   back.

   The timing does the rest: of fourteen seconds, six or so are perfectly
   still, so it reads as a draught passing rather than a loop, and the sway
   damps out instead of stopping dead. */
.plant {
  position: absolute;
  left: 1300px; top: 150px;
  width: 236px; height: 550px;
  pointer-events: none;
  transform-origin: 71.6% 95.8%;
  will-change: transform;
  animation: plant-rustle 14s ease-in-out infinite;
}

@keyframes plant-rustle {
  0%, 46%   { transform: skewX(0deg); }
  52%       { transform: skewX(-3.2deg); }
  58%       { transform: skewX(-1.1deg); }
  64%       { transform: skewX(-2.4deg); }
  70%       { transform: skewX(-0.7deg); }
  76%       { transform: skewX(-1.4deg); }
  82%       { transform: skewX(-0.3deg); }
  88%       { transform: skewX(-0.55deg); }
  94%, 100% { transform: skewX(0deg); }
}

/* The flat document has no illustration to register against. */
.no-js .lamp-glow, .desk-off .lamp-glow,
.no-js .plant, .desk-off .plant { display: none; }

@media (prefers-reduced-motion: reduce) {
  .obj, .wall__panel { transition: none !important; }
  .lamp-glow, .plant { animation: none !important; }
  .lamp-glow { opacity: 0.62; }
}

/* ------------------------------------------------------------- pager ---- */
/* Large, labelled prev/next controls. The wheel and arrow keys still work,
   but nothing about them is visible, so the primary way through the site is
   these two buttons: a big arrow, the word Back or Next, and the name of the
   section you'd land on. */

.pager {
  position: absolute; bottom: 22px; z-index: 6;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 22px;
  background: var(--surface-card);
  border: 1px solid oklch(80% 0.02 72);
  box-shadow: 0 6px 22px oklch(30% 0.02 60 / 0.24);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.pager:hover:not(:disabled) {
  background: oklch(97.5% 0.008 80);
  box-shadow: 0 10px 28px oklch(30% 0.02 60 / 0.3);
}
.pager:disabled { opacity: 0; pointer-events: none; }

.pager--prev { left: 22px; }
.pager--next { right: 22px; }

.pager__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  background: var(--brand); color: var(--text-on-brand);
  font-size: 22px; line-height: 1;
  transition: background var(--dur-fast) var(--ease-out);
}
.pager:hover:not(:disabled) .pager__arrow { background: var(--brand-hover); }
.pager--next .pager__arrow { background: var(--coral-500); color: var(--ink-1); }
.pager--next:hover:not(:disabled) .pager__arrow { background: var(--coral-300); }

.pager__text { display: flex; flex-direction: column; gap: 2px; }
.pager__label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-faint);
}
.pager__dest {
  font-family: var(--font-display); font-size: var(--text-md);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-display);
  color: var(--ink-1); white-space: nowrap;
}

/* The scene label and dots move to the middle, between the two arrows. */
.scene-status {
  left: 50%; right: auto;
  transform: translateX(-50%);
}

@media (max-width: 1180px) {
  .pager { padding: 10px 16px; gap: 10px; }
  .pager__arrow { width: 36px; height: 36px; font-size: 19px; }
  .pager__dest { font-size: var(--text-sm); }
  .scene-status { display: none; }
}

.no-js .pager, .desk-off .pager { display: none; }

/* --------------------------------------------------------- demo line ---- */
/* The dialog lives outside .stage__scene, so it is in screen pixels and does
   not scale with the illustration. */

.link-cta {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: var(--text-sm);
  color: var(--coral-700);
  text-decoration: none;
}
.link-cta:hover { color: var(--brand); }

.demo {
  border: 1px solid oklch(80% 0.02 72);
  border-radius: 14px;
  padding: 30px 34px 26px;
  max-width: 430px; width: calc(100vw - 40px);
  background: var(--surface-card);
  color: var(--ink-1);
  box-shadow: 0 24px 70px oklch(25% 0.03 55 / 0.34);
  position: relative;
}
.demo::backdrop { background: oklch(28% 0.02 60 / 0.5); }

.demo__x {
  position: absolute; top: 10px; right: 14px;
  background: none; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--text-faint);
}
.demo__x:hover { color: var(--ink-1); }

.demo__eyebrow {
  font-size: 10px; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-faint);
}
.demo__title {
  font-family: var(--font-display); font-size: 25px;
  font-weight: var(--weight-bold); letter-spacing: var(--tracking-display);
  margin: 6px 0 0;
}

.demo__num {
  display: block; margin: 16px 0 4px;
  font-family: var(--font-display); font-size: 37px;
  font-weight: var(--weight-bold); letter-spacing: -0.02em;
  color: var(--coral-700); text-decoration: none;
  white-space: nowrap;
}
.demo__num:hover { color: var(--brand); }

.demo__body {
  font-size: var(--text-sm); line-height: 1.55;
  color: oklch(40% 0.02 60); margin: 14px 0 0;
}
.demo__body--soft { color: var(--text-faint); }

.demo__meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 20px; padding-top: 14px;
  border-top: var(--border-dotted);
  font-size: 10px; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-faint);
}

@media (max-width: 560px) {
  .demo { padding: 26px 22px 22px; }
  .demo__num { font-size: 30px; }
}


/* ------------------------------------------------------ legal + errors ---- */
/* Long-form pages that have to be readable rather than atmospheric: a single
   measured column, generous leading, and none of the desk's fixed-viewport
   behaviour. */

.legal-page { height: auto; overflow: auto; background: var(--surface-page); }

.legal__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  max-width: 760px; margin: 0 auto; padding: var(--space-6) var(--space-5) 0;
}
.legal__nav { display: flex; gap: var(--space-4); }
.legal__nav a {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-muted); text-decoration: none;
}
.legal__nav a:hover { color: var(--ink-1); }
.legal__nav a[aria-current="page"] { color: var(--coral-700); }

.legal {
  max-width: 760px; margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-9);
}
.legal__eyebrow {
  font-size: 11px; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 var(--space-3);
}
.legal h1 {
  font-family: var(--font-display); font-size: var(--text-3xl);
  font-weight: var(--weight-heavy); letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight); margin: 0 0 var(--space-6);
}
.legal h2 {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: var(--weight-bold); letter-spacing: var(--tracking-display);
  margin: var(--space-7) 0 var(--space-3);
  padding-top: var(--space-4); border-top: 1px solid var(--border-subtle);
}
.legal p, .legal li { color: var(--text-muted); line-height: 1.65; }
.legal p { margin: 0 0 var(--space-4); max-width: 66ch; }
.legal ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); max-width: 66ch; }
.legal li { margin-bottom: var(--space-2); }
.legal strong { color: var(--ink-1); font-weight: var(--weight-bold); }
.legal a { color: var(--text-link); }

.legal__foot {
  max-width: 760px; margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-8);
  border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; font-size: 11px; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-faint);
}
.legal__foot a { color: var(--text-faint); text-decoration: none; }
.legal__foot a:hover { color: var(--ink-1); }

/* The legal links on the desk itself. Deliberately quiet: present on every
   scene, never competing with the navigation. */
.site-legal {
  position: absolute; left: 22px; bottom: 26px; z-index: 5;
  display: flex; gap: var(--space-3);
  font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.site-legal a { color: var(--text-faint); text-decoration: none; }
.site-legal a:hover { color: var(--ink-1); }
@media (max-width: 1180px) { .site-legal { display: none; } }

.errpage {
  max-width: 560px; margin: 0 auto; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-7) var(--space-5); gap: var(--space-3);
}
.errpage__code {
  font-size: 11px; letter-spacing: var(--tracking-caps);
  color: var(--text-faint); margin: var(--space-7) 0 0;
}
.errpage h1 {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: var(--weight-heavy); letter-spacing: var(--tracking-display);
  margin: 0;
}
.errpage__msg { color: var(--text-muted); margin: 0; max-width: 46ch; }
.errpage__cta { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-4); }

.auth__consent {
  font-size: var(--text-xs); color: var(--text-faint);
  margin: var(--space-3) 0 0; line-height: 1.5;
}
.auth__consent a { color: var(--text-muted); }

/* ------------------------------------------------------- brand preview ---- */
/* The wordmark treatments, and the bar for flipping between them. Everything
   here is scoped to the wordmark itself so the rest of the page is untouched:
   a rebrand preview that also restyles the site tells you nothing about the
   rebrand. */

.wm { white-space: nowrap; }

/* ansero + live.
   "ansero" normal, "live" bold, always -- in the logo, in running text, in the
   laptop header. The name is a coinage nobody can parse by ear, and the weight
   is what makes the two halves visible. Everything below only decides what is
   layered on top of that. */

.wm b { font-weight: var(--weight-heavy); }

/* The live-call coral, deliberately the same one as the ON CALL dot on the
   laptop: the brand's last syllable and the "happening now" indicator end up a
   single colour. */
.wm-live { color: var(--coral-500); }

/* One ink. Inherits the colour it sits in, so it works on the dark laptop
   screen and on paper without a second rule. */
.wm-heavy { color: inherit; }

/* The on-air light, lifted wholesale from .laptop__live i -- same colour, same
   1.4s pulse -- so it reads as the indicator it already is rather than as
   decoration. Sized in em so it tracks the type it sits in. */
.wm-dot {
  display: inline-block;
  width: 0.26em; height: 0.26em;
  margin: 0 0.15em 0 0.09em;
  border-radius: 50%;
  background: var(--coral-500);
  vertical-align: 0.1em;
  animation: dc-pulse 1.4s ease-in-out infinite;
}

.brandbar {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 78px; z-index: 7;
  display: flex; align-items: center; gap: 4px;
  padding: 5px 6px 5px 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-m);
}
.brandbar__label {
  font-size: 10px; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-faint); margin-right: var(--space-2);
}
.brandbar__opt {
  font-family: var(--font-mono); font-size: 11px;
  padding: 4px 11px; border-radius: var(--radius-pill);
  color: var(--text-muted); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.brandbar__opt:hover { background: var(--surface-inset); color: var(--ink-1); }
.brandbar__opt.is-on { background: var(--brand); color: var(--text-on-brand); }
.brandbar__opt--out { color: var(--text-faint); }

@media (max-width: 1180px) { .brandbar { bottom: 70px; } }