/* The one pinned act: the customer's evening, the handoff, the contractor's morning.
   Every moving value is written by js/story.js from the act's lerped progress. */
.story { position: relative; background: var(--night); }
/* position stays with the engine (.sc-stage is sticky); a `position` here would silently unpin the act */
.story__stage { height: 100vh; height: 100svh; overflow: clip; isolation: isolate; }

/* ------------------------------------------------------------ the night: four planes and a shade */
.night { position: absolute; inset: 0; z-index: 1; color: var(--night-ink); background: var(--night); overflow: clip; transform-origin: 50% 0; }
.night__sky, .night__house {
  position: absolute; inset: -7% -5% -5% -5%; background: center / cover no-repeat;
  background-position: var(--focus, 72% 58%); will-change: transform;
}
.night__sky { background-image: url(../assets/sky.webp); }
.night__house { background-image: url(../assets/house.webp); transform-origin: 66% 72%; }
/* window light: breathes slowly, sits on the house plane's warm windows */
.night__glow {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(28% 22% at 66% 63%, rgba(255, 176, 84, .16), transparent 70%);
}
.night__branch {
  position: absolute; right: -6vw; top: -7vh; width: min(50vw, 820px); aspect-ratio: 3 / 2; pointer-events: none; scale: -1 1;
  background: url(../assets/branch.webp) left top / contain no-repeat; filter: blur(1.5px); will-change: transform, opacity; z-index: 4;
}
/* dawn: as the paper rises, the receding night warms like the sky before sunrise */
.night__dawn { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: soft-light;
  background: linear-gradient(to top, rgba(255, 150, 70, .95), rgba(255, 196, 120, .55) 45%, rgba(120, 160, 255, .2)); }
/* the photo's top edge starts as exactly the status-bar colour, so Safari's paint and the page meet without a seam */
.night__top, .night__floor { display: none; }
@media (hover: none) and (pointer: coarse) {
  /* Safari extends one flat colour above the page; over a photo that only disappears if the page's top is that colour
     and the scene deepens into it gradually (an eased ramp over the sky, like a real night sky darkest overhead).
     A short fade leaves detail right under the flat area and reads as a bar on the device. */
  /* drawn in the live edge colour (--edge-top, written by story.js), above the 9:42 dim: at night it is the sky's own
     top, and through the morning it washes the sky with the same dawn colour Safari is painting above the page */
  .night__top { display: block; position: absolute; inset: 0 0 auto 0; height: 46svh; z-index: 3; pointer-events: none;
    background: linear-gradient(to bottom,
      var(--edge-top, var(--top-tint)) 0%,
      color-mix(in srgb, var(--edge-top, var(--top-tint)) 94%, transparent) 10%,
      color-mix(in srgb, var(--edge-top, var(--top-tint)) 80%, transparent) 24%,
      color-mix(in srgb, var(--edge-top, var(--top-tint)) 58%, transparent) 42%,
      color-mix(in srgb, var(--edge-top, var(--top-tint)) 32%, transparent) 62%,
      color-mix(in srgb, var(--edge-top, var(--top-tint)) 12%, transparent) 82%,
      transparent 100%); }
  .night__branch { top: calc(var(--bar-h) + 1vh); }
  /* the pinned scene sticks 13px below the top edge: Safari's probe (~4px in) then finds the page, not a pinned box,
     and extends the page background, which story.js keeps equal to the scene's top. The 13px is that same colour. */
  /* 13px clear of the top AND bottom edges (a pinned box touching either edge is copied by Safari, and the colour
     sticks); the bottom margin makes the pin end exactly when the act's bottom reaches the viewport's (p = 1) */
  .story .story__stage { top: 13px; height: calc(100svh - 26px); margin-bottom: 13px; }
  /* once the pin is over, the stage leaves as ordinary content (a sticky box sliding off the top is copied by Safari) */
  /* no dark shadow cast up onto the sky as the paper rises: it read as a dark band under the logo mid-dawn */
  .story .morning { box-shadow: 0 -1px 0 rgba(255, 255, 255, .5); }
  .story .story__stage.is-past { position: relative; top: 0; transform: translate3d(0, var(--past-y, 0px), 0); }
  /* the scene sinks into the same colour at the bottom edge, above the phone, so the phone rises out of the dark */
  .night__floor { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 7; pointer-events: none;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--edge-c, var(--top-tint)) 55%, transparent) 45%, var(--edge-c, var(--top-tint)) 92%); }
}
/* density only where the copy sits, and a floor under the phone */
.night__shade {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(60% 75% at 12% 42%, rgba(6, 12, 22, .62), transparent 70%),
    linear-gradient(to top, rgba(6, 10, 16, .78), transparent 34%);
}

.hero {
  position: absolute; z-index: 3; left: var(--sc-gutter); top: calc(var(--bar-h) + clamp(5vh, 9vh, 120px));
  width: min(44vw, 640px); will-change: transform, opacity;
}
.hero__title {
  margin: 0; font: 760 clamp(3rem, 1.3rem + 4.1vw, 5.6rem)/.98 var(--sc-font-display); letter-spacing: -.04em; text-wrap: balance;
  font-variation-settings: 'opsz' 96;
}
.hero__title span { color: var(--lime); }
.hero__sub { margin: clamp(18px, 2.4vh, 28px) 0 0; max-width: 31rem; font-size: clamp(17.5px, 1rem + .35vw, 20.5px); line-height: 1.5; color: #dfe4ec; text-wrap: pretty; }
.hero__act { margin-top: clamp(24px, 3.4vh, 40px); display: flex; align-items: center; gap: 18px; }
.hero__free { font: 540 15px/1.3 var(--sc-font-text); color: var(--night-soft); }
.hero .btn { --bg: var(--lime); --fg: var(--lime-ink); --edge: #7aa82a; }

.hint {
  position: absolute; z-index: 3; margin: 0; display: flex; align-items: center; gap: 10px;
  right: calc(100vw - var(--rig-x) + 14px); top: calc(var(--rig-y) + 420px * var(--rig-k, 1));
  font: 640 15.5px/1.35 var(--sc-font-text); color: #f4f1ea; text-align: right;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 18px rgba(4, 8, 14, .9); will-change: opacity;
}
.hint::before { content: ''; position: absolute; inset: -26px -20px -26px -60px; z-index: -1; background: radial-gradient(closest-side, rgba(5, 9, 16, .7), transparent); }
.hint__arrow { width: 62px; height: 30px; overflow: visible; order: 2; flex: none; }
.hint__arrow path { fill: none; stroke: var(--lime); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.night__line {
  position: absolute; z-index: 3; left: var(--sc-gutter); top: 50%; margin: 0; translate: 0 -50%;
  font: 740 clamp(2.6rem, 1.4rem + 3.4vw, 4.8rem)/1 var(--sc-font-display); letter-spacing: -.035em; opacity: 0;
  max-width: 40vw; text-wrap: balance;
}
.night__line .t, .morning__title .t { display: block; color: var(--lime); font-variant-numeric: tabular-nums; }
.morning__title .t { color: var(--green); }

/* ------------------------------------------------------------ the morning: a sheet of paper slides over the night */
.morning {
  position: absolute; inset: 0; z-index: 5; transform: translateY(102%); will-change: transform;
  background: var(--paper-desk); background-color: var(--desk);
  box-shadow: 0 -30px 60px -10px rgba(0, 0, 0, .55), 0 -1px 0 rgba(255, 255, 255, .6);
  display: grid; grid-template-columns: minmax(0, 27fr) minmax(0, 70fr); gap: clamp(28px, 4vw, 64px);
  padding: calc(var(--bar-h) + 4vh) var(--sc-gutter) 5vh; align-items: center;
}
.morning__copy { align-self: center; will-change: opacity, transform; }
/* the first light of the morning crosses the desk once, then settles as warmth */
.morning__sun { position: absolute; inset: -30% -20%; pointer-events: none; z-index: 0; will-change: transform, opacity;
  background: radial-gradient(38% 30% at 72% 30%, rgba(255, 214, 150, .5), rgba(255, 220, 160, .14) 55%, transparent 75%); }
.morning > :not(.morning__sun) { position: relative; z-index: 1; }
.hint span { transition: opacity .25s var(--ease); }
.hint.is-replied span { color: var(--lime); }
.morning__title { margin: 0; font: 740 clamp(2.2rem, 1.3rem + 2vw, 3.5rem)/1.02 var(--sc-font-display); letter-spacing: -.035em; text-wrap: balance; }
.morning__sub { margin: 20px 0 0; font-size: clamp(17px, 1rem + .25vw, 19px); line-height: 1.55; color: var(--sc-ink-soft); max-width: 26rem; }

/* the Today board: the app's own idiom, at app scale */
.board { padding: clamp(18px, 2.2vw, 30px); align-self: center; box-shadow: var(--e3); }
.board__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; }
.board__date { margin: 0; font: 560 13.5px/1.2 var(--sc-font-text); color: var(--sc-ink-soft); }
.board__title { margin: 2px 0 0; font: 760 clamp(2rem, 1.4rem + 1.2vw, 2.7rem)/1 var(--sc-font-display); letter-spacing: -.04em; }
.board__sample { display: inline-flex; align-items: center; gap: 7px; font: 560 12.5px/1 var(--sc-font-text); color: var(--sc-ink-soft); background: var(--sheet-2); border: 1px dashed var(--rule-2); padding: 7px 10px; border-radius: 999px; }
.board__stats { display: flex; align-items: stretch; gap: 0; margin: -4px 0 18px; border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet-2); }
.board__stats > div { padding: 10px 16px; border-left: 1px solid var(--rule); }
.board__stats > div:first-child { border-left: 0; }
.board__stats dt { font: 560 12px/1.2 var(--sc-font-text); color: var(--sc-ink-soft); }
.board__stats dd { margin: 4px 0 0; font: 760 22px/1 var(--sc-font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.board__spark { margin-left: auto; display: flex; align-items: flex-end; gap: 4px; padding-block: 12px !important; }
.board__spark i { width: 9px; height: calc(var(--h) * 34px); border-radius: 2px; background: #cfc6b2; transition: height .4s var(--spring), background-color .3s; }
.board.is-tallied .board__spark i.is-new { height: 22px; background: var(--green); }
.board__body { display: grid; grid-template-columns: minmax(0, 1fr) 214px; gap: 22px; align-items: start; }

.orders { display: grid; gap: 14px; }
.order {
  --blue: #22437f; position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 18px;
  padding: 16px 20px 16px 0; background: #fffdf9; border-radius: 3px;
  box-shadow: 4px 5px 0 -1px #f3e5a3, 8px 10px 0 -2px #f1c6ce, var(--e2);
}
/* the carbon copies underneath (canary, pink) are the two offset box-shadows above */
.order--old { box-shadow: var(--e1); }
.order__time { display: grid; justify-items: center; align-content: start; padding-top: 22px; border-right: 1.5px dashed var(--rule-2); }
.order__time b { font: 600 17px/1 var(--sc-font-mono); letter-spacing: -.02em; }
.order__time span { font: 500 11.5px/1.3 var(--sc-font-text); color: var(--sc-ink-soft); margin-top: 6px; text-align: center; }
.order__top { display: flex; justify-content: space-between; gap: 12px; }
.order__no { margin: 0; font: 600 13px/1.2 var(--sc-font-text); color: #a52a22; }
.order__kind { margin: 0; font: 520 13px/1.2 var(--sc-font-text); color: var(--sc-ink-soft); }
.order__line { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 6px 0 12px; }
.order__who { margin: 0; font: 740 clamp(1.3rem, 1rem + .7vw, 1.65rem)/1.1 var(--sc-font-display); letter-spacing: -.025em; }
.order__who span { font: 500 14px var(--sc-font-text); color: var(--sc-ink-soft); letter-spacing: 0; margin-left: 6px; }
.order__fields { margin: 0; display: grid; grid-template-columns: 1.25fr 1fr .9fr; border: 1px solid var(--rule-2); }
.order__fields div { padding: 9px 12px; border-left: 1px solid var(--rule-2); min-width: 0; }
.order__fields div:first-child { border-left: 0; }
.order__fields dt { font: 520 12px/1.2 var(--sc-font-text); color: var(--sc-ink-soft); }
.order__fields dd { margin: 4px 0 0; font: 620 15.5px/1.2 var(--sc-font-text); color: var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.order__photos { display: flex; align-items: center; gap: 6px; }
.order__photos img { width: 46px; height: 46px; object-fit: cover; border: 3px solid #fff; box-shadow: var(--e1); border-radius: 2px; }
.order__photos img + img { transform: rotate(2deg); }
.order__photos span { margin-left: 6px; font: 540 13px/1.2 var(--sc-font-text); color: var(--sc-ink-soft); }
.order__quote { display: grid; justify-items: end; flex: none; }
.order__quote span { font: 540 13px/1 var(--sc-font-text); color: var(--sc-ink-soft); }
.order__quote b { margin-top: 6px; font: 780 clamp(1.7rem, 1.2rem + 1vw, 2.35rem)/1 var(--sc-font-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.order__stamp { position: absolute; right: 28px; top: -17px; --rot: -4deg; opacity: 0; background: rgba(255, 253, 249, .55); }
.order__handled { position: absolute; left: 40%; top: 36%; --rot: -9deg; opacity: 0; }
.order--yours.is-new .order__stamp { animation: stamp-land .34s var(--spring) both; }
.order--yours.is-handled .order__stamp { opacity: 0; animation: none; }
.order--yours.is-handled .order__handled { animation: stamp-land .34s var(--spring) both; }
.order--old { opacity: .72; padding-block: 12px; }
.order--old .order__line { margin-bottom: 0; } .order--old .order__who { font-size: 1.15rem; }
.order--old .order__time { padding-top: 14px; }
.order--old .order__quote b { font-size: 1.5rem; }

.rail { display: grid; gap: 16px; }
.needs {
  padding: 16px 16px 18px; border-radius: 1px 1px 3px 18px / 1px 1px 3px 6px;
  background: linear-gradient(170deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 40%), #fbe27a;
  box-shadow: 0 1px 1px rgba(70, 55, 25, .12), 0 14px 18px -12px rgba(70, 55, 25, .45);
}
.needs__title { margin: 0 0 10px; font: 750 18px/1 var(--sc-font-display); letter-spacing: -.02em; display: flex; gap: 8px; align-items: center; }
.needs__title span { font: 700 11px var(--sc-font-mono); background: rgba(0, 0, 0, .09); padding: 3px 6px; border-radius: 4px; }
.needs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.needs li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font: 560 13.5px/1.35 var(--sc-font-text); }
.needs .box { width: 14px; height: 14px; margin-top: 2px; border: 1.6px solid #3b3520; border-radius: 3px; }
.needs__new { opacity: 0; transform: translateY(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.is-needs .needs__new { opacity: 1; transform: none; }

.tape {
  --tear: 7px; position: relative; padding: 14px 16px calc(14px + var(--tear)); background: #fbfaf5;
  font: 500 12.5px/1.75 var(--sc-font-mono); color: #2b2a26; box-shadow: var(--e2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tear)), 92% 100%, 84% calc(100% - var(--tear)), 76% 100%, 68% calc(100% - var(--tear)), 60% 100%, 52% calc(100% - var(--tear)), 44% 100%, 36% calc(100% - var(--tear)), 28% 100%, 20% calc(100% - var(--tear)), 12% 100%, 4% calc(100% - var(--tear)), 0 100%);
}
.tape__row { margin: 0; display: flex; justify-content: space-between; gap: 10px; position: relative; }
.tape__head { border-bottom: 1px dashed #c9c3b4; margin-bottom: 4px; padding-bottom: 2px; }
.tape__add { opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.is-tallied .tape__add { opacity: 1; transform: none; }
.tape__total { color: #b3261e; border-top: 1px dashed #c9c3b4; margin-top: 4px; padding-top: 2px; font-weight: 700; }
.tape__total i { position: absolute; right: -10px; font-style: normal; }

/* ------------------------------------------------------------ the phone (shared with the spec section) */
.phone-rig { position: absolute; z-index: 6; left: var(--rig-x); top: var(--rig-y); width: 300px; height: 620px; transform-origin: 0 0; will-change: transform, opacity; }
.story { --rig-k: min(1, calc((100svh - var(--bar-h) - 40px) / 640px)); }
.story__stage { --rig-x: max(calc(50vw + 40px), calc(100vw - var(--sc-gutter) - 360px)); --rig-y: calc(var(--bar-h) + 3vh); }

@media (max-width: 1100px) {
  .hero { width: min(52vw, 560px); }
  .hint { display: none; }
}

/* ------------------------------------------------------------ phones: art-directed, not shrunk */
@media (max-width: 760px) {
  .night__sky, .night__house { --focus: 74% 64%; inset: -4% -4% -3% -4%; }
  .night__branch { display: none; }
  .night__shade { background: linear-gradient(to bottom, rgba(6, 12, 22, .72), rgba(6, 12, 22, .35) 46%, transparent 62%), linear-gradient(to top, rgba(6, 10, 16, .8), transparent 30%); }
  .hero { top: calc(var(--bar-h) + 3vh); width: auto; right: var(--sc-gutter); }
  .hero__title { font-size: clamp(2.3rem, 1rem + 6.6vw, 3rem); }
  .hero__sub { font-size: 16.5px; margin-top: 12px; }
  .hero__act { margin-top: 18px; }
  .hero__act .btn--lg { height: 46px; padding: 0 18px; font-size: 15.5px; }
  .story__stage { --rig-x: calc(50vw - 150px); --rig-y: calc(100svh - 300px); }
  .night__line { left: var(--sc-gutter); right: var(--sc-gutter); max-width: none; top: calc(var(--bar-h) + 18px); translate: none; font-size: 2.3rem; }
  .morning { grid-template-columns: 1fr; align-content: start; gap: 18px; padding: calc(var(--bar-h) + 2.5vh) 14px 2vh; }
  .morning__title { font-size: 1.9rem; }
  .morning__sub { font-size: 15.5px; margin-top: 10px; }
  .board { padding: 14px; }
  .board__head { padding-bottom: 10px; margin-bottom: 12px; }
  .board__title { font-size: 1.6rem; }
  .board__sample { display: none; }
  .board__stats > div { padding: 8px 10px; } .board__stats dd { font-size: 18px; } .board__spark { display: none !important; }
  .board__body { grid-template-columns: 1fr; gap: 12px; }
  .rail { display: none; }
  .order { grid-template-columns: minmax(0, 1fr) auto; padding: 14px; }
  .order__time { display: none; }
  .order__top { flex-direction: column; gap: 2px; }
  .order__fields { grid-template-columns: 1fr 1fr 1fr; }
  .order__fields div { padding: 7px 8px; }
  .order__fields dd { font-size: 13.5px; }
  .order__foot { flex-wrap: wrap; }
  .order__stamp { right: 12px; top: -14px; font-size: 15px; }
  .order--old { display: none; }
  .order__quote { grid-column: 2; grid-row: 1; padding-top: 0; }
  .order__main { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 760px) and (max-height: 700px) { .hero__sub { display: none; } }