/* Home page only: the product scene in the first screen, the pinned story below it, and the Dashboard trend chart.
   Loaded after site.css. Sections: 1 the scene, 2 how it fills in, 3 the first screen, 4 the pinned story,
   5 the trend chart, 6 print.
   What moves by itself (the scene, the two glows) stops with the "Pause motion" button. With reduced motion the
   same things happen as fades: nothing travels, types or scales. */

/* 1. The scene: paper cards on a dark stage. The stage is dark in both themes, so these colours do not change with the theme. */
.scene { container: scene / inline-size; display: grid; }
.stage { --p-ink: #0F172A; --p-body: #334155; --p-muted: #475569; --p-line: #E2E8F0; --p-amber: #F59E0B; --p-ok: #047857; --dx: 0px; --dy: 4rem;
  position: relative; display: grid; gap: 1rem; align-items: start; font-size: .9375rem; line-height: 1.35; color: var(--p-body); }
.pv-card { position: relative; min-width: 0; padding: 1rem 1.1rem; border-radius: .75rem; background: #fff; color: var(--p-body);
  box-shadow: 0 1px 1px rgba(2, 6, 23, .25), 0 6px 12px -4px rgba(2, 6, 23, .35), 0 26px 44px -18px rgba(2, 6, 23, .7); }
.pv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .55rem; border-bottom: 2px solid var(--p-ink); }
.pv-kind, .pv-no { display: inline-grid; }
.pv-kind > *, .pv-no > * { grid-area: 1 / 1; }
.pv-no > * { justify-self: end; }
.pv-kind { font-family: var(--font-head); font-weight: 700; font-size: 1.39em; line-height: 1.1; color: var(--p-ink); }
.pv-no { font-size: .933em; color: var(--p-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-kind__q, .pv-no__q { opacity: 0; }
.pv-party { display: grid; gap: .1rem; padding-block: .55rem; }
.pv-party, .pv-line, .pv-tot, .pv-lrow { margin-inline: -.45rem; padding-inline: .45rem; border-radius: .3rem; }
.pv-lab { font-size: .867em; color: var(--p-muted); }
.pv-type { justify-self: start; color: var(--p-ink); font-weight: 600; }
.pv-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.6rem; gap: .75rem; padding-block: .4rem; border-top: 1px solid var(--p-line); font-variant-numeric: tabular-nums; }
.pv-line span:nth-child(2) { color: var(--p-muted); white-space: nowrap; }
.pv-line span:last-child, .pv-tot span:last-child { text-align: right; color: var(--p-ink); }
.pv-tot { display: flex; justify-content: space-between; gap: 1rem; padding-block: .25rem; font-variant-numeric: tabular-nums; }
.pv-taxable { border-top: 1px solid var(--p-line); padding-top: .5rem; }
.pv-split { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; height: 1.6rem; margin-block: .45rem .3rem; border-radius: .35rem; overflow: hidden;
  font-size: .867em; font-weight: 600; color: var(--p-ink); text-align: center; }
.pv-split > * { grid-row: 1; }
.pv-split__a, .pv-split__b { align-self: stretch; background: var(--p-amber); }
.pv-split__a { grid-column: 1; }
.pv-split__b { grid-column: 2; background: #FCD34D; }
.pv-split::after { content: ""; position: absolute; inset-block: 0; left: calc(50% - 2px); width: 4px; background: #fff; }
.pv-split__w { grid-column: 1 / -1; opacity: 0; }
.pv-split__l { grid-column: 1; }
.pv-split__r { grid-column: 2; }
.pv-grand { margin-top: .3rem; padding-top: .5rem; border-top: 2px solid var(--p-ink); font-weight: 700; font-size: 1.133em; color: var(--p-ink); }
.pv-stamp, .pv-gfoot { display: flex; align-items: center; gap: .45rem; margin-top: .55rem; font-size: .933em; font-weight: 600; color: var(--p-ok); }
.pv-tick { position: relative; flex: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--p-ok); }
.pv-tick::after { content: ""; position: absolute; left: .34rem; top: .17rem; width: .26rem; height: .5rem; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; }
.pv-title { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .55rem; align-items: center; padding-bottom: .5rem; border-bottom: 1px solid var(--p-line);
  font-family: var(--font-head); font-weight: 700; font-size: 1.173em; line-height: 1.15; color: var(--p-ink); }
.pv-title .icon { grid-row: 1 / span 2; width: 1.4rem; height: 1.4rem; }
.pv-title small { grid-column: 2; font-family: var(--font); font-weight: 500; font-size: .739em; color: var(--p-muted); }
.pv-lrow, .pv-grow { display: grid; gap: .75rem; padding-block: .4rem; border-bottom: 1px solid var(--p-line); font-size: .933em; font-variant-numeric: tabular-nums; }
.pv-lrow { grid-template-columns: minmax(0, 1fr) auto; }
.pv-lrow span:last-child { color: var(--p-ink); white-space: nowrap; }
.pv-lbal { border-bottom: 0; padding-bottom: 0; font-weight: 700; color: var(--p-ink); }
.pv-grow { grid-template-columns: minmax(0, 1fr) 5em 4.4em; gap: .5rem; }
.pv-grow span:first-child { white-space: nowrap; }
.pv-grow span:not(:first-child) { text-align: right; }
.pv-ghead { font-size: .929em; color: var(--p-muted); }
.pv-g1 { margin-inline: -.45rem; padding-inline: .45rem; border-bottom: 0; border-radius: .3rem; background: #FEF3C7; color: var(--p-ink); }
.pv-pay { position: absolute; z-index: 3; top: -1.1rem; right: .6rem; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem .4rem .5rem; border-radius: 999px;
  background: #ECFDF5; color: #065F46; font-size: .933em; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none;
  box-shadow: 0 1px 1px rgba(2, 6, 23, .3), 0 10px 20px -8px rgba(2, 6, 23, .7); }
.pv-pay .icon { width: 1.3rem; height: 1.3rem; }
.pv-pay b { color: #064E3B; font-variant-numeric: tabular-nums; }
.pv-sample { margin: 0 0 .6rem; font-size: .875rem; color: #CBD5E1; }

/* wide enough: the invoice on the left, the ledger and the GST data in a column on the right. No card touches another. */
@container scene (min-width: 35rem) {
  .stage { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1.25rem; }
  @container scene (max-width: 38.99rem) { .stage { font-size: .8125rem; } }
  .pv-sheet { grid-row: 1 / span 2; }
}

/* 2. Every card is complete at every moment. Without .is-live that is all there is: the finished scene, which is what
   shows with no script, when motion is paused, and to visitors who ask for reduced motion.
   With .is-live the scene has a current step (data-stage 1 to 4). The step's card is lit and lifted, the others step
   back to a paler paper with every word still readable, and the step's own moment replays inside the finished card. */
.pv-card { outline: 2px solid transparent; outline-offset: 2px; }
.is-live .pv-card { background-color: #E9EEF5; box-shadow: 0 1px 1px rgba(2, 6, 23, .25), 0 6px 12px -6px rgba(2, 6, 23, .45);
  transition: background-color .45s ease-out, box-shadow .45s ease-out, outline-color .3s ease-out, translate .45s cubic-bezier(.2, .7, .2, 1), scale .45s cubic-bezier(.2, .7, .2, 1), opacity .45s ease-out, visibility 0s; }
.is-live:is([data-stage="1"], [data-stage="2"]) .pv-sheet, .is-live[data-stage="3"] .pv-ledger, .is-live[data-stage="4"] .pv-gstr {
  background-color: #fff; outline-color: #FBBF24; translate: 0 -.25rem;
  box-shadow: 0 1px 1px rgba(2, 6, 23, .25), 0 10px 18px -6px rgba(2, 6, 23, .45), 0 34px 54px -18px rgba(2, 6, 23, .8); }
/* step 1, the invoice: its rows light up from top to bottom, as they are entered */
.is-live[data-stage="1"] :is(.pv-party, .pv-l1, .pv-l2, .pv-taxable) { animation: pv-mark 1.2s ease-out; }
.is-live[data-stage="1"] .pv-l1 { animation-delay: .45s; }
.is-live[data-stage="1"] .pv-l2 { animation-delay: .9s; }
.is-live[data-stage="1"] .pv-taxable { animation-delay: 1.35s; }
/* step 2, the GST split: the one bar is cut in two, and the two tax lines and the total light up */
.is-live[data-stage="2"] .pv-split::after { animation: pv-cut .7s cubic-bezier(.2, .7, .2, 1) .5s backwards; }
.is-live[data-stage="2"] .pv-split__b { animation: pv-tint .7s ease-out .5s backwards; }
.is-live[data-stage="2"] :is(.pv-split__l, .pv-split__r) { animation: pv-in .4s ease-out .8s backwards; }
.is-live[data-stage="2"] .pv-split__w { animation: pv-out .3s ease-out .5s backwards; }
.is-live[data-stage="2"] :is(.pv-cgst, .pv-sgst, .pv-grand) { animation: pv-mark 1.2s ease-out 1.1s; }
.is-live[data-stage="2"] .pv-sgst { animation-delay: 1.3s; }
.is-live[data-stage="2"] .pv-grand { animation-delay: 1.6s; }
/* step 3, the payment: it arrives, travels into the ledger, and the receipt and the balance light up */
.is-live[data-stage="3"] .pv-pay { animation: pv-fly 2s cubic-bezier(.4, 0, .2, 1) .25s both; }
.is-live[data-stage="3"] :is(.pv-lr2, .pv-lbal) { animation: pv-mark-ok 1.4s ease-out 1.75s; }
.is-live[data-stage="3"] .pv-lbal { animation-delay: 2.05s; }
/* step 4, the GST data: the invoice's row lights up and the tick lands */
.is-live[data-stage="4"] .pv-g1 { animation: pv-mark-row 1.4s ease-out .4s; }
.is-live[data-stage="4"] .pv-gfoot .pv-tick { animation: pv-pop .5s cubic-bezier(.3, 1.6, .5, 1) .9s backwards; }
@keyframes pv-mark { 0% { background-color: transparent; } 18% { background-color: #FDE68A; } 100% { background-color: transparent; } }
@keyframes pv-mark-ok { 0% { background-color: transparent; } 18% { background-color: #A7F3D0; } 100% { background-color: transparent; } }
@keyframes pv-mark-row { 0% { background-color: #FEF3C7; } 18% { background-color: #FCD34D; } 100% { background-color: #FEF3C7; } }
@keyframes pv-cut { from { scale: 0 1; } }
@keyframes pv-tint { from { background-color: var(--p-amber); } }
@keyframes pv-in { from { opacity: 0; } }
@keyframes pv-out { from { opacity: 1; } }
@keyframes pv-pop { from { scale: 0; } }
@keyframes pv-fly {
  0% { opacity: 0; translate: 0 -.9rem; }
  14%, 48% { opacity: 1; translate: none; scale: 1; }
  86% { opacity: 1; translate: var(--dx) var(--dy); scale: .7; }
  100% { opacity: 0; translate: var(--dx) var(--dy); scale: .6; }
}
/* the story further down the page starts from a quotation: the same sheet under another name, its GST not yet split */
.pv-kind > *, .pv-no > * { transition: opacity .4s ease-out, translate .4s ease-out; }
.is-quote .pv-kind__q, .is-quote .pv-no__q { opacity: 1; }
.is-quote .pv-kind__i, .is-quote .pv-no__i { opacity: 0; translate: 0 -.5rem; }
.is-live:not(.is-quote) .pv-kind__q, .is-live:not(.is-quote) .pv-no__q { translate: 0 .5rem; }
.is-live .pv-split::after { transition: scale .5s cubic-bezier(.2, .7, .2, 1); }
.is-live .pv-split > * { transition: opacity .4s ease-out, background-color .5s ease-out; }
.is-quote .pv-split::after { scale: 0 1; }
.is-quote .pv-split__b { background-color: var(--p-amber); }
.is-quote :is(.pv-split__l, .pv-split__r) { opacity: 0; }
.is-quote .pv-split__w { opacity: 1; }
.is-quote .pv-stamp { visibility: hidden; }

/* on a phone the step buttons and the pause button sit above the cards: pausing shows all three cards one under the
   other, and with the buttons above them nothing the visitor is touching moves when that happens */
@container scene (max-width: 34.99rem) { .scene__bar { order: -1; margin: 0 0 .9rem; } .scene > .pv-sample { order: -2; } }

/* a narrow stage (a phone) shows one card in front at a time: the invoice, then the ledger laid over it, then the GST data */
@container scene (max-width: 34.99rem) {
  :is(.js .story .stage, .js:not(.motion-paused) [data-scene] .stage) > .pv-card { grid-area: 1 / 1; }
  :is(.js .story .stage, .js:not(.motion-paused) [data-scene] .stage) > :is(.pv-ledger, .pv-gstr) { z-index: 2; align-self: center; margin-inline: .9rem; }
  :is(.js .story .stage, .js:not(.motion-paused) [data-scene] .stage):not([data-stage="3"]) > .pv-ledger,
  :is(.js .story .stage, .js:not(.motion-paused) [data-scene] .stage):not([data-stage="4"]) > .pv-gstr { opacity: 0; visibility: hidden; translate: 0 1.5rem; transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, .45s; }
  :is(.js .story .stage, .js:not(.motion-paused) [data-scene] .stage):is([data-stage="3"], [data-stage="4"]) > .pv-sheet { scale: .96; }
}

/* reduced motion. The first screen does not play: it is the finished scene, all three cards, on a phone too.
   The story still follows the reader's scrolling, by fading only: nothing travels, lifts or flashes. */
@media (prefers-reduced-motion: reduce) {
  .stage *, .stage *::after { animation: none !important; }
  .is-live .pv-card, .is-live .pv-pay, .pv-kind > *, .pv-no > * { translate: none !important; scale: none !important; }
  @container scene (max-width: 34.99rem) {
    .js [data-scene] .stage > .pv-card { grid-area: auto !important; z-index: auto !important; margin-inline: 0 !important; opacity: 1 !important; visibility: visible !important; }
  }
}

/* 3. The first screen */
.hero--scene { padding-block: clamp(2.25rem, 5vw, 4rem) clamp(1.75rem, 4vw, 2.75rem); }
.hero--scene::before, .hero--scene::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.hero--scene::before { width: 52rem; height: 52rem; top: -30rem; right: -16rem; background: radial-gradient(closest-side, rgba(245, 158, 11, .3), rgba(245, 158, 11, 0)); }
.hero--scene::after { width: 46rem; height: 46rem; bottom: -30rem; left: -18rem; background: radial-gradient(closest-side, rgba(71, 104, 160, .34), rgba(71, 104, 160, 0)); }
.hero--scene .hero__grid { gap: clamp(2.25rem, 5vw, 3.5rem); }
.hero--scene h1 { color: #fff; font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem); line-height: 1; }
.hero--scene .lede { margin-top: 1.25rem; max-width: 34rem; color: var(--band-muted); }
.hero--scene .actions { margin-top: 1.75rem; }
.hero--scene .hero__login { color: var(--band-muted); }
@media (max-width: 71.99rem) { .hero--scene .hero__grid { grid-template-columns: minmax(0, 1fr); } }   /* below this the scene goes under the words, at full width */
@media (min-width: 72rem) { .hero--scene .hero__grid { grid-template-columns: minmax(0, 4.8fr) minmax(0, 6.4fr); } }
@media (min-width: 80rem) { .hero--scene .scene { margin-right: -3.5rem; } }   /* the scene reaches a little past the column edge */
@media (prefers-reduced-motion: no-preference) {
  .hero--scene::before { animation: hero-glow 22s ease-in-out infinite alternate; }
  .hero--scene::after { animation: hero-glow 28s ease-in-out infinite alternate-reverse; }
  .motion-paused .hero--scene::before, .motion-paused .hero--scene::after { animation-play-state: paused; }
}
@keyframes hero-glow { to { translate: -5rem 4rem; scale: 1.15; } }
/* under the scene: jump to a step, and the pause button */
.scene__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; min-height: 2.75rem; margin-top: 1.25rem; }
.scene__steps { display: flex; flex-wrap: wrap; gap: .4rem; }
.scene__steps button { min-height: 2.75rem; padding: .35rem .85rem; border: 1px solid #475569; border-radius: 999px; background: transparent; color: var(--band-muted);
  font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.scene__steps button:hover { color: #fff; border-color: #fff; }
.scene__steps button[aria-current] { background: #FBBF24; border-color: #FBBF24; color: #0F172A; }
.band .motion-toggle { background: transparent; color: var(--band-muted); border-color: #64748B; }
.band .motion-toggle:hover { color: #fff; border-color: #fff; }

/* 4. The pinned story: the stage stays in view while the four steps pass it */
.story { display: grid; gap: 1.5rem; }
.story__stage { padding: clamp(1.4rem, 3vw, 2rem) clamp(.9rem, 2.5vw, 1.75rem) clamp(1rem, 2.5vw, 1.5rem); border-radius: 1.1rem; background: var(--band);
  background-image: radial-gradient(40rem 26rem at 100% 0%, rgba(245, 158, 11, .2), transparent 70%), radial-gradient(34rem 24rem at 0% 100%, rgba(64, 104, 178, .3), transparent 70%); }
.story__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.story__steps li { padding-left: 1.5rem; border-left: 3px solid var(--line); }
.story__steps h3 { font-size: 1.6rem; }
.story__steps p { margin-top: .5rem; max-width: 30rem; }
.story__n { display: block; margin-bottom: .35rem; font-size: .9375rem; font-weight: 600; color: var(--muted); }
.js .story__steps li { transition: border-color .35s ease-out; }
.js .story__steps li.is-on { border-left-color: var(--amber); }
/* how far through the four steps the reader is: a line in the pinned stage, moved by the list of steps beside it.
   The list is not an ancestor of the line, so its timeline is made visible to both from the story around them. */
.story__bar { display: none; height: 3px; margin-bottom: .9rem; border-radius: 2px; background: rgba(148, 163, 184, .3); overflow: hidden; }
.story__bar i { display: block; height: 100%; background: #FBBF24; transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%) and (timeline-scope: --steps)) {
    .js .story { timeline-scope: --steps; }
    .js .story__steps { view-timeline: --steps block; view-timeline-inset: 78% 22%; }   /* the same line the steps change on */
    .js .story__bar { display: block; }
    .js .story__bar i { animation: story-fill linear both; animation-timeline: --steps; }
    @media (min-width: 62rem) { .js .story__steps { view-timeline-inset: 50%; } }
  }
}
@keyframes story-fill { from { transform: scaleX(0); } to { transform: none; } }
/* phones: the stage stays under the header while the four steps pass beneath it */
@media (max-width: 61.99rem) and (min-height: 34rem) {
  .js .story__stage { position: sticky; top: 3.6rem; z-index: 2; }
  .js .story__steps li { min-height: 46vh; min-height: 46svh; }
  .js .story__steps li:last-child { min-height: 30vh; }
  .js .story .stage { font-size: .8125rem; }
  .js .story .pv-card { padding: .7rem .8rem; }
  .js .story :is(.pv-taxes, .pv-stamp, .pv-lab) { display: none; }
  .js .story .pv-line, .js .story .pv-lrow, .js .story .pv-grow { padding-block: .3rem; }
}
@media (min-width: 62rem) {
  .story { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .story__stage { grid-column: 2; grid-row: 1; }
  .story__steps { grid-column: 1; grid-row: 1; gap: 0; }
  .js .story__stage { position: sticky; top: max(5.5rem, calc(50vh - 15rem)); }
  .js .story__steps li { display: grid; align-content: center; min-height: 72vh; }
  .js .story__steps li:first-child { min-height: 50vh; align-content: start; padding-top: 2.5rem; }
  .js .story__steps li:last-child { min-height: 50vh; }
}

/* 5. The Dashboard trend chart, with sample figures. Four colours checked for colour-blind readers on both surfaces. */
.trend { --tc-1: #059669; --tc-2: #2563EB; --tc-3: #DC2626; --tc-4: #7C3AED;
  max-width: 46rem; margin: 0; padding: 1.25rem 1.25rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
@supports (color: light-dark(#000, #fff)) {
  .trend { --tc-1: light-dark(#059669, #0EA371); --tc-2: light-dark(#2563EB, #3B82F6); --tc-3: light-dark(#DC2626, #EF4444); --tc-4: light-dark(#7C3AED, #8B5CF6); }
}
.trend figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.trend figcaption strong { font-family: var(--font-head); font-size: 1.3rem; color: var(--text); }
.trend__sample { padding: .1rem .6rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .875rem; font-weight: 600; color: var(--body); }
.trend__key { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: .7rem 0 .5rem; padding: 0; font-size: .9375rem; color: var(--body); }
.trend__key li { display: flex; align-items: center; gap: .4rem; }
.trend__unit { margin-left: auto; color: var(--muted); }
.tc-key { width: .75rem; height: .75rem; border-radius: 2px; }
.tc-key--1, .tc-bar--1 { background: var(--tc-1); fill: var(--tc-1); }
.tc-key--2, .tc-bar--2 { background: var(--tc-2); fill: var(--tc-2); }
.tc-key--3, .tc-bar--3 { background: var(--tc-3); fill: var(--tc-3); }
.tc-key--4, .tc-bar--4 { background: var(--tc-4); fill: var(--tc-4); }
.trend__svg { display: block; width: 100%; height: auto; }
.tc-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.tc-grid--base { stroke: var(--line-strong); }
.tc-ax { fill: var(--muted); font-family: var(--font); font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) { .tc-ax { font-size: 21px; } }   /* the drawing is scaled down on a phone, so its lettering is set larger */
.tc-bar { transform-box: fill-box; transform-origin: 50% 100%; }
.tc-bar:hover { opacity: .78; }
.trend__table { margin-top: .5rem; font-size: .9375rem; }
.trend__table summary { display: inline-block; padding-block: .6rem; color: var(--body); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.trend__table table { margin-top: .25rem; }
/* the bars rise once, when the chart comes into view; with no script the chart is simply complete */
.js .trend .tc-bar { transition: scale .7s cubic-bezier(.2, .7, .2, 1), opacity .5s ease-out; }
.js .trend g:nth-of-type(2) .tc-bar { transition-delay: .06s; }
.js .trend g:nth-of-type(3) .tc-bar { transition-delay: .12s; }
.js .trend g:nth-of-type(4) .tc-bar { transition-delay: .18s; }
.js .trend g:nth-of-type(5) .tc-bar { transition-delay: .24s; }
.js .trend g:nth-of-type(6) .tc-bar { transition-delay: .3s; }
.js .trend.pre .tc-bar { scale: 1 0; }
@media (prefers-reduced-motion: reduce) {
  .js .trend .tc-bar { transition: opacity .6s ease-out; transition-delay: 0s; }
  .js .trend.pre .tc-bar { scale: none; opacity: 0; }
}

/* 6. Print: paper is white, so the first screen and the story stage are printed dark on light, complete and still */
@media print {
  .hero--scene, .story__stage { background: none !important; }
  .hero--scene h1, .hero--scene .lede, .hero--scene .hero__login, .pv-sample { color: #000 !important; }
  .hero--scene::before, .hero--scene::after, .scene__bar, .story__bar, .pv-pay { display: none !important; }
  .pv-card { box-shadow: none; border: 1px solid #94A3B8; }
  .story__stage { position: static !important; }
  .story__steps li { min-height: 0 !important; }
}