/* ==========================================================================
   DirecSites, a division of Direcstaff LLC
   Concept: the homepage is the demo. A dead 2009 site rebuilds itself,
   then the studio behind the rebuild introduces itself.

   Palette "off hours": cool dusk grey paper, violet ink, one sodium orange.
   Type: Bricolage Grotesque (display) / Spline Sans (body) / Spline Sans Mono
   (every timestamp, label and piece of machine chatter on the page).
   ========================================================================== */

:root {
  --paper:    #E9EAEE;
  --paper-hi: #F4F5F7;
  --white:    #FFFFFF;
  --ink:      #0C0B14;
  --ink-2:    #22222F;
  --slate:    #5E6474;
  --slate-lo: #8A90A0;
  --rule:     #CBCFD8;
  --rule-hi:  rgba(12, 11, 20, .10);
  --deep:     #141026;
  --deep-2:   #1D1738;
  --deep-rule: rgba(255, 255, 255, .13);
  --dusk:     #B7B3D2;
  --signal:   #FF5A1F;
  --signal-lo: #FFE2D4;
  --good:     #35C48C;

  --display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, sans-serif;
  --body:    "Spline Sans", "Helvetica Neue", Helvetica, sans-serif;
  --mono:    "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-settle: cubic-bezier(.22, 1, .36, 1);
  --ease-in:    cubic-bezier(.55, 0, 1, .45);
  --ease-sweep: cubic-bezier(.76, 0, .16, 1);
  --ease-soft:  cubic-bezier(.4, 0, .2, 1);

  --pad: clamp(20px, 5vw, 84px);
  --maxw: 1320px;
  --gut: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; }

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

.wrap { width: 100%; padding-inline: var(--gut); }
.dot { opacity: .45; padding-inline: .18em; }

.skiplink {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; font: 500 13px/1 var(--mono);
  transition: top .2s var(--ease-out);
}
.skiplink:focus { top: 12px; }

.eyebrow {
  font: 500 11px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
}
.eyebrow.light { color: var(--dusk); }

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

.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 22px var(--gut) 18px;
  opacity: 0;
  transform: translate3d(0, -10px, 0);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js .nav { pointer-events: none; }
.nav.on { opacity: 1; transform: none; pointer-events: auto; z-index: 70; }
.no-js .nav { opacity: 1; transform: none; position: relative; }

.nav-mark {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 16.5px/1 var(--display);
  letter-spacing: -.015em;
}
.nav-mark-glyph {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-lo);
}
.nav-links { display: flex; gap: clamp(14px, 2.4vw, 30px); flex-wrap: wrap; }
.nav-links a {
  font: 400 12.5px/1 var(--mono);
  letter-spacing: .02em;
  color: var(--slate);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .35s var(--ease-out), color .35s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); background-size: 100% 1px; }

/* =============================================================== ACT ONE == */

.act1 {
  position: relative;
  height: 100svh;
  overflow: clip;
  --vwpx: 1440px;
  --u: calc(var(--vwpx) / 100);
}
.act1[data-stage="inset"], .act1[data-stage="revealed"] {
  height: auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: clamp(46px, 7vw, 96px);
}

.a1-layout {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 41fr) minmax(0, 59fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: start;
  padding-inline: var(--gut);
  padding-top: 0;
  pointer-events: none;
}
.act1[data-stage="inset"] .a1-layout,
.act1[data-stage="revealed"] .a1-layout {
  position: static; pointer-events: auto;
  padding-top: calc(var(--navh, 78px) + clamp(10px, 2.4vw, 34px));
}

.a1-copy { padding-top: 22px; }

.a1-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(46px, 6.4vw, 104px);
  line-height: .92;
  letter-spacing: -.035em;
  margin-top: clamp(14px, 1.8vw, 26px);
  font-variation-settings: "opsz" 72, "wdth" 96;
}
.a1-head .mask { display: block; }

.mask { display: block; overflow: hidden; padding-bottom: .06em; }
.maskin { display: block; }

.a1-sub {
  max-width: 40ch;
  margin-top: clamp(18px, 2.2vw, 30px);
  font-size: clamp(14.5px, 1.08vw, 17px);
  line-height: 1.62;
  color: var(--slate);
}
.a1-actions {
  margin-top: clamp(22px, 2.6vw, 36px);
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}

.replay {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px 11px 15px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font: 500 12.5px/1 var(--mono);
  letter-spacing: .04em;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.replay:hover { background: var(--ink); color: var(--paper); }
.replay:hover .replay-ic { border-color: currentColor; }
.replay-ic {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid var(--ink);
  border-right-color: transparent;
  transform: rotate(-38deg);
  transition: border-color .3s var(--ease-out), transform .5s var(--ease-out);
}
.replay:hover .replay-ic { transform: rotate(322deg); }
.replay.dark { border-color: rgba(255,255,255,.4); color: #fff; }
.replay.dark .replay-ic { border-color: #fff; border-right-color: transparent; }
.replay.dark:hover { background: #fff; color: var(--deep); }
.replay.dark:hover .replay-ic { border-color: var(--deep); border-right-color: transparent; }

.quiet-link, .quiet-btn {
  font: 400 12.5px/1 var(--mono);
  color: var(--slate);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.quiet-link:hover, .quiet-btn:hover { color: var(--ink); border-color: currentColor; }
.quiet-btn { color: var(--dusk); border-bottom-color: var(--deep-rule); }
.quiet-btn:hover { color: #fff; }

/* the slot the rebuilt page lands in */
.a1-slot { position: relative; }
.slot-frame {
  position: relative;
  width: 100%;
  margin-top: 22px;
  aspect-ratio: 16 / 10;
  background: var(--paper-hi);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset,
              0 26px 60px -28px rgba(12, 11, 20, .38),
              0 2px 10px -4px rgba(12, 11, 20, .16);
  outline: 1px solid var(--rule-hi);
  opacity: 0;
  transition: opacity .5s var(--ease-out) .1s;
}
.slot-tag {
  position: absolute; left: 0; top: -22px;
  font: 400 10.5px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate-lo);
}
.slot-cap {
  margin-top: 14px;
  font: 400 10.5px/1.5 var(--mono);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--slate-lo);
  opacity: 0;
  transition: opacity .5s var(--ease-out) .25s;
}
.act1[data-stage="inset"] .slot-frame,
.act1[data-stage="revealed"] .slot-frame,
.act1[data-stage="inset"] .slot-cap,
.act1[data-stage="revealed"] .slot-cap { opacity: 1; }

/* the board: an absolutely placed copy of the viewport that later shrinks
   into the slot with one uniform transform */
.board {
  position: absolute;
  top: 0; left: 0;
  width: var(--vwpx);
  height: var(--vhpx, 100svh);
  transform-origin: 0 0;
  z-index: 20;
  transition: transform 1.2s var(--ease-settle);
}
.board-inner {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--paper);
}

/* -------------------------------------------------- act one: the 2009 --- */

.old {
  position: absolute; inset: 0; z-index: 12;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.028) 0 1px, transparent 1px 4px),
    linear-gradient(#9fa08e, #b8b9a7 140px, #b8b9a7);
  font-family: "Times New Roman", Times, serif;
  color: #000;
}
.old-page { height: 100%; overflow: hidden; }

.old-marquee {
  overflow: hidden; white-space: nowrap;
  background: #000080; color: #ff0;
  font: 700 13px/24px "Times New Roman", Times, serif;
  height: 24px;
}
.old-marquee span {
  display: inline-block; padding-left: 100%;
  animation: mq 17s linear infinite;
}
@keyframes mq { to { transform: translate3d(-100%, 0, 0); } }

.old-shell {
  width: min(772px, calc(100% - 20px));
  margin: 14px auto;
  background: #fffff0;
  border: 2px solid #55554a;
  padding: 14px 18px 18px;
}
.old-head { text-align: center; }
.old-logo {
  font: 700 40px/1.1 "Times New Roman", Times, serif;
  letter-spacing: .01em; color: #003366;
  text-shadow: 1px 1px 0 #b9c4cf;
}
.old-tag { font-size: 15px; color: #660000; margin-top: 2px; }
.old-hr { border: 0; border-top: 1px solid #999; border-bottom: 1px solid #fff; margin: 10px 0; }

.old-btns { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.btn98 {
  background: #d4d0c8;
  border: 2px outset #f0eeea;
  padding: 3px 13px;
  font: 400 13px/1.5 "Times New Roman", Times, serif;
  color: #000;
}

.old-cols { display: flex; gap: 16px; align-items: flex-start; }
.old-main { flex: 1 1 auto; min-width: 0; }
.old-side { flex: 0 0 178px; }

.old-h3 { font: 700 19px/1.3 "Times New Roman", Times, serif; color: #003366; margin-bottom: 6px; }
.old-h4 { font: 700 15px/1.3 "Times New Roman", Times, serif; margin: 10px 0 3px; }
.old-p { font-size: 14px; line-height: 1.45; text-align: justify; margin-bottom: 8px; }
.old-ul { list-style: disc; padding-left: 24px; font-size: 14px; line-height: 1.5; }
.old-a { color: #0000ee; text-decoration: underline; }
.old-a.v { color: #551a8b; }

.old-brokenwrap {
  float: left; margin: 2px 12px 6px 0;
  width: 168px; height: 108px;
  border: 1px solid #a0a0a0; background: #fff;
  display: flex; align-items: center; gap: 5px;
  padding: 5px;
}
.old-broken { flex: 0 0 15px; }
.old-brokentxt { font-size: 12px; color: #333; }

.old-box { border: 2px ridge #c8c0a8; background: #f6f2dc; padding: 8px; text-align: center; }
.old-boxh { font: 700 12px/1.2 "Times New Roman", Times, serif; letter-spacing: .04em; }
.old-phone { font: 700 21px/1.25 "Times New Roman", Times, serif; color: #a00; margin: 3px 0; }
.old-small { font-size: 11px; line-height: 1.35; color: #333; }

.old-coupon {
  margin-top: 12px; padding: 8px 10px;
  border: 3px dashed #a03;
  background: #fff8e6;
  text-align: center;
}
.old-coupon-h { font: 700 11px/1.2 "Times New Roman", Times, serif; letter-spacing: .22em; color: #333; }
.old-coupon-b { font: 700 30px/1.1 "Times New Roman", Times, serif; color: #a03; margin: 2px 0; }
.old-coupon-s { font-size: 10px; line-height: 1.3; color: #444; }

.old-badges { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 4px 0 10px; }
.badge98 {
  font: 700 9px/13px Verdana, Geneva, sans-serif;
  padding: 2px 6px; color: #fff;
  background: linear-gradient(#4a6fa5, #1d3557);
  border: 1px solid #0d1b2a;
}
.badge98.b2 { background: linear-gradient(#8a2b2b, #5a1010); border-color: #300; }
.badge98.b3 { background: linear-gradient(#5f7a2b, #33450f); border-color: #1e2a06; }

.old-counter { margin-top: 12px; text-align: center; }
.odo { display: inline-flex; gap: 2px; margin-top: 4px; }
.odo b {
  background: #000; color: #0f0;
  font: 700 15px/1 var(--mono), monospace;
  padding: 3px 4px; border: 1px solid #555;
}
.old-comic {
  margin-top: 12px; text-align: center;
  font-family: "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive;
  font-size: 14px; color: #cc0066;
}

.blink { color: #d00; font-weight: 700; font-size: 11px; animation: bl 1.05s steps(1) infinite; }
@keyframes bl { 50% { opacity: 0; } }

.old-uc {
  margin: 12px 0 4px; height: 26px; overflow: hidden;
  background: repeating-linear-gradient(45deg, #ffd400 0 11px, #1a1a1a 11px 22px);
  display: flex; align-items: center;
  border: 1px solid #8a7400;
}
.old-uc-in {
  display: inline-block; white-space: nowrap;
  background: #ffd400; color: #1a1a1a;
  font: 700 11px/18px "Times New Roman", Times, serif;
  padding: 0 8px;
  animation: mq 13s linear infinite;
  padding-left: 100%;
}
.old-foot { text-align: center; }

.old-signup {
  width: min(772px, calc(100% - 20px));
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font: 400 13px/1.6 "Times New Roman", Times, serif;
  color: #2a2a20;
}
.fake-input {
  display: inline-block; width: 168px; height: 20px;
  background: #fff; border: 2px inset #d9d9d0;
}
.old-ring {
  width: min(772px, calc(100% - 20px));
  margin: 8px auto 0;
  text-align: center;
  font: 400 12px/1.5 "Times New Roman", Times, serif;
  color: #33332a;
}

/* teardown: the clutter leaves first, in a staged order */
.o {
  transition:
    opacity .62s var(--ease-in) calc(var(--o) * 120ms),
    transform .7s var(--ease-in) calc(var(--o) * 120ms);
}
.act1[data-stage="teardown"] .o,
.act1[data-stage="wipe1"] .o,
.act1[data-stage="wipe2"] .o,
.act1[data-stage="assemble"] .o,
.act1[data-stage="inset"] .o,
.act1[data-stage="revealed"] .o {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(.94);
}

.act1[data-stage="wipe2"] .old,
.act1[data-stage="assemble"] .old,
.act1[data-stage="inset"] .old,
.act1[data-stage="revealed"] .old { visibility: hidden; }

/* pre-dim cue: the dead page loses a little light just before teardown */
.act1 .old { transition: filter 1.3s ease, opacity 1.3s ease; }
.act1.pre .old { filter: brightness(.9) saturate(.82); }

/* the wiper: one continuous pass that covers then uncovers */
.sweep {
  position: absolute; inset: 0; z-index: 30;
  background: var(--paper);
  transform: translate3d(-100.4%, 0, 0);
  pointer-events: none;
}
.sweep::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -3px; width: 3px;
  background: var(--signal);
}
.sweep::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -3px; width: 3px;
  background: var(--ink);
}
.act1[data-stage="wipe1"] .sweep {
  transform: translate3d(0, 0, 0);
  transition: transform 1s var(--ease-sweep);
}
.act1[data-stage="wipe2"] .sweep,
.act1[data-stage="assemble"] .sweep,
.act1[data-stage="inset"] .sweep,
.act1[data-stage="revealed"] .sweep {
  transform: translate3d(100.4%, 0, 0);
  transition: transform 1.05s var(--ease-sweep);
}

/* ------------------------------------------- act one: the rebuilt site --- */
/* A faithful miniature of demo/redrock/index.html. Everything here is lifted
   from that stylesheet: the paper and deep green tokens, Bodoni Moda over
   Archivo, the duotoned plate, the paper slab wordmark and the ledger strip.
   The board renders at viewport size and is scaled into the slot afterwards,
   so 1 --u is exactly 1vw and the demo's vw clamps port over one for one. */

.new {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column;
  overflow: hidden;

  --rr-paper:      #E7E2D6;
  --rr-ink:        #1A1712;
  --rr-ink-soft:   #5C554A;
  --rr-deep-dk:    #10231F;
  --rr-flame:      #94502C;
  --rr-flame-lift: #DCA274;
  --rr-rule-soft:  rgba(26, 23, 18, .15);
  --rr-rule-paper: rgba(231, 226, 214, .32);
  --rr-scrim:      12, 30, 26;
  --rr-serif: "Bodoni Moda", Didot, "Bodoni MT", Georgia, "Times New Roman", serif;
  --rr-sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rr-pad: clamp(18px, calc(var(--u) * 4.2), 60px);

  background: var(--rr-paper);
  color: var(--rr-ink);
  font-family: var(--rr-sans);
  font-size: 16px;
  line-height: 1.62;
  padding-bottom: clamp(10px, calc(var(--u) * 1.2), 18px);
}
.new .duodefs { position: absolute; width: 0; height: 0; }
.new picture { display: contents; }

/* the sample preview strip ------------------------------------------------ */

/* the demo dims the note, never the bar, so the green stays at full strength */
.new-preview {
  flex: 0 0 auto;
  background: var(--rr-deep-dk);
  color: rgba(231, 226, 214, .82);
  padding: 0 var(--rr-pad);
  height: clamp(34px, calc(var(--u) * 2.5), 36px);
  display: flex; align-items: center;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-stretch: 88%;
  font-weight: 500;
}

/* running head and contents ----------------------------------------------- */

.new-head { flex: 0 0 auto; padding-inline: var(--rr-pad); }

.new-runhead {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 6px 24px;
  padding: 13px 0 12px;
  border-bottom: 2px solid var(--rr-ink);
}
.new-mark {
  font-family: var(--rr-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
}
.new-tel {
  margin-left: auto;
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rr-flame);
  border-bottom: 1px solid var(--rr-flame);
  padding-bottom: 2px;
  white-space: nowrap;
}
.new-folio {
  order: 3; width: 100%;
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--rr-flame);
}

.new-contents {
  display: flex; flex-wrap: wrap;
  gap: 2px 22px;
  padding: 9px 0 10px;
  border-bottom: 1px solid var(--rr-ink);
}
.new-contents span {
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  font-stretch: 88%;
  color: var(--rr-ink-soft);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.new-contents .here { color: var(--rr-ink); border-bottom-color: var(--rr-flame); }

/* the hero: one wide duotoned plate with the wordmark set over it ---------- */

/* clipped here, not on .new: the plate settles in from a 1.045 scale and must
   never bleed over the contents rule above it */
.new-hero {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.new-plate {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden;
  background: var(--rr-deep-dk);
}
/* the lift runs before the duotone, so it opens the shadows of a dark frame
   before the ramp maps them, exactly as the demo does */
.new-plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.04) brightness(1.3) url(#duotone);
}
.new-scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to bottom, rgba(var(--rr-scrim), .5) 0%, rgba(var(--rr-scrim), 0) 20%),
    linear-gradient(to top,
      rgba(var(--rr-scrim), .9) 0%,
      rgba(var(--rr-scrim), .6) 30%,
      rgba(var(--rr-scrim), .1) 64%,
      rgba(var(--rr-scrim), 0) 100%);
}
.new-fig {
  position: absolute; z-index: 4;
  right: clamp(14px, calc(var(--u) * 3), 26px);
  bottom: clamp(12px, calc(var(--u) * 2.4), 22px);
  max-width: 48%;
  text-align: right;
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  font-stretch: 92%;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 14px rgba(var(--rr-scrim), .95), 0 0 3px rgba(var(--rr-scrim), .8);
}
.new-fig b { font-weight: 700; color: var(--rr-flame-lift); }

.new-hero-inner {
  position: relative; z-index: 5;
  width: 100%;
  padding: 0 var(--rr-pad) clamp(24px, calc(var(--u) * 4), 52px);
}
.new-eyebrow {
  margin-bottom: clamp(14px, calc(var(--u) * 2.4), 26px);
  font-size: 9.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 700;
  font-stretch: 92%;
  color: var(--rr-flame-lift);
}

/* the wordmark rides a paper slab. The mask is the slab, so the slab itself
   slides up out of the photograph when the board assembles. */
.new-h {
  font-family: var(--rr-serif);
  font-weight: 500;
  line-height: .86;
  letter-spacing: -.028em;
  font-variation-settings: "opsz" 96;
  color: var(--rr-ink);
  font-size: max(3rem, min(calc(var(--u) * 17.6), 9.62rem));
}
.new-h .mask {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0;
  margin-left: -.04em;
}
.new-h .maskin {
  display: block;
  background: var(--rr-paper);
  padding: .09em .16em .05em .04em;
}

.new-hero-foot {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 18px 32px;
  margin-top: clamp(20px, calc(var(--u) * 3), 34px);
  padding-top: 14px;
  border-top: 1px solid var(--rr-rule-paper);
}
.new-legal {
  color: var(--rr-paper);
  font-size: clamp(11px, calc(var(--u) * 1.4), 13px);
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 500;
}
.new-call { display: inline-flex; flex-direction: column; gap: 5px; }
.new-call-lbl {
  font-size: 9.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rr-flame-lift);
}
.new-call-num {
  font-family: var(--rr-serif);
  font-size: clamp(1.7rem, calc(var(--u) * 4.6), 2.9rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.012em;
  color: var(--rr-paper);
  border-bottom: 1.5px solid var(--rr-flame-lift);
  padding-bottom: .1em;
}

/* the ledger strip -------------------------------------------------------- */

/* the demo floats the ledger on paper below the hero. The board only has one
   screen to spend, so the gap is squeezed rather than dropped. */
.new-colophon {
  flex: 0 0 auto;
  margin: clamp(16px, calc(var(--u) * 2.6), 34px) var(--rr-pad) 0;
  border-top: 1px solid var(--rr-ink);
  border-bottom: 1px solid var(--rr-ink);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.new-colophon li { padding: 18px 0 17px; }
.new-colophon li + li {
  border-left: 1px solid var(--rr-rule-soft);
  padding-left: clamp(20px, calc(var(--u) * 2.6), 40px);
}
.new-lbl {
  display: block;
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rr-flame);
  font-weight: 700;
  margin-bottom: 4px;
}
.new-val { display: block; font-size: 16px; font-weight: 500; }

/* assembly stagger */
.n {
  opacity: 0;
  transform: translate3d(0, calc(var(--u) * 1.5), 0);
}
.act1[data-stage="assemble"] .n,
.act1[data-stage="inset"] .n,
.act1[data-stage="revealed"] .n {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s var(--ease-out) calc(var(--n) * 160ms),
    transform 1.3s var(--ease-out) calc(var(--n) * 160ms);
}
/* the plate is inset to its frame, so it cannot travel: it settles instead */
.new-plate.n { transform: scale(1.045); }
.new-h .mask.n { opacity: 1; transform: none; }
.new-h .mask.n .maskin {
  transform: translate3d(0, 105%, 0);
  transition: transform 1.45s var(--ease-out) calc(var(--n) * 160ms);
}
.act1[data-stage="assemble"] .new-h .mask.n .maskin,
.act1[data-stage="inset"] .new-h .mask.n .maskin,
.act1[data-stage="revealed"] .new-h .mask.n .maskin { transform: none; }

/* the board is always viewport wide, so the miniature keeps the demo's own
   breakpoints rather than this page's */
@media (max-width: 639px) {
  .new-colophon { grid-template-columns: 1fr; }
  .new-colophon li { padding: 14px 0 13px; border-bottom: 1px solid var(--rr-rule-soft); }
  .new-colophon li:last-child { border-bottom: 0; }
  .new-colophon li + li { border-left: 0; padding-left: 0; }
}
@media (max-width: 699px) {
  .new-tel { margin-left: 0; }
  .new-fig { max-width: 64%; top: 14px; bottom: auto; }
}

/* the DirecSites reveal */
.a1-copy .r { opacity: 0; transform: translate3d(0, 16px, 0); }
.a1-head .mask.r { opacity: 1; transform: none; }
.a1-head .mask.r .maskin { transform: translate3d(0, 106%, 0); }
.act1[data-stage="revealed"] .a1-copy .r {
  opacity: 1; transform: none;
  transition:
    opacity .9s var(--ease-out) calc(var(--i) * 150ms),
    transform 1.2s var(--ease-out) calc(var(--i) * 150ms);
}
.act1[data-stage="revealed"] .a1-head .mask.r .maskin {
  transform: none;
  transition: transform 1.3s var(--ease-out) calc(var(--i) * 150ms);
}

.nojs-note { display: none; }

/* =============================================================== ACT TWO == */

.act2 {
  background: var(--deep);
  color: #fff;
  padding-block: clamp(88px, 12vw, 172px);
  position: relative;
}
.act2::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 62% at 12% 0%, rgba(255,90,31,.13) 0%, rgba(255,90,31,0) 60%);
  pointer-events: none;
}
.act2 .wrap { position: relative; }

.a2-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 290px);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
}
.ringlog { border-top: 1px solid var(--deep-rule); }
.ringlog li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--deep-rule);
  font: 400 11.5px/1.3 var(--mono);
  letter-spacing: .06em;
  color: var(--slate-lo);
}
.ringlog li span:first-child { font-variant-numeric: tabular-nums; }
.ringlog li.hot { color: var(--signal); border-bottom-color: rgba(255,90,31,.4); }

.a2-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(40px, 6vw, 96px);
  line-height: .94; letter-spacing: -.04em;
  margin-top: clamp(14px, 1.6vw, 22px);
  font-variation-settings: "opsz" 72, "wdth" 96;
}
.a2-sub {
  margin-top: clamp(16px, 1.8vw, 24px);
  max-width: 44ch;
  font-size: clamp(15px, 1.1vw, 17.5px);
  color: var(--dusk);
}

.call {
  margin-top: clamp(38px, 5vw, 66px);
  border: 1px solid var(--deep-rule);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border-radius: 4px;
}
.call-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px clamp(16px, 2.4vw, 28px);
  border-bottom: 1px solid var(--deep-rule);
  font: 400 11.5px/1 var(--mono);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--dusk);
}
.call-badge {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--signal); font-weight: 500;
}
.pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
  animation: pl 1.9s var(--ease-soft) infinite;
}
@keyframes pl { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.72); } }
.call-meta { flex: 1 1 auto; }
.nowrap { white-space: nowrap; }
.call-timer { font-variant-numeric: tabular-nums; color: #fff; margin-left: auto; }

.call-body {
  padding: clamp(24px, 3.2vw, 44px) clamp(16px, 2.4vw, 28px);
}

.script { min-height: clamp(360px, 44vw, 520px); }
.script li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  padding: 9px 0;
  align-items: baseline;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity .34s var(--ease-out), transform .34s var(--ease-out);
}
.script li.in { opacity: 1; transform: none; }
.script .who {
  font: 500 10.5px/1.7 var(--mono);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate-lo);
}
.script li.ai .who { color: var(--signal); }
.script .said {
  font-size: clamp(15.5px, 1.25vw, 19px);
  line-height: 1.52;
  max-width: 48ch;
}
.script li.ai .said { color: #fff; }
.script li.caller .said { color: var(--dusk); }
.script li.sys {
  border-bottom: 1px solid var(--deep-rule);
  padding-bottom: 16px; margin-bottom: 8px;
}
.script li.sys .said {
  font: 400 11.5px/1.6 var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate-lo);
}
.caret {
  display: inline-block; width: 2px; height: 1em;
  background: var(--signal); vertical-align: -.14em; margin-left: 2px;
  animation: cr .9s steps(1) infinite;
}
@keyframes cr { 50% { opacity: 0; } }

.sms {
  position: relative;
  margin: clamp(26px, 3.4vw, 44px) 0 0 auto;
  width: min(100%, 460px);
  border: 1px solid var(--deep-rule);
  background: var(--deep-2);
  border-radius: 16px;
  padding: 16px 18px 14px;
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.9);
  opacity: 0; transform: translate3d(0, 18px, 0) scale(.97);
  transition: opacity .5s var(--ease-out), transform .66s var(--ease-out);
}
.sms.in { opacity: 1; transform: none; }
.sms-lead {
  position: absolute; left: 0; top: -22px;
  font: 400 10.5px/1 var(--mono);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate-lo);
}
.sms-top {
  display: flex; justify-content: space-between; gap: 10px;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--slate-lo);
  padding-bottom: 11px; margin-bottom: 11px;
  border-bottom: 1px solid var(--deep-rule);
}
.sms-txt { font-size: 15px; line-height: 1.5; color: #fff; }
.sms-note {
  margin-top: 12px;
  font: 400 10.5px/1 var(--mono);
  letter-spacing: .11em; text-transform: uppercase; color: var(--good);
}

.call-foot {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 15px clamp(16px, 2.4vw, 28px);
  border-top: 1px solid var(--deep-rule);
}
.call-disc {
  margin-left: auto;
  font: 400 10.5px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate-lo);
}

.a2-close {
  margin-top: clamp(38px, 5vw, 62px);
  max-width: 30ch;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(23px, 2.5vw, 40px);
  line-height: 1.18; letter-spacing: -.025em;
  color: var(--dusk);
  font-variation-settings: "opsz" 40, "wdth" 100;
}

/* ============================================================= ACT THREE == */

.act3 { padding-block: clamp(96px, 13vw, 190px); }

.a3-title {
  margin-top: clamp(16px, 1.8vw, 24px);
  max-width: 17ch;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(36px, 5.2vw, 84px);
  line-height: .96; letter-spacing: -.04em;
  font-variation-settings: "opsz" 72, "wdth" 94;
}
.a3-lede {
  margin-top: clamp(20px, 2.2vw, 30px);
  max-width: 52ch;
  font-size: clamp(15px, 1.15vw, 18px);
  color: var(--slate);
}

.terms { margin-top: clamp(44px, 5.5vw, 78px); }
.term {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 48px);
  align-items: baseline;
  padding: clamp(22px, 2.6vw, 34px) 0;
  position: relative;
  transition: background-color .35s var(--ease-out);
}
.term:hover { background-color: rgba(255, 255, 255, .55); }
.term::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .9s var(--ease-settle) calc(var(--i) * 88ms);
}
.act3.on .term::before { transform: scaleX(1); }
.terms .term:last-child { border-bottom: 1px solid var(--rule); }

.term-tag {
  font: 500 11px/1 var(--mono);
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--slate);
}
.term-price {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(40px, 4.8vw, 76px);
  line-height: .84; letter-spacing: -.048em;
  font-variation-settings: "opsz" 76, "wdth" 92;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.term-per {
  font: 400 11px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate);
  margin-left: .42em;
  vertical-align: .62em;
}
.term-say {
  max-width: 46ch;
  font-size: clamp(15.5px, 1.22vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
}

.stance { margin-top: clamp(80px, 11vw, 168px); }
.stance-big {
  max-width: 19ch;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(34px, 5.6vw, 96px);
  line-height: .98; letter-spacing: -.042em;
  font-variation-settings: "opsz" 96, "wdth" 96;
  text-wrap: balance;
}
.stance-small {
  margin-top: clamp(22px, 2.6vw, 38px);
  max-width: 30ch;
  font-size: clamp(17px, 1.7vw, 26px);
  line-height: 1.38;
  color: var(--signal);
  letter-spacing: -.012em;
}

/* ================================================================ FOOTER == */

.foot {
  background: var(--deep);
  color: var(--dusk);
  padding-block: clamp(56px, 7vw, 92px);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.foot-mark {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 3vw, 42px);
  letter-spacing: -.035em; color: #fff;
  display: block;
}
.foot-entity {
  margin-top: 12px;
  font: 400 11.5px/1.6 var(--mono);
  letter-spacing: .05em;
  color: var(--slate-lo);
  max-width: 42ch;
}
.foot-addr {
  font: 400 13px/1.85 var(--mono);
  font-style: normal;
  letter-spacing: .02em;
}
.foot-addr a { border-bottom: 1px solid var(--deep-rule); color: #fff; transition: border-color .3s var(--ease-out); }
.foot-addr a:hover { border-color: #fff; }
.foot-links { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.foot-links a {
  font: 400 13px/1 var(--mono);
  letter-spacing: .04em;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.foot-links a:hover { color: #fff; border-bottom-color: var(--deep-rule); }

/* ======================================================== scroll reveals == */

.rv { opacity: 0; transform: translate3d(0, 20px, 0); }
.on .rv, .rv.on {
  opacity: 1; transform: none;
  transition:
    opacity .66s var(--ease-out) calc(var(--i) * 82ms),
    transform .86s var(--ease-out) calc(var(--i) * 82ms);
}
.no-js .rv { opacity: 1; transform: none; }
.no-js .term::before { transform: scaleX(1); }

/* ============================================================= RESPONSIVE = */

@media (max-width: 1080px) {
  .a1-layout { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
  .a2-head { grid-template-columns: 1fr; align-items: start; gap: 34px; }
  .ringlog { max-width: 380px; }
  .term { grid-template-columns: 112px minmax(0, 1fr); row-gap: 14px; }
  .term-price { grid-column: 2; text-align: left; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .nav { padding-top: 18px; }
  /* phones: keep Pricing reachable from the top nav; the long email goes */
  .nav-links a:not([href="pricing.html"]):not([href="questions.html"]) { display: none; }
  .call-top { row-gap: 8px; }
  .call-meta { order: 3; flex-basis: 100%; }
  .a1-slot .slot-frame { width: min(100%, 268px); }
  .a1-head, .a2-title, .a3-title { line-height: 1.0; }
  .stance-big { line-height: 1.04; }
}

@media (max-width: 760px) {
  .act1 { height: auto; min-height: 100svh; }
  .act1[data-stage="inset"], .act1[data-stage="revealed"] { display: block; }
  .old-cols { gap: 0; }
  .a1-layout { position: static; padding-top: 0; pointer-events: auto; }
  .act1[data-stage="dead"] .a1-copy,
  .act1[data-stage="teardown"] .a1-copy,
  .act1[data-stage="wipe1"] .a1-copy,
  .act1[data-stage="wipe2"] .a1-copy,
  .act1[data-stage="assemble"] .a1-copy { display: none; }
  .act1[data-stage="dead"] .a1-slot,
  .act1[data-stage="teardown"] .a1-slot,
  .act1[data-stage="wipe1"] .a1-slot,
  .act1[data-stage="wipe2"] .a1-slot,
  .act1[data-stage="assemble"] .a1-slot { display: none; }
  .a1-copy { padding-top: 4px; }
  .a1-slot { margin-top: clamp(30px, 8vw, 52px); }

  /* the rebuilt mock keeps the demo's own breakpoints, see above */

  .old-shell { width: calc(100% - 12px); padding: 10px 11px 14px; margin: 8px auto; }
  .old-logo { font-size: 27px; }
  .old-cols { flex-direction: column; }
  .old-side { flex: 1 1 auto; width: 100%; }
  .old-brokenwrap { width: 132px; height: 88px; }

  .script li { grid-template-columns: 1fr; gap: 4px; }
  .call-body { padding-inline: 16px; }
  .sms { width: 100%; }
  .term { grid-template-columns: 1fr; gap: 10px; }
  .term-say { grid-column: 1; }
  .term-price { grid-column: 1; text-align: left; margin-top: 2px; }
  .foot-grid { grid-template-columns: 1fr; }
  .call-disc { margin-left: 0; flex-basis: 100%; }
}

/* ======================================================== reduced motion == */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .act1 .old { transition: opacity .34s linear !important, visibility 0s linear .34s !important; }
  .a1-head .mask .maskin, .new-h .mask .maskin { transform: none !important; }
  .act1[data-stage="revealed"] .old { opacity: 0; visibility: visible; }
  .act1[data-stage="revealed"] .o { opacity: 1; transform: none; }
  .sweep { display: none; }
  .rv, .a1-copy .r, .n { opacity: 1 !important; transform: none !important; }
  .maskin { transform: none !important; }
  .term::before { transform: scaleX(1) !important; }
  .script li { opacity: 1; transform: none; }
}

/* ============================================================== no script = */

.no-js .act1 {
  height: auto;
  /* the script normally measures this. Without it the 1440px fallback sized
     the mock for a desktop on a phone, so fall back to the viewport instead. */
  --vwpx: 100vw;
}
.no-js .a1-layout { position: static; pointer-events: auto; }
.no-js .board { position: static; width: 100%; height: auto; transform: none; }
.no-js .board-inner { height: auto; }
/* relative, not static: the Before badge is absolute, and with a static .old
   it anchored to .board-inner and landed on top of the After badge */
.no-js .old, .no-js .new { position: relative; }
.no-js .old { height: 600px; }
.no-js .new { height: 760px; }
.no-js .old-page, .no-js .new { position: relative; }
.no-js .old::after, .no-js .new::after {
  content: "Before";
  position: absolute; right: 0; bottom: 0; z-index: 40;
  background: var(--ink); color: var(--paper);
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 14px;
}
.no-js .new::after { content: "After"; background: var(--signal); color: #fff; }
.no-js .sweep { display: none; }
.no-js .slot-frame { display: none; }
.no-js .slot-cap { opacity: 1; }
.no-js .replay { display: none; }
.no-js .nojs-note {
  display: block;
  padding: 16px var(--gut) 0;
  font: 400 11px/1.6 var(--mono);
  letter-spacing: .09em; text-transform: uppercase; color: var(--slate-lo);
}
.no-js .a1-copy .r { opacity: 1; transform: none; }
.no-js .a1-layout { grid-template-columns: 1fr; }
.no-js .slot-cap { display: none; }
.no-js .a1-head .mask .maskin,
.no-js .new-h .mask .maskin { transform: none; }
/* no script never reaches the assemble stage, so the mock has to stand on
   its own: every staged piece is simply present */
.no-js .n { opacity: 1; transform: none; }

/* the browse cue: prominent, above the frame, arrives after the reveal */
.slot-go {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 15px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--signal);
  margin: 0 0 12px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .8s ease .9s, transform .8s ease .9s;
}
.slot-go svg { animation: slotgo-nudge 2.2s ease-in-out 2s infinite; }
.act1[data-stage="revealed"] .slot-go { opacity: 1; transform: none; }
.no-js .slot-go { display: none; }
@keyframes slotgo-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .slot-go { transition: opacity .3s ease; transform: none; }
  .slot-go svg { animation: none; }
}

/* the finished board is a doorway: browsable demo behind it */
.act1[data-stage="revealed"] .board { cursor: pointer; }
.act1[data-stage="revealed"] .board:hover .board-inner { box-shadow: 0 34px 90px rgba(12, 11, 20, .28); }
.act1[data-stage="revealed"] .board:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }

/* demoted from h2/h3 for SEO (fake-business text out of the heading tree);
   these reproduce the UA default heading margins the layout was tuned with */
.old-logo { margin-block: .83em; }
.new-h { margin-block: 1em; }