/* ============================================================
   Aceptionist — atmosphere layer (loads LAST, overrides)
   Fixes, in order of severity:
   1. flat empty backgrounds        -> layered washes, arcs, rings, grids
   2. hard colour edges between     -> overlapping rounded sections that
      sections                         lift over the one above
   3. everything sharp              -> a radius scale that varies per page
   4. cream base                    -> sage-stone base, no cream anywhere
   5. undersized type in cards      -> card type bumped
   ============================================================ */

:root {
  /* ---- BASE: sage-stone. no cream, no beige ---- */
  --base: #e3e7de;
  --base-2: #d8ddd2;
  --base-3: #ccd3c5;
  --paper: #f1f3ed;
  --bone: #f1f3ed;
  --sand: #e3e7de;
  --rose: #dce2d6;

  /* ---- deep: warm aubergine, never black ---- */
  --plum: #241c2b;
  --plum-2: #332844;
  --plum-deep: #1a1420;

  /* ---- accents ---- */
  --clay: #c9552f;
  --clay-deep: #a03d1c;
  --clay-wash: #f0d8cd;
  --ochre: #d3971f;
  --ochre-deep: #a06f0f;
  --ochre-wash: #f3e5c4;
  --teal: #1c6a5c;
  --teal-deep: #0f483d;
  --teal-wash: #d3e4dd;
  --lilac: #7a6aa0;
  --lilac-wash: #e1dcec;

  /* ---- ink, cooled slightly to sit on sage ---- */
  --ink: #241c2b;
  --body: #4f4a55;
  --soft: #6e6875;
  --faint: #918b98;

  --rule-hair: rgba(36, 28, 43, 0.1);
  --rule-mid: rgba(36, 28, 43, 0.2);
  --rule-hard: #241c2b;

  --d-text: #f1f3ed;
  --d-soft: rgba(241, 243, 237, 0.66);
  --d-rule: rgba(241, 243, 237, 0.16);

  /* ---- radius scale, overridden per page below ---- */
  --rad-card: 20px;
  --rad-soft: 28px;
  --rad-lift: 44px;
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: var(--rad-card);
  --r-xl: 38px;
}

body {
  background: var(--base);
}

/* ============================================================
   1. BACKGROUND ATMOSPHERE
   Every light zone gets three layers: a broad tonal wash, a
   visible structural pattern, and a large soft arc. No zone is
   ever a flat field.
   ============================================================ */

.z-sand,
.z-bone,
.z-rose,
.z-hero,
.band--paper {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

/* layer 1 — broad colour wash, different per zone */
.z-sand {
  background: var(--base);
}
.z-bone {
  background: var(--paper);
}
.z-rose {
  background: var(--base-2);
}

.z-sand::before,
.z-bone::before,
.z-rose::before,
.z-hero::before {
  content: "";
  position: absolute;
  inset: -10% -5%;
  z-index: -3;
  pointer-events: none;
}
.z-sand::before {
  background:
    radial-gradient(
      ellipse 58% 46% at 88% 8%,
      rgba(201, 85, 47, 0.16),
      transparent 66%
    ),
    radial-gradient(
      ellipse 52% 40% at 6% 78%,
      rgba(28, 106, 92, 0.14),
      transparent 68%
    ),
    radial-gradient(
      ellipse 44% 34% at 44% 40%,
      rgba(211, 151, 31, 0.1),
      transparent 70%
    );
}
.z-bone::before {
  background:
    radial-gradient(
      ellipse 50% 42% at 10% 6%,
      rgba(122, 106, 160, 0.16),
      transparent 66%
    ),
    radial-gradient(
      ellipse 56% 44% at 92% 84%,
      rgba(211, 151, 31, 0.15),
      transparent 68%
    );
}
.z-rose::before {
  background:
    radial-gradient(
      ellipse 60% 48% at 76% 96%,
      rgba(201, 85, 47, 0.2),
      transparent 66%
    ),
    radial-gradient(
      ellipse 46% 38% at 14% 12%,
      rgba(122, 106, 160, 0.14),
      transparent 70%
    );
}
.z-hero::before {
  background:
    radial-gradient(
      ellipse 66% 50% at 50% 104%,
      rgba(201, 85, 47, 0.26),
      transparent 66%
    ),
    radial-gradient(
      ellipse 48% 42% at 6% -6%,
      rgba(211, 151, 31, 0.3),
      transparent 64%
    ),
    radial-gradient(
      ellipse 42% 38% at 96% 4%,
      rgba(28, 106, 92, 0.2),
      transparent 68%
    ),
    radial-gradient(
      ellipse 40% 34% at 78% 62%,
      rgba(122, 106, 160, 0.16),
      transparent 70%
    );
}

/* layer 2 — structural pattern, actually visible this time */
.z-sand::after,
.z-bone::after,
.z-rose::after,
.z-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.z-sand::after {
  background-image:
    linear-gradient(to right, rgba(36, 28, 43, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(36, 28, 43, 0.04) 1px, transparent 1px);
  background-size:
    72px 100%,
    100% 72px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, 0.35) 55%,
    transparent 92%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, 0.35) 55%,
    transparent 92%
  );
}
.z-bone::after {
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(36, 28, 43, 0.16) 1.4px,
    transparent 1.6px
  );
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(
    ellipse 80% 70% at 20% 4%,
    #000,
    transparent 76%
  );
  mask-image: radial-gradient(ellipse 80% 70% at 20% 4%, #000, transparent 76%);
}
.z-rose::after {
  background-image: repeating-linear-gradient(
    -38deg,
    transparent 0 22px,
    rgba(36, 28, 43, 0.05) 22px 23px
  );
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 78%);
  mask-image: linear-gradient(to top, #000 10%, transparent 78%);
}
.z-hero::after {
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(36, 28, 43, 0.15) 1.4px,
    transparent 1.6px
  );
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(
    ellipse 78% 66% at 68% 6%,
    #000,
    transparent 74%
  );
  mask-image: radial-gradient(ellipse 78% 66% at 68% 6%, #000, transparent 74%);
}

/* layer 3 — a large drawn arc, so the field has real geometry in it */
.arc {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid rgba(36, 28, 43, 0.1);
}
.arc--a {
  width: 780px;
  height: 780px;
  inset-inline-end: -240px;
  inset-block-start: -300px;
}
.arc--b {
  width: 560px;
  height: 560px;
  inset-inline-start: -190px;
  inset-block-end: -250px;
  border-color: rgba(201, 85, 47, 0.18);
}
.arc--c {
  width: 1080px;
  height: 1080px;
  inset-inline-end: -420px;
  inset-block-end: -620px;
  border-color: rgba(28, 106, 92, 0.14);
}
.on-dark .arc {
  border-color: rgba(241, 243, 237, 0.1);
}

/* dark zones get atmosphere too, and a real sheen */
.z-plum,
.z-teal,
.z-clay,
.z-ochre,
.band--dark {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.z-plum {
  background: var(--plum);
}
.z-plum::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 62% 50% at 84% -6%,
      rgba(211, 151, 31, 0.24),
      transparent 64%
    ),
    radial-gradient(
      ellipse 54% 46% at 4% 96%,
      rgba(122, 106, 160, 0.3),
      transparent 66%
    ),
    radial-gradient(
      ellipse 40% 34% at 46% 44%,
      rgba(201, 85, 47, 0.14),
      transparent 72%
    );
}
.z-teal::before,
.z-clay::before,
.z-ochre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 60% 48% at 88% 4%,
      rgba(255, 255, 255, 0.18),
      transparent 64%
    ),
    radial-gradient(
      ellipse 52% 44% at 6% 94%,
      rgba(0, 0, 0, 0.16),
      transparent 66%
    );
}
/* a fine sheen line across the top of dark bands: the "reflection" */
.z-plum::after,
.z-teal::after,
.z-clay::after,
.z-ochre::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 1px;
  z-index: -1;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35) 30%,
    rgba(255, 255, 255, 0.35) 70%,
    transparent
  );
}

/* ============================================================
   2. SOFT COLOUR TRANSITIONS
   Sections lift over the one above with a big top radius, so
   colour never meets colour on a hard straight edge.
   ============================================================ */
.band,
.photoband {
  position: relative;
}

.lift {
  margin-block-start: calc(var(--rad-lift) * -1);
  border-start-start-radius: var(--rad-lift);
  border-start-end-radius: var(--rad-lift);
  z-index: 2;
}
.lift-sm {
  margin-block-start: -26px;
  border-start-start-radius: 26px;
  border-start-end-radius: 26px;
  z-index: 2;
}
/* the reverse: a section whose BOTTOM is rounded, so the next one
   appears to slide underneath it */
.tuck {
  border-end-start-radius: var(--rad-lift);
  border-end-end-radius: var(--rad-lift);
  z-index: 2;
}

/* a soft gradient hand-off strip, for pairs that still meet flat */
.seam {
  height: 90px;
  margin-block-start: -90px;
  position: relative;
  z-index: 3;
  pointer-events: none;
}

/* ============================================================
   3. SHAPE VARIES PER PAGE
   Same components, different roundness, so pages feel distinct.
   ============================================================ */
body.p-home {
  --rad-card: 22px;
  --rad-soft: 30px;
  --rad-lift: 46px;
}
body.p-how {
  --rad-card: 8px;
  --rad-soft: 12px;
  --rad-lift: 0px;
}
body.p-dental {
  --rad-card: 34px;
  --rad-soft: 44px;
  --rad-lift: 60px;
}
body.p-vets {
  --rad-card: 14px;
  --rad-soft: 20px;
  --rad-lift: 30px;
}
body.p-demo {
  --rad-card: 26px;
  --rad-soft: 36px;
  --rad-lift: 52px;
}
body.p-price {
  --rad-card: 10px;
  --rad-soft: 16px;
  --rad-lift: 20px;
}
body.p-contact {
  --rad-card: 40px;
  --rad-soft: 52px;
  --rad-lift: 70px;
}

.console,
.out,
.player,
.plan,
.script,
.showcase {
  border-radius: var(--rad-card);
}
.vert,
.figframe {
  border-radius: var(--rad-soft);
}
.showcase {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

/* soften the remaining hard rectangles */
.chip {
  border-radius: 999px;
}
.call__av {
  border-radius: 40%;
}
.stats {
  border-radius: var(--r-sm);
  overflow: hidden;
}
.open-tag {
  border-radius: 999px;
}

/* ============================================================
   4. TYPE IN CARDS — the sizes that still read undersized
   ============================================================ */
.call__n {
  font-size: 16px;
}
.call__m {
  font-size: 14.5px;
}
.call__t {
  font-size: 13.5px;
}
.chip {
  font-size: 13.5px;
  padding: 6px 13px;
}
.app__h {
  font-size: 18.5px;
}
.app__count {
  font-size: 14px;
}
.app__nav span {
  font-size: 15px;
}
.app__title {
  font-size: 13.5px;
}
.console__meta .k {
  font-size: 12.5px;
}
.console__meta .v {
  font-size: 16.5px;
}
.console__t {
  font-size: 19px;
}
.bub {
  font-size: 16.5px;
}
.stat__k {
  font-size: 16px;
}
.plan__l li {
  font-size: 16.5px;
}
.tl__p {
  font-size: 16.5px;
}
.t-micro {
  font-size: 13px;
}
.script {
  font-size: 15.5px;
  line-height: 2;
}
.receipt__row {
  font-size: 17px;
}
.ticker__i {
  font-size: 15.5px;
}
.vs td {
  font-size: 16.5px;
}
.vs tbody th {
  font-size: 17px;
}
.rec__m {
  font-size: 15.5px;
}
.way__m {
  font-size: 16.5px;
}

/* ============================================================
   5. STATS — first cell must not vanish on a plum section
   ============================================================ */
.stats {
  background: var(--rule-hair);
  border: 0;
}
.stats > div {
  background: var(--paper);
}
.stats > div:first-child {
  background: var(--plum-2);
}
.on-dark .stats {
  background: var(--d-rule);
}
.on-dark .stats > div {
  background: var(--plum-deep);
  color: var(--d-text);
}
.on-dark .stats > div:first-child {
  background: var(--plum-2);
}
.on-dark .stat__n {
  color: var(--ochre);
}
.on-dark .stat__k {
  color: var(--d-soft);
}
.on-dark .stats > div:first-child .stat__n {
  color: var(--ochre);
}

/* ============================================================
   depth on cards: a soft inner sheen instead of flat fill
   ============================================================ */
.console,
.plan,
.out,
.player {
  background-image: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.5),
    transparent 46%
  );
}
.plan--lead,
.out {
  background-image: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.1),
    transparent 44%
  );
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
}

/* ---- console: centre sparse content instead of leaving a void ---- */
@media (min-width: 961px) {
  .panel.is-live { min-height: 415px; }
  .console__body { display: flex; flex-direction: column; justify-content: center; }
}

/* ---- background patterns must survive TALL sections ---- */
.z-sand::after {
  background-image:
    linear-gradient(to right, rgba(36,28,43,.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(36,28,43,.055) 1px, transparent 1px);
  background-size: 68px 68px, 68px 68px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.55) 75%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.55) 75%, transparent 100%);
}
/* washes repeat down a tall section so the middle is never empty */
.z-sand::before {
  background:
    radial-gradient(ellipse 46% 22% at 88% 6%,  rgba(201,85,47,.20), transparent 64%),
    radial-gradient(ellipse 42% 20% at 6% 32%,  rgba(28,106,92,.18), transparent 66%),
    radial-gradient(ellipse 44% 20% at 84% 58%, rgba(211,151,31,.18), transparent 66%),
    radial-gradient(ellipse 40% 18% at 12% 82%, rgba(122,106,160,.20), transparent 68%);
}
/* extra arcs scattered down long sections */
.arc--d { width: 640px; height: 640px; inset-inline-start: -220px; inset-block-start: 38%; border-color: rgba(211,151,31,.22); }
.arc--e { width: 900px; height: 900px; inset-inline-end: -380px; inset-block-start: 62%; border-color: rgba(122,106,160,.18); }

/* a faint hairline ruler down the page edge, so margins are not dead */
.z-sand > .wrap, .z-bone > .wrap { position: relative; }

/* ============================================================
   SCROLL SMOOTHNESS
   The jank came from compositing cost: backdrop-filter on the
   sticky nav plus blend modes plus masks all repaint every frame.
   Removed everything expensive that moves.
   ============================================================ */
.nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: color-mix(in srgb, var(--base) 96%, transparent);
}
.grain { display: none; }                 /* fixed overlay = full-page repaint */
.bgphoto { display: none; }               /* removed from markup too */
.arc { display: none; }                   /* the line, gone */
.tex-grid::before, .tex-dots::before { display: none; }

/* promote only the things that actually move */
.wilto__inner, .showcase, .vert { will-change: transform; }
.panel { will-change: opacity; }

/* ============================================================
   DOTS — larger, more visible, wider spacing
   ============================================================ */
.z-hero::after {
  background-image: radial-gradient(circle at 2px 2px, rgba(36,28,43,.30) 2.2px, transparent 2.4px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(ellipse 86% 78% at 62% 8%, #000, rgba(0,0,0,.5) 52%, transparent 84%);
          mask-image: radial-gradient(ellipse 86% 78% at 62% 8%, #000, rgba(0,0,0,.5) 52%, transparent 84%);
}
.z-bone::after {
  background-image: radial-gradient(circle at 2px 2px, rgba(36,28,43,.26) 2px, transparent 2.2px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 20% 6%, #000, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 70% at 20% 6%, #000, transparent 78%);
}
.z-sand::after {
  background-image: radial-gradient(circle at 2px 2px, rgba(36,28,43,.22) 2px, transparent 2.2px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.45) 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.45) 78%, transparent 100%);
}

/* ============================================================
   LANDING VIEW — the hero owns the first screen. No sliver of
   the next section peeking at the bottom.
   ============================================================ */
.z-hero {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(30px, 3.4vw, 52px) 0;
}
.z-hero .showcase {
  /* the product shot slides off the bottom edge deliberately,
     instead of the next section showing through */
  margin-bottom: -2px;
}
@media (max-width: 900px) {
  .z-hero { min-height: 0; padding-block: 34px 0; }
}

/* softer, shallower section overlap: the big lifts were creating
   the awkward peeking edges */
.lift { margin-block-start: -22px; border-start-start-radius: 26px; border-start-end-radius: 26px; }
.lift-sm { margin-block-start: -14px; border-start-start-radius: 16px; border-start-end-radius: 16px; }

/* ============================================================
   The overlapping rounded section edges created a notch where the
   band behind showed through the corner. Overlap removed; colour
   hand-off is done with a soft gradient fade instead.
   ============================================================ */
.lift, .lift-sm, .tuck {
  margin-block-start: 0 !important;
  border-start-start-radius: 0 !important;
  border-start-end-radius: 0 !important;
  border-end-start-radius: 0 !important;
  border-end-end-radius: 0 !important;
}

/* a soft tonal fade at the top of every band, so one colour eases
   into the next rather than butting against it on a hard line */
.band, .photoband { position: relative; }
.band::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 70px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.16), transparent);
}
.z-plum.band::before, .z-teal.band::before, .z-clay.band::before {
  background: linear-gradient(to bottom, rgba(255,255,255,.09), transparent);
}
.band > * { position: relative; z-index: 1; }

/* ============================================================
   PAGE TRANSITIONS — pages cross-fade into one another instead
   of snapping. Native where supported, JS fallback everywhere.
   ============================================================ */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: pageOut .26s cubic-bezier(.4,0,.2,1) both;
}
::view-transition-new(root) {
  animation: pageIn .42s cubic-bezier(.22,1,.36,1) both;
}
@keyframes pageOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } }

/* JS fallback for browsers without view transitions */
body { animation: pageIn .4s cubic-bezier(.22,1,.36,1) both; }
body.is-leaving { opacity: 0; transition: opacity .22s ease-out; }

@media (prefers-reduced-motion: reduce) {
  body, ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  body.is-leaving { transition: none; }
}

/* ============================================================
   SCROLL FEEL
   The reveals were "popping" as they crossed the threshold, which
   reads as sharpness even when the scroll itself is interpolating.
   Longer, gentler, and triggered earlier so motion finishes before
   the element reaches reading position.
   ============================================================ */
.will-rise {
  opacity: 0;
  transform: translateY(22px);
}
.will-rise.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}

/* the Wilto text and panel crossfades were snapping too */
.beat h3, .beat p, .beat .open-num {
  transition: color 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.panel { transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1); }

/* hero: no photograph, no dots. a clean colour field. */
.z-hero::after { display: none !important; }
.herophoto { display: none !important; }