/* The film: every Home section is a scene. Camera and cuts: film.js.
   Every size on a surface is in FRAME UNITS (the frame is 1600 x 900): the camera scales the whole
   set, so 14px here is 14 units on the whiteboard, about 27px on a laptop and 16px on a phone. */

.main--film { padding: 0; }
.film { position: relative; background: #000; }
.film__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; overflow: clip; background: #000; }
.film__vignette { position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.42) 100%), var(--grain); }

/* a phone held upright (film.js: is-lb): the whole 16:9 film in a full-width window, its own colours
   blurred and dimmed around it, the card below it. film.js draws the ambient and moves the window. */
.film__amb { display: none; }
.film.is-lb .film__amb { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  filter: blur(30px) saturate(1.15) brightness(0.46); transform: scale(1.08); }
/* the window's top and bottom edges melt into the ambient instead of ending on a hard line */
.film.is-lb .scn__set, .film.is-lb .scn__xfade { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.film.is-lb .film__vignette { background: radial-gradient(140% 80% at 50% 40%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%), var(--grain); }
/* the words arrive without the blur on a phone: a blur over a pane of glass drops the glass's own
   frosting until it ends, so the card landed in pieces */
.film.is-lb.is-live :is([data-in], [data-win]) { filter: none; }
.film.is-lb .scn__shade { display: none; }
.film.is-lb .scn__copy { transform: none; }

.scn { position: absolute; inset: 0; visibility: hidden; overflow: hidden; overflow: clip; }
.scn.is-on { visibility: visible; }
.scn.hero { position: absolute; display: block; min-height: 0; padding: 0; }
.scn__set { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; }
.scn__plate, .scn__clip { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.scn__clip { opacity: 0; }
.scn__clip.is-ready { opacity: 1; }
/* while the camera flies in, the words wait: they are laid on the still, not on the moving clip */
.scn.is-flying .srf { visibility: hidden; }
.scn__black { position: absolute; inset: 0; z-index: 7; background: #000; opacity: 0; pointer-events: none; }
.srf { position: absolute; left: 0; top: 0; z-index: 2; transform-origin: 0 0; box-sizing: border-box; margin: 0; }
:where(.srf) :where(h2, h3, p, ol, ul, li) { margin: 0; padding: 0; }
:where(.srf) :where(ol, ul) { list-style: none; }

/* words arrive as the camera reaches them */
.film.is-live :is([data-in], [data-win]) { opacity: 0; transform: translateY(6px); filter: blur(2px);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease), filter 0.7s var(--ease); }
.film.is-live :is([data-in], [data-win]).is-in { opacity: 1; transform: none; filter: none; }
/* a card that has faded out is gone: it must never catch a click meant for the card in its place */
.film.is-live [data-win]:not(.is-in) { pointer-events: none; transition-duration: 0.3s; }
/* a stop's next card waits for the last one to be gone, so two are never on screen at once */
.film.is-live [data-win][data-turn].is-in { transition-delay: 0.3s, 0s, 0s; }
/* the frame held over the video while a jump dissolves into its new place: the set's own box and
   origin, beside the set and above it, under the cards; film.js freezes its camera */
.scn__xfade { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; max-width: none; transform-origin: 0 0; z-index: 1; display: block; opacity: 0; pointer-events: none; }

/* ---- 1 hero: the loved scene, copy over the bench ---- */
.scn__shade { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,13,16,0.94) 0%, rgba(11,13,16,0.7) 30%, rgba(11,13,16,0.12) 62%, rgba(11,13,16,0) 75%); }
.scn__copy { position: absolute; z-index: 4; left: var(--sc-gutter); top: 50%; transform: translateY(-46%); max-width: min(46rem, 52vw); }
.film.is-p .scn__shade { background: linear-gradient(180deg, rgba(11,13,16,0.92) 0%, rgba(11,13,16,0.75) 38%, rgba(11,13,16,0) 62%); }
.film.is-p .scn__copy { top: calc(var(--bar-h) + 3vh); transform: none; max-width: none; right: var(--sc-gutter); }







/* ================= Starter, About, Contact (same units: frame units) ================= */
.srf { list-style: none; }
.ink { color: #1b1d21; }














/* Contact 3: call notes on the legal pad */

@media (prefers-reduced-motion: reduce) {
  .film.is-live [data-in] { transform: none; filter: none; transition: opacity 0.3s linear; }
}






/* ================= Home v5: real scenes, glass cards ================= */
.gc { z-index: 2; display: flex; flex-direction: column; padding: 36px 36px; border-radius: 22px; overflow: hidden;
  color: #f2f0ed; font-family: var(--sc-font-text);
  background: linear-gradient(160deg, rgba(30, 32, 38, 0.6) 0%, rgba(10, 11, 14, 0.78) 70%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); }
.gc::before { content: ""; position: absolute; left: 36px; top: 0; width: 46px; height: 2px; background: var(--night-accent); box-shadow: 0 0 14px var(--night-accent); }
.gc-eyebrow { font: 700 11.5px/1 var(--sc-font-display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--night-accent); margin-bottom: 14px; }
.gc-h { font-family: var(--sc-font-display); font-stretch: 108%; font-weight: 800; font-size: 31px; line-height: 1.05; letter-spacing: -0.025em; }
.gc-h--xl { font-size: 52px; line-height: 0.98; letter-spacing: -0.035em; }
/* a heading with a set line break (the close: "Complimentary" / "Discovery Call."), on every screen */
.gc-h--two > span { display: block; }
.gc-body { margin-top: 12px; font-size: 14px; line-height: 1.55; color: #c9c5c1; }
.gc-lede { margin-top: 8px; font-size: 14px; color: #a7a3a0; }
.gc-link { display: inline-block; padding-bottom: 6px; border-bottom: 2px solid var(--night-accent); font: 700 11.5px/1 var(--sc-font-display);
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff; text-decoration: none; }
.gc-link:hover, .gc-link:focus-visible { color: var(--night-accent); }

.gl-cols { margin-top: 22px; display: grid; grid-template-columns: 1fr 1.2fr; column-gap: 22px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font: 700 10px/1 var(--sc-font-display); letter-spacing: 0.18em; text-transform: uppercase; color: #8d8985; }
.gl-cols span:last-child { color: var(--night-accent); }
.gl-rows { margin: 0; padding: 0; }
.gl-row { display: grid; grid-template-columns: 1fr 1.2fr; column-gap: 22px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.gl-pain { align-self: start; font-size: 13.5px; line-height: 1.35; font-weight: 600; color: #a7a3a0;
  background: linear-gradient(var(--night-accent), var(--night-accent)) 0 60% / 0% 1.5px no-repeat; transition: background-size 0.9s var(--ease) 0.35s; }
.gl-row.is-in .gl-pain { background-size: 100% 1.5px; }
.gl-fix { position: relative; padding-left: 15px; font-size: 13px; line-height: 1.45; }
.gl-fix::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--night-accent); box-shadow: 0 0 10px var(--night-accent); }
.gl-close { margin-top: auto; padding: 14px 0 0 14px; border-left: 2px solid var(--night-accent); font: 700 14.5px/1.35 var(--sc-font-display); }

.gw-pr { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.14); display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 18px; }
.gw-pr--four { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
.gw-pr h3 { font: 780 15px/1.15 var(--sc-font-display); }
.gw-pr p { margin-top: 7px; font-size: 12.5px; line-height: 1.45; color: #a7a3a0; }
.gw-o { margin-top: 20px; }
.gw-o p { font-size: 12.5px; line-height: 1.5; color: #a7a3a0; margin-bottom: 14px; }

.go-tag { margin-top: 8px; font-size: 15px; font-weight: 600; color: #a7a3a0; }
.go-tag .red { color: var(--night-accent); }
.go-pkg { margin-top: 20px; padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.035); }
.go-avail { display: flex; align-items: center; gap: 8px; font: 700 10px/1 var(--sc-font-display); letter-spacing: 0.2em; text-transform: uppercase; color: #a7a3a0; }
.go-avail .led { width: 7px; height: 7px; border-radius: 50%; background: var(--night-accent); box-shadow: 0 0 10px var(--night-accent); }
.go-name { margin-top: 10px; font: 800 26px/1.02 var(--sc-font-display); letter-spacing: -0.02em; }
.go-pkg .gc-body { margin-top: 8px; font-size: 13px; }
.go-row { margin-top: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.go-price { font: 750 15px/1 var(--sc-font-display); color: var(--night-accent); }
.go-incl { margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.go-incl li { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.go-t { display: block; font: 780 13.5px/1.2 var(--sc-font-display); }
.go-d { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.45; color: #a7a3a0; }

/* questions: click one open, only one open at a time (the details share a name) */
.gq-list { margin-top: 18px; }
.gq-item { border-top: 1px solid rgba(255, 255, 255, 0.11); }
.gq-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.11); }
.gq-q { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; cursor: pointer;
  font: 740 13.5px/1.3 var(--sc-font-display); color: #f2f0ed; }
.gq-q::-webkit-details-marker { display: none; }
/* the circled plus is DRAWN (two 2px bars, centred in the circle by background-position), never a "+" glyph:
   a font's plus sits off-centre, and so does the X it turns into when the answer opens */
.gq-q::after { content: ""; flex: none; box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22); color: #c9c5c1;
  background: linear-gradient(currentColor, currentColor) 50% 50% / 10px 2px no-repeat,
              linear-gradient(currentColor, currentColor) 50% 50% / 2px 10px no-repeat;
  transition: transform 0.35s var(--ease), color 0.2s, border-color 0.2s; }
.gq-item[open] > .gq-q::after { transform: rotate(45deg); color: var(--night-accent); border-color: var(--night-accent); }
.gq-q:hover { color: #fff; }
.gq-a { padding: 0 34px 12px 0; animation: gq-in 0.45s var(--ease); }
.gq-a p { font-size: 12.5px; line-height: 1.5; color: #b9b5b1; }
.gq-a p + p { margin-top: 8px; }
@keyframes gq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* phones: the card is the tall pane in the middle of the picture */
.film.is-p .gc { padding: 30px 26px; }
.film.is-p .gc::before { left: 26px; }
.film.is-p .gc-h { font-size: 27px; }
.film.is-p .gc-h--xl { font-size: 44px; }
.film.is-p .gc-body { font-size: 14.5px; }
.film.is-p .gl-cols { display: none; }
.film.is-p .gl-row { display: block; padding: 11px 0; }
.film.is-p .gl-pain { font-size: 14px; }
.film.is-p .gl-fix { margin-top: 6px; font-size: 13.5px; }
.film.is-p .gw-pr { grid-template-columns: 1fr; row-gap: 12px; }
.film.is-p .gw-pr p, .film.is-p .gw-o p { font-size: 13px; }
.film.is-p .go-incl { grid-template-columns: 1fr 1fr; }
.film.is-p .go-d { font-size: 11.5px; }
.film.is-p .gq-q { font-size: 14.5px; }
.film.is-p .gq-a p { font-size: 13.5px; }
.film.is-p .gl-close { margin-top: 16px; }

/* v6 journey: a card arrives as a pane of glass, then its content cascades in */
.scn--journey .gc > * { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); }
.scn--journey .gc.is-in > * { opacity: 1; transform: none; }
.scn--journey .gc.is-in > :nth-child(2) { transition-delay: 0.08s; }
.scn--journey .gc.is-in > :nth-child(3) { transition-delay: 0.16s; }
.scn--journey .gc.is-in > :nth-child(4) { transition-delay: 0.24s; }
.scn--journey .gc.is-in > :nth-child(5) { transition-delay: 0.32s; }
.scn--journey .gc.is-in > :nth-child(n+6) { transition-delay: 0.4s; }
/* the pain keeps clean, readable text (never struck through); a small red cross
   marks it as the problem, and pops in a beat after the card lands */
.gl-pain { position: relative; padding-left: 22px; background: none; text-decoration: none; color: #cfcac5; }
.gl-pain::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid rgba(224, 69, 60, 0.85); opacity: 0; transform: scale(0.6); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
  background: linear-gradient(45deg, transparent 44%, #e0453c 44%, #e0453c 56%, transparent 56%) center / 7px 7px no-repeat,
    linear-gradient(-45deg, transparent 44%, #e0453c 44%, #e0453c 56%, transparent 56%) center / 7px 7px no-repeat; }
.gc.is-in .gl-pain::before, .gl-row.is-in .gl-pain::before { opacity: 1; transform: none; }
.gc.is-in .gl-row:nth-child(1) .gl-pain::before { transition-delay: 0.5s; }
.gc.is-in .gl-row:nth-child(2) .gl-pain::before { transition-delay: 0.62s; }
.gc.is-in .gl-row:nth-child(3) .gl-pain::before { transition-delay: 0.74s; }
.gc.is-in .gl-row:nth-child(4) .gl-pain::before { transition-delay: 0.86s; }

/* the close in the ute cab: the call card is the journey's last stop */
.gc-body--lg { margin-top: 16px; font-size: 16px; line-height: 1.5; color: #d6d2ce; max-width: 30em; }
.gc-actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.gc5 { justify-content: center; }
.film.is-p .gc-body--lg { font-size: 15.5px; }

/* hero: the headline back up to its original size, the scene still in view beside it */
.scn--hero .scn__copy { max-width: min(62rem, 58vw); }
.scn--hero .hero__h { font-size: clamp(3rem, 0.6rem + 5.4vw, 7.4rem); line-height: 0.96; }
.scn--hero .hero__sub { max-width: 34em; }
.film.is-p .scn--hero .hero__h { font-size: clamp(2.6rem, 11vw, 3.6rem); }

/* ================= every page as a journey: the pieces the other pages need ================= */
/* the hero stop: the page's headline in hero type on the still's dark side, no pane of glass */
.gh { z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 20px 0; color: #f4f2ef; font-family: var(--sc-font-text); }
.gh::before { content: ""; position: absolute; inset: -30% -40% -30% -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 9, 12, 0.72), rgba(8, 9, 12, 0.45) 55%, rgba(8, 9, 12, 0) 100%); }
.gh-h { font-family: var(--sc-font-display); font-stretch: 108%; font-weight: 820; font-size: 78px; line-height: 0.96; letter-spacing: -0.035em; text-wrap: balance; }
.gh-lede { margin-top: 22px; max-width: 30em; font-size: 18px; line-height: 1.5; color: #d9d5d1; }
.gh .go-avail { margin-bottom: 18px; font-size: 11.5px; }
.gh .gc-actions { margin-top: 30px; }
.film.is-p .gh { padding: 0; }
.film.is-p .gh-h { font-size: 50px; }
.film.is-p .gh-lede { font-size: 16.5px; }

/* page cards read at the same sizes as Home's, a touch roomier: one idea per block */
.gc[data-fit] { padding: 34px 36px 32px; }
.gc[data-fit] .gc-h + .gc-body, .gc[data-fit] .gc-h + .gc-lede { margin-top: 12px; }
.gc-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; line-height: 1.5; color: #a7a3a0; }

/* what you get: numbered items, each a title, one short line, one fact */
.gi-list { margin-top: 20px; display: grid; gap: 18px; counter-reset: gi; }
.gi-list > li { position: relative; padding: 16px 0 0 38px; border-top: 1px solid rgba(255, 255, 255, 0.14); counter-increment: gi; }
.gi-list > li::before { content: "0" counter(gi); position: absolute; left: 0; top: 18px; font: 800 12px/1 var(--sc-font-display); letter-spacing: 0.06em; color: var(--night-accent); }
.gi-t { font: 780 16px/1.25 var(--sc-font-display); color: #fff; }
.gi-d { margin-top: 7px; font-size: 13.5px; line-height: 1.5; color: #c9c5c1; }
.gi-fact { margin-top: 9px; font: 700 12.5px/1.3 var(--sc-font-display); color: #f2f0ed; }
.gi-fact::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 9px 1px 0; border-radius: 50%; background: var(--night-accent); box-shadow: 0 0 8px var(--night-accent); }
.gr-list { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.gr-list li { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08); }
.gr-t { font: 720 13px/1.2 var(--sc-font-display); color: #fff; }
.gr-to { font-size: 12px; color: #a7a3a0; }
.gi-rule { margin-top: 16px; padding: 12px 0 0 14px; border-left: 2px solid var(--night-accent); font: 700 15px/1.35 var(--sc-font-display); color: #fff; }
.gi-rule em { font-style: normal; }

/* steps: a number, a title, at most two short lines */
.gs-list { margin-top: 20px; display: grid; gap: 0; }
.gs-list > li { display: grid; grid-template-columns: 40px 1fr; align-items: start; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.gs-list > li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.gs-n { font: 800 12px/1.6 var(--sc-font-display); letter-spacing: 0.06em; color: var(--night-accent); }
.gs-t { font: 760 15.5px/1.3 var(--sc-font-display); color: #fff; }
.gs-d { margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: #bdb9b5; }
.gs-list + .gc-link { margin-top: 22px; align-self: flex-start; }

/* the price: one big number, then the terms in order of importance */
.gp-price { font: 820 68px/1 var(--sc-font-display); font-stretch: 108%; letter-spacing: -0.04em; color: #fff; }
.gp-terms { margin-top: 12px; font: 700 16px/1.4 var(--sc-font-display); color: #f2f0ed; }
.gp-price ~ .gc-body { margin-top: 12px; }
.gp-small { margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: #a7a3a0; }
.gp-small a { color: #fff; text-underline-offset: 3px; }

/* what you own: five rows, then the two totals like a docket's bottom line */
.gw-own { margin-top: 20px; }
.gw-own li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.gw-own .go-t { font-size: 14.5px; }
.gw-own .go-d { margin: 0; font-size: 12.5px; text-align: right; }
/* the one-piece ladder under the package: each product on its own, linked, with its price */
.go-or { margin: 18px 0 0; font-size: 12.5px; line-height: 1.5; color: #a7a3a0; }
.gw-own.go-ladder { margin-top: 6px; }
.go-ladder li { padding: 8px 0; }
.go-ladder a.go-t { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
.go-ladder a.go-t:hover, .go-ladder a.go-t:focus-visible { text-decoration-color: currentColor; }
.gw-tots { margin: 6px 0 0; padding-top: 12px; border-top: 2px solid var(--night-accent); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gw-tots div { display: flex; justify-content: space-between; align-items: baseline; }
.gw-tots dt { font: 700 10.5px/1 var(--sc-font-display); letter-spacing: 0.18em; text-transform: uppercase; color: #a7a3a0; }
.gw-tots dd { margin: 0; font: 800 18px/1 var(--sc-font-display); color: #fff; }

/* the founder's words, set big, the last clause in red */
.gq-quote { margin: 0; }
.gq-quote p { font: 780 30px/1.18 var(--sc-font-display); letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
.gq-quote p::before { content: "\201C"; display: block; height: 0.62em; font-size: 2.4em; line-height: 1; color: var(--night-accent); }
.gq-mk { color: var(--night-accent); }
.gq-who { margin-top: 22px; display: flex; flex-direction: column; gap: 4px; }
.gq-name { font: 760 14px/1.2 var(--sc-font-display); color: #fff; }
.gq-why { font-size: 13px; color: #a7a3a0; }


/* the founder, big: the photo large beside the name and the paragraph */
.gf-big { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: center; }
.gf-big > picture { display: contents; }   /* the portrait's phone sizes wrapper: the img stays the grid item */
.gf-big > picture > source { display: none; }   /* and its sources take no cell of their own */
.gf-photo { display: block; width: 300px; height: 375px; object-fit: cover; object-position: 50% 30%; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.gf-words .gc-body--lg { margin-top: 18px; }
.film.is-p .gf-big { grid-template-columns: 1fr; gap: 22px; }
.film.is-p .gf-photo { width: min(100%, 270px); height: auto; aspect-ratio: 4 / 5; margin: 0 auto; }   /* the whole photo, never cropped */

.gt-split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.gt-split > div + div { padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.gt-split .gc-h { font-size: 26px; }
.gt-split .gc-body { margin-top: 10px; font-size: 13.5px; }

.gk-way + .gk-way { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.gk-way .gc-actions { margin-top: 18px; }
.gk-mail { display: inline-block; margin-top: 14px; font: 720 17px/1.2 var(--sc-font-display); color: #fff; text-decoration: none;
  padding-bottom: 5px; border-bottom: 2px solid var(--night-accent); overflow-wrap: anywhere; }
.gk-mail:hover, .gk-mail:focus-visible { color: var(--night-accent); }

/* phones: the card is the pane in the middle of the picture; everything stacks, nothing shrinks below reading size */
.film.is-p .gc[data-fit] { padding: 28px 24px 26px; }
/* a long heading must sit inside the pane with room to spare, never touch its edges */
.film.is-p .gc[data-fit] .gc-h { font-size: 24px; }
.film.is-p .gc-h--xl, .film.is-p .gc[data-fit] .gc-h--xl { font-size: 38px; }
.film.is-p .gt-split .gc-h { font-size: 24px; }
.film.is-p .gt-split { grid-template-columns: 1fr; }
.film.is-p .gt-split > div + div { padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.film.is-p .gp-price { font-size: 56px; }
.film.is-p .gq-quote p { font-size: 26px; }

/* a stop's next card (data-turn) lands on the other side while the camera
   pushes in, and its words slide in from that side, so the change reads at a normal scroll
   (on a laptop every card is centred instead, below: it grows out of the centre like the rest) */
@media (prefers-reduced-motion: no-preference) {
  :where(.film:not(.is-pop)) .scn--journey .gc[data-turn="r"] > * { transform: translateX(36px); }
  :where(.film:not(.is-pop)) .scn--journey .gc[data-turn="l"] > * { transform: translateX(-36px); }
  .scn--journey .gc[data-turn].is-in > * { transform: none; }
}

/* ================= the centred card on a laptop =================
   film.js (.is-pop, data-pop): the card is the section itself, two-thirds of the screen wide in the
   middle, growing out of the centre as its stop begins and shrinking back into it as the stop ends.
   Its size and fade come from the scroll, so nothing here may transition them. The glass is denser
   than a side card's: it sits over the brightest middle of every frame, so the words keep their
   contrast on the busiest frame while the film still shows through, blurred, around them. */
@media (prefers-reduced-motion: no-preference) {
  .film.is-pop.is-live .gc[data-pop] { transition: none; filter: none; }
}
.film.is-pop .gc[data-pop] { padding: 44px 52px 42px;
  background: linear-gradient(160deg, rgba(20, 22, 27, 0.8) 0%, rgba(9, 10, 13, 0.86) 70%);
  -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); }
.film.is-pop .gc[data-pop]::before { left: 52px; }
/* a wide pane keeps its paragraphs to a comfortable line; a row with its value on the far side runs
   the pane's full inner width, so the values end on the card's right padding and the block sits
   balanced in it (a row stopping short left the card's right side empty) */
.film.is-pop .gc[data-pop] > :is(.gc-body, .gc-lede, .gc-note, .gp-small), .film.is-pop .gc[data-pop] .gf-words .gc-body--lg { max-width: 40em; }
/* the two statement cards, the price and the close (its heading set on two lines), are centred in the
   pane: a short block in the middle of the screen rather than a left-hand column with an empty right
   half. The price's two rows still run the full inner width, label left, value right. */
.film.is-pop :is(#call, #price).gc[data-pop] { align-items: center; text-align: center; }
.film.is-pop :is(#call, #price).gc[data-pop]::before { left: 50%; margin-left: -23px; }
.film.is-pop :is(#call, #price).gc[data-pop] .gc-actions { justify-content: center; }
.film.is-pop #price.gc[data-pop] .gp-ways, .film.is-pop #price.gc[data-pop] .go-ladder { align-self: stretch; text-align: left; }

/* the fork: the hint says pick one, then (once one has been seen) pick the other or keep scrolling */
.gw-fork-then, .film.is-fork-open .gw-fork-first { display: none; }
.film.is-fork-open .gw-fork-then { display: block; }
.gp-ways { margin-top: 14px; }

/* the two pathways: equal weight, the reader picks one */
.gc-actions--two { gap: 12px; }
.gc-actions--two .btn { flex: 1 1 0; min-height: 50px; padding: 0 18px; background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1.5px var(--night-accent); }
@media (hover: hover) and (pointer: fine) { .gc-actions--two .btn:hover { background: var(--brand); } }
.gc > .gc-link { margin-top: 22px; align-self: flex-start; }

/* each running cost names its provider, linked to that provider's own prices */
.go-who { display: block; margin-top: 4px; font: 600 12px/1.3 var(--sc-font-text); color: #e8e4e0;
  text-decoration: underline; text-decoration-color: var(--night-accent); text-underline-offset: 3px; }
.go-who:hover, .go-who:focus-visible { color: var(--night-accent); }

/* ================= the phone version =================
   On a touch screen, or any screen 820px wide or less (the same query as film.js FLOW), the film is
   never built: a phone's GPU cannot carry it. Each stop is its still (the frame the film holds
   there, a light image only a phone fetches) and then its card, in normal flow at reading size,
   premium all the same. No video, no canvas, no blur, no fixed layer but the bar. Laid out by this
   stylesheet alone, so it reads the same with no script; film.js only adds a gentle arrival and
   opens the fork's branches. */
.j-still { display: none; }
/* No script, a blocked script, or the engine failing (boot.js and film.js put .sc-failsafe on <html>):
   a laptop falls back to the phone's plain layout, each scene's still then its cards in normal flow,
   instead of an empty black stage with every scene hidden. The phone rules below win on a phone. */
html:not(.js) .main--film, .sc-failsafe .main--film { padding-top: 0; }
html:not(.js) .film, .sc-failsafe .film { --g: 16px; --cw: min(640px, calc(100% - 2 * var(--g))); --still: min(100%, 1200px);
  height: auto !important; padding-bottom: 72px; background: var(--night, #0b0d10); overflow-x: clip; }
html:not(.js) .film__stage, .sc-failsafe .film__stage { position: static; height: auto; overflow: visible; background: none; }
html:not(.js) .film :is(.film__vignette, .film__amb, .scn__black, .scn__shade, .scn__clip, .scn__xfade),
.sc-failsafe .film :is(.film__vignette, .film__amb, .scn__black, .scn__shade, .scn__clip, .scn__xfade) { display: none !important; }
html:not(.js) .film .scn, .sc-failsafe .film .scn { position: relative; inset: auto; display: block; visibility: visible; overflow: visible; min-height: 0; padding: 0; }
html:not(.js) .film .scn__set, .sc-failsafe .film .scn__set { position: relative; left: auto; top: auto; width: var(--still); height: auto; margin: 48px auto 0; transform: none !important; }
html:not(.js) .film .scn__plate, .sc-failsafe .film .scn__plate { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
html:not(.js) .film .srf, .sc-failsafe .film .srf { position: relative; left: auto; top: auto; z-index: 1; width: var(--cw) !important; height: auto !important;
  max-height: none; overflow: visible; transform: none !important; margin: 24px auto 0; visibility: visible !important; }
html:not(.js) .film :is([data-in], [data-win], .scn--journey .gc > *),
.sc-failsafe .film :is([data-in], [data-win], .scn--journey .gc > *) { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
@media (hover: none) and (pointer: coarse) and (max-aspect-ratio: 799/1000), (hover: none) and (pointer: coarse) and (min-aspect-ratio: 1351/1000), (max-width: 820px) {
  .main--film { padding-top: calc(var(--bar-h) + var(--sat, 0px)); }
  .film { --g: 16px; --cw: min(640px, calc(100% - 2 * var(--g))); --still: min(100%, 1200px);
    height: auto !important; padding-bottom: 72px; background: var(--night); overflow-x: clip; }
  .film__stage { position: static; height: auto; overflow: visible; background: none; }
  .film__vignette, .film__amb, .scn__black, .scn__shade, .scn__clip, .scn__xfade { display: none !important; }
  .scn, .scn.hero { position: relative; inset: auto; display: block; visibility: visible; overflow: visible; min-height: 0; padding: 0; }

  /* the stills: the whole 16:9 scene, full width, its bottom melting into the page's ground */
  .scn__set, .j-still { position: relative; left: auto; top: auto; width: var(--still); height: auto; margin: 0 auto; transform: none !important; }
  .scn__set[data-flow="off"] { display: none; }
  .j-still { display: block; margin-top: 48px; }
  .scn__set picture, .j-still picture { display: block; }
  .scn__plate, .j-still img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  .scn__set::after, .j-still::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 46%; pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 13, 16, 0) 0%, rgba(11, 13, 16, 0.62) 55%, var(--night) 100%); }
  .j-still::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 16%; z-index: 1; pointer-events: none;
    background: linear-gradient(0deg, rgba(11, 13, 16, 0) 0%, var(--night) 100%); }
  /* a phone on its side, or a tablet: the still keeps clear of the screen's edges and the bar */
  @media (min-aspect-ratio: 1 / 1) {
    .film { --still: min(calc(100% - 2 * var(--g)), 1200px, calc((100vh - var(--bar-h) - 64px) * 16 / 9)); }
    /* the small viewport (address bar showing), where the browser knows it: never a still taller than what shows */
    @supports (height: 100svh) { .film { --still: min(calc(100% - 2 * var(--g)), 1200px, calc((100svh - var(--bar-h) - 64px) * 16 / 9)); } }
    .scn__set, .j-still { border-radius: 18px; overflow: hidden; }
    .main--film { padding-top: calc(var(--bar-h) + var(--sat, 0px) + 16px); }
  }

  /* the cards: the same glass look on a solid pane (nothing behind it to blur), each one lifted a
     little over the bottom of its still */
  .srf { position: relative; left: auto; top: auto; z-index: 1; width: var(--cw) !important; height: auto !important;
    max-height: none; overflow: visible; transform: none !important; margin: 0 auto; visibility: visible; }
  .film .srf.gc { margin-top: -38px; padding: 28px 22px 26px; border-radius: 20px; overflow: hidden;
    background: linear-gradient(165deg, #1c1e24 0%, #121317 52%, #0d0e11 100%);
    border: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
  .film .srf.gc + .srf.gc { margin-top: 18px; }
  .film .gc::before { left: 22px; }
  .srf, .j-still { scroll-margin-top: calc(var(--bar-h) + var(--sat, 0px) + 14px); }
  /* every word is up from the start: none of the film's cascades */
  .film .scn--journey .gc > *, .film .scn--journey .gc[data-turn] > * { opacity: 1; transform: none; transition: none; }
  .film .gl-pain::before { opacity: 1; transform: none; transition: none; }
  /* the fork: a branch opens under the fork's card from its button (film.js); with no script, all show */
  .film.is-forked [data-branch]:not(.is-open) { display: none; }
  .gc-actions--two .btn[aria-expanded="true"] { background: var(--brand); box-shadow: inset 0 0 0 1.5px var(--night-accent), 0 8px 22px -8px rgba(139, 0, 0, 0.75); }

  /* the arrival: a still or card rises a little as it comes up (opacity and a short lift only) */
  .film.is-flow .j-pre { opacity: 0; translate: 0 22px; transition: opacity 0.7s var(--ease), translate 0.9s var(--ease); }
  .film.is-flow .j-pre.is-seen { opacity: 1; translate: none; }

  /* the hero: its still, then the headline set over the still's dark foot, all of it up at once */
  .scn--hero .scn__copy { position: relative; left: auto; top: auto; z-index: 2; transform: none; max-width: none; width: var(--cw);
    margin: -44px auto 0; padding: 0 0 6px; }
  .scn--hero .hero__h { font-size: clamp(2.3rem, 10.4vw, 3.6rem); line-height: 1; }
  .scn--hero .hero__sub { margin-top: 18px; font-size: 17px; line-height: 1.55; max-width: 34em; }
  .scn--hero .actions { margin-top: 26px; gap: 14px 24px; }
  .scn--hero .lt, .scn--hero .ln__i, .scn--hero .fade-up { opacity: 1 !important; transform: none !important; translate: none !important;
    filter: none !important; transition: none !important; }
  .film .srf.gh { margin-top: -50px; padding: 0 0 6px; }
  .film .gh::before { display: none; }
  .film .gh-h { margin: 0; font-size: clamp(2.25rem, 10vw, 3.4rem); line-height: 1; }
  .film .gh-lede { margin-top: 16px; font-size: 17px; line-height: 1.55; }
  .film .gh .go-avail { margin-bottom: 14px; font-size: 11.5px; }
  .film .gh .gc-actions { margin-top: 24px; }

  /* reading sizes: body 16px, nothing below 13px, headings that fit a 320px screen */
  .film .gc-eyebrow { font-size: 12px; margin-bottom: 12px; }
  .film .gc-h, .film .gc[data-fit] .gc-h { font-size: 26px; line-height: 1.1; }
  .film .gc-h--xl, .film .gc[data-fit] .gc-h--xl { font-size: clamp(27px, 8.6vw, 36px); line-height: 1.02; }
  .film .gc-body { font-size: 16px; line-height: 1.6; color: #d2cec9; }
  .film .gc-body--lg { font-size: 17px; }
  .film .gc-lede { font-size: 16px; line-height: 1.5; }
  .film .gc-note { font-size: 15px; }
  .film .gc-link { display: inline-flex; align-items: flex-end; min-height: 44px; padding-top: 8px; font-size: 13px; line-height: 1.5;
    max-width: 100%; overflow-wrap: anywhere; }
  /* an email address in capitals and wide tracking runs off a small screen: set as written */
  .film .gc-link--mail { text-transform: none; letter-spacing: 0.01em; font-size: 15px; }
  .film .gc-actions { margin-top: 24px; gap: 14px 22px; }
  .film .gl-cols { display: none; }
  .film .gl-row { display: block; padding: 14px 0; }
  .film .gl-pain { font-size: 16px; }
  .film .gl-fix { margin-top: 8px; font-size: 16px; line-height: 1.5; }
  .film .gl-close { margin-top: 20px; font-size: 16px; }
  .film .gw-pr { grid-template-columns: 1fr; row-gap: 14px; }
  .film .gw-pr h3 { font-size: 17px; }
  .film .gw-pr p, .film .gw-o p { font-size: 16px; }
  .film .go-tag { font-size: 16px; }
  .film .go-pkg { padding: 18px; }
  .film .go-avail { font-size: 11px; }
  .film .go-name { font-size: 26px; }
  .film .go-pkg .gc-body { font-size: 16px; }
  .film .go-price { font-size: 16px; }
  .film .go-incl { grid-template-columns: 1fr; gap: 0; }
  .film .go-incl li { padding: 12px 0; }
  .film .go-t { font-size: 16px; }
  .film .go-d { font-size: 16px; }
  .film .gq-q { padding: 15px 0; font-size: 16px; }
  .film .gq-q::after { width: 28px; height: 28px; background-size: 12px 2px, 2px 12px; }
  .film .gq-a { padding-right: 8px; }
  .film .gq-a p { font-size: 16px; line-height: 1.55; }
  .film .gi-t { font-size: 17px; }
  .film .gi-d { font-size: 16px; }
  .film .gi-fact { font-size: 15px; }
  .film .gi-rule { font-size: 16px; }
  .film .gr-t { font-size: 15px; }
  .film .gr-to { font-size: 14px; }
  .film .gs-list > li { grid-template-columns: 36px 1fr; }
  .film .gs-t { font-size: 16.5px; }
  .film .gs-d { font-size: 16px; }
  .film .gp-price { font-size: 60px; }
  .film .gp-terms { font-size: 17px; }
  .film .gp-small { font-size: 15px; }
  .film .gw-own .go-t { font-size: 16px; }
  .film .gw-own .go-d { font-size: 15px; }
  .film .go-or { font-size: 15px; }
  .film .go-ladder li { padding: 10px 0; }
  .film .go-who { font-size: 15px; }
  .film .gw-tots { grid-template-columns: 1fr; gap: 10px; }
  .film .gw-tots dt { font-size: 11px; }
  .film .gq-quote p { font-size: 27px; }
  .film .gq-name { font-size: 15px; }
  .film .gq-why { font-size: 15px; }
  .film .gf-big { grid-template-columns: 1fr; gap: 22px; }
  .film .gf-photo { width: min(100%, 320px); height: auto; aspect-ratio: 4 / 5; margin: 0 auto; }
  .film .gt-split { grid-template-columns: 1fr; gap: 0; }
  .film .gt-split > div + div { margin-top: 20px; padding: 20px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .film .gt-split .gc-h { font-size: 24px; }
  .film .gt-split .gc-body { font-size: 16px; }
  .film .gk-mail { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: 17px; max-width: 100%; overflow-wrap: anywhere; }
  .film .gc-actions--two .btn { min-height: 52px; }
  /* the hero's text link is a 44px target too */
  .scn--hero .actions .textlink { display: inline-flex; align-items: center; min-height: 44px; }
  /* the smallest phones: a little less card padding, so a line still holds 30 characters and more */
  @media (max-width: 359px) { .film .srf.gc { padding: 24px 18px 22px; } .film .gc::before { left: 18px; } }
}
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce), (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .film.is-flow .j-pre { opacity: 1; translate: none; transition: none; }
}
.j-end .j-end-brand { font-weight: 700; letter-spacing: 0.02em; font-size: 16px; }
.rv .j-reviews-ask { display: none; }
.j-end .j-reviews-ask { display: block; }
.j-end .j-reviews-ask .btn { min-height: 0; height: 36px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.j-end .j-reviews--strip .j-reviews-attr > span { color: #fff !important; }
.j-end .j-reviews--strip .j-reviews-box { background: none; box-shadow: none; border: 0; }
/* ONE call to action everywhere: Book a call, Email us, Text us. Three identical big buttons, equal
   width, no address or number shown. Left in a left-aligned hero, centred in the centred cards. */
.gc-actions--three { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 12px; width: 100%; max-width: 40em; }
.gc-actions--three .btn { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; }
.film.is-pop .gc[data-pop] .gc-actions--three { margin-left: auto; margin-right: auto; }
@media (max-width: 820px) { .film .gc-actions--three { flex-direction: column; gap: 10px; max-width: none; } .film .gc-actions--three .btn { flex: 0 0 auto; width: 100%; min-height: 52px; } }
.film.is-p .gc-actions--three { flex-direction: column; gap: 10px; max-width: none; }
.film.is-p .gc-actions--three .btn { flex: 0 0 auto; width: 100%; min-height: 52px; }
/* contact page only: the sample message box with its small Copy message control */
.gg-sample { margin-top: 14px; padding: 10px 14px; border: 1px dashed rgba(255, 255, 255, 0.28); border-radius: 8px; background: rgba(255, 255, 255, 0.04); text-align: left; max-width: 40em; }
.gg-sample__l { font: 700 11px/1.3 var(--sc-font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--night-accent); }
.gg-sample__t { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: #d6d2ce; }
.gg-sample__n { margin-top: 8px; font-size: 13px; line-height: 1.4; color: #a7a3a0; }
.gg-copy { margin-top: 8px; min-height: 34px; padding: 0 14px; font: 700 13px/1 var(--sc-font-display); color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; cursor: pointer; }
.gg-copy:hover, .gg-copy:focus-visible { border-color: var(--night-accent); }
@media (max-width: 820px) { .film .gg-sample__t { font-size: 15px; } .film .gg-sample__l { font-size: 12px; } .film .gg-copy { min-height: 44px; } }

/* BLACK CARDS: the cinematic pages' cards match the Apple-style pages: glossy black lacquer
   (a soft diagonal reflection), solid so the film never shows through, square corners, a super thin quiet red
   outline, matte white body copy, no red line on top and no glow anywhere. */
.gc, .film .srf.gc, .film.is-pop .gc[data-pop], .film.is-p .gc {
  background: #000000;
  background-color: #000000;
  border: 1px solid rgba(139, 0, 0, 0.42); border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 1px 0 0 rgba(255, 255, 255, 0.05), inset -1px 0 0 rgba(255, 255, 255, 0.05), 0 40px 100px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.gc::before { content: none; }
.gc-body, .gc-lede, .gc-body--lg, .gl-fix, .gq-a, .gq-a p, .go-pkg .gc-body { color: #E7E5E1; }
/* inner boxes on a card follow the same locked style: pure black, solid, square, quiet red outline, edge light only */
.go-pkg, .gg-sample { background: #000000; background-color: #000000; border: 1px solid rgba(139, 0, 0, 0.42); border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 1px 0 0 rgba(255, 255, 255, 0.05), inset -1px 0 0 rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: none; backdrop-filter: none; }
.gg-sample__t { color: #E7E5E1; }
.gl-fix::before, .go-avail .led, .gi-fact::before { box-shadow: none; }
html.jp-on .film .scn--journey > .srf, html.jp-on .film .scn--journey > .srf.jp-leave,
html.jp-on .film .scn--journey > .srf.jp-pt, html.jp-on .film .scn--journey > .srf.jp-pb { border-radius: 0 !important; }
html.jp-on .film .scn--journey > .srf.j-card { background: #000000 !important; background-color: #000000 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.jp-on .film .scn--journey > .srf.j-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 1px 0 0 rgba(255, 255, 255, 0.05), inset -1px 0 0 rgba(255, 255, 255, 0.05) !important; }

/* the card sits above the film grain layer (z 8), so its face stays clean wet black, not grained matte */
.film .scn--journey > .srf.gc { z-index: 9; }

/* no glow on the open-state button either */
.gc-actions--two .btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--night-accent); }

/* THE PLANS (Home, #offer): the three products side by side on a laptop, one under the other on a
   phone. Each is its own box in the locked black style (square, quiet red outline, edge light, no glow) with its
   own price, what you get, Get started and a link to its page. The recommended one alone carries the solid brand
   red, on its outline and its button; the other two buttons are the outlined pair the hero uses. The chatbot
   add-on is one smaller line under the three. */
.gp3 { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-self: stretch; text-align: left; }
.gp3-t { display: flex; flex-direction: column; padding: 18px 18px 16px; background: #000000;
  border: 1px solid rgba(139, 0, 0, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.gp3-t--rec { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.gp3-tag { font: 700 10px/1.2 var(--sc-font-display); letter-spacing: 0.2em; text-transform: uppercase; color: #a7a3a0; }
.gp3-t--rec .gp3-tag { color: var(--night-accent); }
.gp3-t .go-name { margin-top: 10px; font-size: 21px; }
.gp3-big { margin-top: 14px; font: 650 13px/1 var(--sc-font-display); color: #a7a3a0; }
.gp3-big b { font-weight: 800; font-size: 30px; letter-spacing: -0.02em; color: #ffffff; margin-right: 2px; }
.gp3-get { margin: 14px 0 0; padding: 0; list-style: none; flex: 1 1 auto; }
.gp3-get li { padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 12.5px; line-height: 1.42; color: #E7E5E1; }
.gp3-go { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.gp3-go .btn { align-self: stretch; min-height: 44px; padding: 0 16px; font-size: 0.95rem; box-shadow: none; }
.gp3-t:not(.gp3-t--rec) .gp3-go .btn { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1.5px var(--night-accent); }
@media (hover: hover) and (pointer: fine) { .gp3-t:not(.gp3-t--rec) .gp3-go .btn:hover { background: var(--brand); } }
.gp3-add { margin-top: 16px; font-size: 13px; line-height: 1.5; color: #E7E5E1; }
.gp3-add strong { color: #ffffff; }
.gp3-add .gc-link { margin-left: 6px; padding-bottom: 4px; }
.film.is-pop #offer.gc[data-pop] > .gp3-add { max-width: none; }
@media (hover: none) and (pointer: coarse) and (max-aspect-ratio: 799/1000), (max-width: 820px) {
  .film .gp3 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .film .gp3-t { padding: 12px 14px 12px; }
  .film .gp3-tag { font-size: 11px; }
  .film .gp3-t .go-name { font-size: 19px; margin-top: 6px; }
  .film .gp3-get li, .film .gp3-add { font-size: 14px; }
  .film .gp3-get li { padding: 5px 0; line-height: 1.38; }
  .film .gp3-go .btn { min-height: 44px; font-size: 1rem; }
}
@media (hover: none) and (pointer: coarse) and (max-aspect-ratio: 799/1000), (max-width: 820px) {
  .film .gp3-big { margin-top: 8px; }
  .film .gp3-big b { font-size: 26px; }
  .film .gp3-get { margin-top: 8px; }
  .film .gp3-go { margin-top: 8px; gap: 6px; }
  .film #offer .gp3 { margin-top: 12px; }
}
.film.is-p .gp3 { grid-template-columns: minmax(0, 1fr); }
/* the three plan tiles on a laptop: every row lines up across the tiles (tag, name, price, line,
   list, button), so the prices sit on one line and the Get started buttons on another */
@media (min-width: 821px) {
  .film:not(.is-p) .gp3 { grid-template-rows: repeat(6, auto); }
  .film:not(.is-p) .gp3-t { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .film:not(.is-p) .gp3-go { align-self: end; }
}
@media (min-width: 821px) {
  .film:not(.is-p) .gp3-get li { padding: 5px 0; }
  .film:not(.is-p) .gp3-big { margin-top: 10px; }
  .film:not(.is-p) .gp3-get { margin-top: 10px; }
  .film:not(.is-p) .gp3 { margin-top: 14px; }
}
@media (min-width: 821px) {
  .film:not(.is-p) .gp3-t { padding: 14px 15px 13px; }
  .film:not(.is-p) .gp3-get li { padding: 4px 0; font-size: 12px; line-height: 1.38; }
  .film:not(.is-p) .gp3-t .go-name { margin-top: 6px; }
  .film:not(.is-p) .gp3-go { margin-top: 8px; gap: 6px; }
  .film:not(.is-p) #offer .gp3-add { margin-top: 10px; }
  .film:not(.is-p) #offer .gc-note { margin-top: 10px; padding-top: 10px; }
}
@media (min-width: 821px) {
  .film:not(.is-p) #offer .gp3 { margin-top: 10px; }
  .film:not(.is-p) .gp3-big { margin-top: 8px; }
  .film:not(.is-p) .gp3-get { margin-top: 8px; }
  .film:not(.is-p) #offer .gc-note { font-size: 12px; }
}
@media (min-width: 821px) {
  .film:not(.is-p) #offer.gc[data-pop] { padding-top: 30px; padding-bottom: 28px; }

  .film:not(.is-p) .gp3-t .go-name { font-size: 19px; }
  .film:not(.is-p) .gp3-go .btn { min-height: 40px; }
  .film:not(.is-p) #offer .gc-note { margin-top: 8px; padding-top: 8px; }
}
@media (min-width: 821px) {
  .film:not(.is-p) .gp3-get li { padding: 3px 0; }
  .film:not(.is-p) .gp3-go { margin-top: 6px; }
}
/* how each plan is paid: a Monthly row and a Yearly row, the label in a fixed column so the two rows line up */
.gp3-pay { margin: 10px 0 0; display: grid; gap: 6px; font-size: 12px; line-height: 1.4; color: #E7E5E1; }
.gp3-pay > div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 6px; align-items: baseline; }
.gp3-pay dt { font: 700 9px/1.5 var(--sc-font-display); letter-spacing: 0.1em; text-transform: uppercase; color: #a7a3a0; }
.gp3-pay dd { margin: 0; }
.gp3-pay b { color: #ffffff; font-weight: 800; }
@media (hover: none) and (pointer: coarse) and (max-aspect-ratio: 799/1000), (max-width: 820px) { .film .gp3-pay { font-size: 14px; margin-top: 8px; } .film .gp3-pay dt { font-size: 11px; } .film .gp3-pay > div { grid-template-columns: 74px minmax(0, 1fr); } }
@media (min-width: 821px) { .film:not(.is-p) .gp3-pay { margin-top: 8px; gap: 4px; font-size: 11.5px; line-height: 1.36; } }
/* the two website builds under the plan tiles: a small heading, then two even boxes styled like the tiles */
.gp3-builds { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; align-self: stretch; text-align: left; }
.gp3-builds-h { grid-column: 1 / -1; font: 700 10px/1.2 var(--sc-font-display); letter-spacing: 0.2em; text-transform: uppercase; color: #a7a3a0; }
.gp3-b { padding: 10px 14px; background: #000000; border: 1px solid rgba(139, 0, 0, 0.42); font-size: 12px; line-height: 1.4; color: #E7E5E1; }
.gp3-b-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-family: var(--sc-font-display); }
.gp3-b-top strong { font-size: 15px; font-weight: 800; color: #ffffff; }
.gp3-b-top b { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: #ffffff; }
.film.is-p .gp3-builds { grid-template-columns: minmax(0, 1fr); }
@media (hover: none) and (pointer: coarse) and (max-aspect-ratio: 799/1000), (max-width: 820px) { .film .gp3-builds { grid-template-columns: minmax(0, 1fr); } .film .gp3-b { font-size: 14px; } .film .gp3-builds-h { font-size: 11px; } }
@media (min-width: 821px) {
  .film:not(.is-p) .gp3-builds { margin-top: 10px; }
  .film:not(.is-p) .gp3-b { padding: 8px 14px; font-size: 11.5px; line-height: 1.36; }
  .film:not(.is-p) #offer .gp3-add { margin-top: 8px; font-size: 12px; }
}
.gp3-gst { display: block; margin-top: 4px; font-size: 0.92em; color: #a7a3a0; }
@media (min-width: 821px) {
  .film:not(.is-p) .gp3-t { padding: 11px 14px 10px; }
  .film:not(.is-p) .gp3-go .btn { min-height: 38px; }
  .film:not(.is-p) .gp3-go { gap: 4px; }
  .film:not(.is-p) .gp3-builds { margin-top: 6px; }
}
/* plans as a row of cards in one section on a phone (plan-cards.js): one whole at the front, the next one
   peeking in at the side, clipped by the row. Here, not in phone.css, so a phone turned on its side keeps
   them right until the script puts every plan back */
.pc-off { display: none !important; }
[data-plan-cards].pc-on { display: block !important; position: relative; overflow: hidden; outline-offset: 3px; }
[data-plan-cards].pc-on > .pc-card { position: absolute !important; top: 0; left: 0; box-sizing: border-box; margin: 0 !important;
  display: flex !important; flex-direction: column; grid-row: auto !important;
  transition: transform 0.38s cubic-bezier(0.22, 0.7, 0.2, 1), opacity 0.38s; }
[data-plan-cards].pc-drag > .pc-card { transition: none; }
[data-plan-cards].pc-on > .pc-card:not(.pc-front) { cursor: pointer; }
.pc-dots { display: flex; justify-content: center; gap: 2px; margin: 2px 0 0; }
.pc-dot { position: relative; width: 28px; height: 24px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.pc-dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 4px; background: rgba(255, 255, 255, 0.38); transition: width 0.3s, margin 0.3s, background-color 0.3s; }
.pc-dot[aria-current="true"]::before { width: 20px; margin-left: -10px; background: var(--night-accent, #e0352b); }
.pc-dot:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { [data-plan-cards].pc-on > .pc-card, .pc-dot::before { transition: none; } }

/* THE PLANS on a laptop, fitted to one screen with no scroll inside the card.
   The card runs wider (data-pop-wide, journey.js), so every line wraps less and the card is shorter. In each
   tile the name and the price share one row, the build fees sit under the three tiles as one band
   (heading, Standard, Cinematic, in the tiles' own columns) and the chatbot line and the GST note share a row. */
@media (min-width: 821px) {
  .film:not(.is-p) #offer.gc[data-pop] { padding: 24px 32px 20px; }
  .film:not(.is-p) #offer .gc-h { font-size: 28px; }
  .film:not(.is-p) #offer .gc-eyebrow { margin-bottom: 0; }
  .film:not(.is-p) #offer .gc-h + .gc-body { margin-top: 6px; font-size: 13px; line-height: 1.4; max-width: none; }
  .film:not(.is-p) #offer .gp3 { margin-top: 12px; gap: 10px; grid-template-rows: repeat(5, auto); }
  .film:not(.is-p) #offer .gp3-t { grid-row: span 5; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; padding: 11px 14px 10px; }
  .film:not(.is-p) #offer .gp3-t > * { grid-column: 1 / -1; }
  .film:not(.is-p) #offer .gp3-tag { grid-row: 1; }
  .film:not(.is-p) #offer .gp3-t .go-name { grid-row: 2; grid-column: 1; margin-top: 5px; align-self: end; font-size: 16px; white-space: nowrap; }
  .film:not(.is-p) #offer .gp3-big { grid-row: 2; grid-column: 2; margin-top: 0; align-self: end; white-space: nowrap; font-size: 12px; }
  .film:not(.is-p) #offer .gp3-big b { font-size: 22px; }
  .film:not(.is-p) #offer .gp3-pay { grid-row: 3; margin-top: 8px; gap: 3px; font-size: 13px; line-height: 1.34; }
  .film:not(.is-p) #offer .gp3-pay dt { font-size: 10px; }
  .film:not(.is-p) #offer .gp3-pay > div { grid-template-columns: 62px minmax(0, 1fr); gap: 6px; }
  .film:not(.is-p) #offer .gp3-get { grid-row: 4; margin-top: 8px; }
  .film:not(.is-p) #offer .gp3-get li { padding: 3px 0; font-size: 13px; line-height: 1.32; }
  .film:not(.is-p) #offer .gp3-go { grid-row: 5; margin-top: 6px; flex-direction: row; align-items: center; gap: 12px; }
  .film:not(.is-p) #offer .gp3-go .btn { flex: 1 1 auto; align-self: auto; min-height: 36px; font-size: 0.9rem; }
  .film:not(.is-p) #offer .gp3-go .gc-link { flex: 0 0 auto; margin: 0; font-size: 10px; }
  .film:not(.is-p) #offer .gp3-builds { margin-top: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
  .film:not(.is-p) #offer .gp3-builds-h { grid-column: 1; align-self: center; font-size: 10px; line-height: 1.5; letter-spacing: 0.14em; }
  .film:not(.is-p) #offer .gp3-b { padding: 7px 12px; font-size: 13px; line-height: 1.3; }
  .film:not(.is-p) #offer .gp3-b-top { margin-bottom: 2px; }
  .film:not(.is-p) #offer .gp3-add { margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 24px; font-size: 13px; line-height: 1.4; }
  .film:not(.is-p) #offer .gp3-add .gc-link { margin-left: 6px; padding-bottom: 2px; }
  .film:not(.is-p) #offer .gp3-gst { margin-top: 0; font-size: 13px; }
}