/* =====================================================================================================================
   Budget pass (2026-10-15): generated imagery placed with depth. Loads after premium.css.
   - .film      a cinematic section plate (Higgsfield GPT Image 2.5, graded, no text/logos), painted only once its section
                is a quarter screen away (d.js adds .sb-in to [data-sb-plate]); without JS it paints at once. Each film is
                a box with the plate's own 16:9 aspect, so plate and loop line up exactly; ::after fades every edge into the
                section colour, so there is never a seam.
   - .film__loop a muted seamless loop over the plate (film.js: on screen, motion full, not lite, not Save-Data). It
                fades in only once playing; the plate underneath is its poster.
   - First view is untouched: plates wait for the first scroll (film.js adds .films) and their section's .sb-in. 1x files first; 2x only with .hd
                (DPR > 1.3, added by d.js after first paint) or without JS, via image-set().
   - Lite tier: no films, no loops (the old CSS light layers come back).
   ===================================================================================================================== */
/* BEGIN plate vars (generated by tools/budget/css_vars.py) */
:root { --f-how: image-set(url("../budget/plates/how-light-1600.webp") 1x, url("../budget/plates/how-light-2560.webp") 1.6x, url("../budget/plates/how-light-3200.webp") 2x, url("../budget/plates/how-light-3840.webp") 2.4x); --f-int: image-set(url("../budget/plates/int-light-1600.webp") 1x, url("../budget/plates/int-light-2560.webp") 1.6x, url("../budget/plates/int-light-3200.webp") 2x, url("../budget/plates/int-light-3840.webp") 2.4x); --f-price: image-set(url("../budget/plates/price-light-1600.webp") 1x, url("../budget/plates/price-light-2560.webp") 1.6x, url("../budget/plates/price-light-3200.webp") 2x, url("../budget/plates/price-light-3840.webp") 2.4x); --f-sec: image-set(url("../budget/plates/sec-dark-1600.webp") 1x, url("../budget/plates/sec-dark-2560.webp") 1.6x, url("../budget/plates/sec-dark-3200.webp") 2x, url("../budget/plates/sec-dark-3840.webp") 2.4x); --f-close: image-set(url("../budget/plates/close-dark-1000.webp") 1x, url("../budget/plates/close-dark-2000.webp") 2x, url("../budget/plates/close-dark-3000.webp") 3x); }
:root[data-theme="dark"] { --f-how: image-set(url("../budget/plates/how-dark-1600.webp") 1x, url("../budget/plates/how-dark-2560.webp") 1.6x, url("../budget/plates/how-dark-3200.webp") 2x, url("../budget/plates/how-dark-3840.webp") 2.4x); --f-int: image-set(url("../budget/plates/int-dark-1600.webp") 1x, url("../budget/plates/int-dark-2560.webp") 1.6x, url("../budget/plates/int-dark-3200.webp") 2x, url("../budget/plates/int-dark-3840.webp") 2.4x); --f-price: image-set(url("../budget/plates/price-dark-1600.webp") 1x, url("../budget/plates/price-dark-2560.webp") 1.6x, url("../budget/plates/price-dark-3200.webp") 2x, url("../budget/plates/price-dark-3840.webp") 2.4x); --f-sec: image-set(url("../budget/plates/sec-dark-1600.webp") 1x, url("../budget/plates/sec-dark-2560.webp") 1.6x, url("../budget/plates/sec-dark-3200.webp") 2x, url("../budget/plates/sec-dark-3840.webp") 2.4x); }
:root:is(.hd, .no-js) { --f-how: image-set(url("../budget/plates/how-light-1600.webp") 1x, url("../budget/plates/how-light-3200.webp") 2x, url("../budget/plates/how-light-3840.webp") 3x); --f-int: image-set(url("../budget/plates/int-light-1600.webp") 1x, url("../budget/plates/int-light-3200.webp") 2x, url("../budget/plates/int-light-3840.webp") 3x); --f-price: image-set(url("../budget/plates/price-light-1600.webp") 1x, url("../budget/plates/price-light-3200.webp") 2x, url("../budget/plates/price-light-3840.webp") 3x); --f-sec: image-set(url("../budget/plates/sec-dark-1600.webp") 1x, url("../budget/plates/sec-dark-3200.webp") 2x, url("../budget/plates/sec-dark-3840.webp") 3x); --f-close: image-set(url("../budget/plates/close-dark-1000.webp") 1x, url("../budget/plates/close-dark-2000.webp") 2x, url("../budget/plates/close-dark-3000.webp") 3x); }
:root:is(.hd, .no-js)[data-theme="dark"] { --f-how: image-set(url("../budget/plates/how-dark-1600.webp") 1x, url("../budget/plates/how-dark-3200.webp") 2x, url("../budget/plates/how-dark-3840.webp") 3x); --f-int: image-set(url("../budget/plates/int-dark-1600.webp") 1x, url("../budget/plates/int-dark-3200.webp") 2x, url("../budget/plates/int-dark-3840.webp") 3x); --f-price: image-set(url("../budget/plates/price-dark-1600.webp") 1x, url("../budget/plates/price-dark-3200.webp") 2x, url("../budget/plates/price-dark-3840.webp") 3x); --f-sec: image-set(url("../budget/plates/sec-dark-1600.webp") 1x, url("../budget/plates/sec-dark-3200.webp") 2x, url("../budget/plates/sec-dark-3840.webp") 3x); }
@media (prefers-color-scheme: dark) { :root.no-js:not([data-theme="light"]) { --f-how: image-set(url("../budget/plates/how-dark-1600.webp") 1x, url("../budget/plates/how-dark-3200.webp") 2x, url("../budget/plates/how-dark-3840.webp") 3x); --f-int: image-set(url("../budget/plates/int-dark-1600.webp") 1x, url("../budget/plates/int-dark-3200.webp") 2x, url("../budget/plates/int-dark-3840.webp") 3x); --f-price: image-set(url("../budget/plates/price-dark-1600.webp") 1x, url("../budget/plates/price-dark-3200.webp") 2x, url("../budget/plates/price-dark-3840.webp") 3x); --f-sec: image-set(url("../budget/plates/sec-dark-1600.webp") 1x, url("../budget/plates/sec-dark-3200.webp") 2x, url("../budget/plates/sec-dark-3840.webp") 3x); } }
@media (min-width: 1601px) {
  :root { --f-how: image-set(url("../budget/plates/how-light-2560.webp") 1x, url("../budget/plates/how-light-3840.webp") 1.5x); --f-int: image-set(url("../budget/plates/int-light-2560.webp") 1x, url("../budget/plates/int-light-3840.webp") 1.5x); --f-sec: image-set(url("../budget/plates/sec-dark-2560.webp") 1x, url("../budget/plates/sec-dark-3840.webp") 1.5x); } :root[data-theme="dark"] { --f-how: image-set(url("../budget/plates/how-dark-2560.webp") 1x, url("../budget/plates/how-dark-3840.webp") 1.5x); --f-int: image-set(url("../budget/plates/int-dark-2560.webp") 1x, url("../budget/plates/int-dark-3840.webp") 1.5x); --f-sec: image-set(url("../budget/plates/sec-dark-2560.webp") 1x, url("../budget/plates/sec-dark-3840.webp") 1.5x); }
  :root:is(.hd, .no-js) { --f-how: image-set(url("../budget/plates/how-light-2560.webp") 1x, url("../budget/plates/how-light-3840.webp") 2x); --f-int: image-set(url("../budget/plates/int-light-2560.webp") 1x, url("../budget/plates/int-light-3840.webp") 2x); --f-sec: image-set(url("../budget/plates/sec-dark-2560.webp") 1x, url("../budget/plates/sec-dark-3840.webp") 2x); } :root:is(.hd, .no-js)[data-theme="dark"] { --f-how: image-set(url("../budget/plates/how-dark-2560.webp") 1x, url("../budget/plates/how-dark-3840.webp") 2x); --f-int: image-set(url("../budget/plates/int-dark-2560.webp") 1x, url("../budget/plates/int-dark-3840.webp") 2x); --f-sec: image-set(url("../budget/plates/sec-dark-2560.webp") 1x, url("../budget/plates/sec-dark-3840.webp") 2x); }
  @media (prefers-color-scheme: dark) { :root.no-js:not([data-theme="light"]) { --f-how: image-set(url("../budget/plates/how-dark-2560.webp") 1x, url("../budget/plates/how-dark-3840.webp") 2x); --f-int: image-set(url("../budget/plates/int-dark-2560.webp") 1x, url("../budget/plates/int-dark-3840.webp") 2x); --f-sec: image-set(url("../budget/plates/sec-dark-2560.webp") 1x, url("../budget/plates/sec-dark-3840.webp") 2x); } }
}
@media (min-width: 2561px) { :root, :root:is(.hd, .no-js) { --f-how: url("../budget/plates/how-light-3840.webp"); --f-int: url("../budget/plates/int-light-3840.webp"); --f-sec: url("../budget/plates/sec-dark-3840.webp"); } :root[data-theme="dark"], :root:is(.hd, .no-js)[data-theme="dark"] { --f-how: url("../budget/plates/how-dark-3840.webp"); --f-int: url("../budget/plates/int-dark-3840.webp"); --f-sec: url("../budget/plates/sec-dark-3840.webp"); } }
/* END plate vars */

/* ---------------------------------------------------------------- 1. the film box */
.film { position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 16 / 9; background: none no-repeat 50% 50% / 100% 100%; --fade: var(--band); }
.film::after { content: ""; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--fade), transparent 16%, transparent 78%, var(--fade)),
    linear-gradient(to right, var(--fade), transparent 12%, transparent 88%, var(--fade)); }
.film__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease); }
.film__loop.is-on { opacity: 1; }
.films .sb-in .film--how, .no-js .film--how { background-image: var(--f-how); }
.films .sb-in .film--int, .no-js .film--int { background-image: var(--f-int); }
.films .sb-in .film--sec, .no-js .film--sec { background-image: var(--f-sec); }
.films .sb-in .film--price, .no-js .film--price { background-image: var(--f-price); }
.films .sb-in .film--close, .no-js .film--close { background-image: var(--f-close); }
/* lite: no films and no loops; the stage-b/premium CSS light layers stay */
.lite .film { display: none; }
:is([data-motion="reduced"], [data-motion="paused"]) .film__loop { display: none; }

/* ---------------------------------------------------------------- 2. how it works: the glass-sheet hall behind the heading
   (replaces the stage-b raking-wall plate; the pinned stage below still carries no plate, as measured in Stage B) */
:root:not(.lite) .sb-plate-story.sb-in::before, :root.no-js .sb-plate-story::before { background-image: none; }
.film--how { left: 50%; top: 0; width: max(100%, 1600px); transform: translateX(-50%); }
/* pinned: a band behind the heading only (never above the section): the plate is drawn 1400+ px wide and shows its sheets */
.story.is-pinned .film--how { left: 0; top: 0; width: 100%; height: min(470px, 60svh); aspect-ratio: auto; transform: none; background-size: max(100%, 1400px) auto; background-position: 50% 58%; }
/* stacked (phones, tablets): the hall sits behind the kicker and headline only, and fades out before the intro text */
@media (max-width: 1023.98px) {
  .film--how { width: max(100%, 640px); opacity: .7; }
  .film--how::after { background: linear-gradient(to bottom, var(--fade), transparent 12%, transparent 34%, var(--fade) 58%), linear-gradient(to right, var(--fade), transparent 14%, transparent 86%, var(--fade)); }
}
.story.is-pinned .film--how::after { background:
    linear-gradient(to bottom, var(--fade), transparent 30%, transparent 62%, var(--fade) 94%),
    linear-gradient(to right, var(--fade), transparent 12%, transparent 92%, var(--fade)); }
.story { overflow-x: clip; }

/* ---------------------------------------------------------------- 3. integrations: light threads into a glass hub (mirrored,
   so the hub lands in the left column under the heading) + a 5 s loop of light travelling along the threads */
.intg { isolation: isolate; overflow: clip; }
.film--int { left: 50%; bottom: 0; width: max(100%, 1500px); transform: translateX(-50%); }
/* text stays on calm ground: the threads fade out over the top 46% (where the heading sits) and under a soft veil
   behind the copy column; measured with tools/stage-b/contrast-px.mjs */
.film--int::after { background:
    radial-gradient(60% 38% at 22% 8%, var(--fade) 30%, transparent),
    linear-gradient(to bottom, var(--fade), var(--fade) 8%, transparent 46%, transparent 86%, var(--fade)),
    linear-gradient(to right, var(--fade), transparent 8%, transparent 90%, var(--fade)); }
.intg__art { height: clamp(220px, 24vw, 330px); }
.intg__foot { position: relative; }
@media (max-width: 899.98px) {
  .film--int { width: 240vw; left: 0; transform: translateX(-12%); }
}

/* ---------------------------------------------------------------- 4. security: a calm vault wall of glass slabs (navy, both themes) */
.ctl { isolation: isolate; }
.film--sec { --fade: var(--sm-navy); right: 0; top: 50%; width: max(100%, 1600px); transform: translateY(-50%); }
/* the floor reflections fade out before the footnote row (link + fine print stay on navy) */
.film--sec::after { background:
    linear-gradient(to bottom, var(--fade), transparent 14%, transparent 62%, var(--fade) 86%),
    linear-gradient(to right, var(--fade), transparent 10%, transparent 92%, var(--fade)); }
:root:not(.lite) .ctl.sb-in .ctl__shafts, .no-js .ctl__shafts { display: none; }
.fxo--vault { left: 0; top: 0; }
.fxo--vault img { height: 180px; }
.fxo--gate { left: 50%; top: 92px; }
.fxo--gate img { height: 150px; }
@media (max-width: 1023.98px) {
  .film--sec { top: auto; bottom: 0; transform: none; width: max(100%, 1100px); opacity: .8; }
  .fxo--vault img { height: 150px; } .fxo--gate { top: 64px; left: 46%; } .fxo--gate img { height: 120px; }
}
@media (max-width: 599.98px) { .fxo--vault img { height: 128px; } .fxo--gate img { height: 100px; } }

/* ---------------------------------------------------------------- 5. pricing: three cones of light that land on the three plans
   (replaces the stage-b horizon plate). The box is as wide as the plan grid, so the cones sit over the three columns, and
   it is lifted by 73% of its height (margin-top % = width) so the pools land on the cards' top edges. */
:root:not(.lite) .sb-plate-pricing.sb-in::before, :root.no-js .sb-plate-pricing::before { background-image: none; }
.plans__stage { position: relative; isolation: isolate; }
.pricing { overflow-x: clip; }   /* the cone plate is 112% of the plan grid wide */
.film--price { left: -6%; right: -6%; top: 0; width: 112%; margin-top: -45%; }
/* the lifted cone plate sits in .plans__stage, which paints above earlier plain blocks, so its opaque fade covered the
   "Two bills" heading and cards; lift the copy above the stage */
.pricing .sec-head, .pricing .bills, .pricing .bills__under { position: relative; z-index: 2; }
.film--price::after { background:
    linear-gradient(to bottom, var(--fade), var(--fade) 26%, transparent 50%, transparent 70%, var(--fade) 80%),
    linear-gradient(to right, var(--fade), transparent 10%, transparent 90%, var(--fade)); }
@media (max-width: 899.98px) { .film--price { display: none; } }

/* ---------------------------------------------------------------- 6. close: the S stands on a lit glass dais under a soft
   column of light (+ a 5 s haze loop). The dais top is at 68.5% of the plate; the plate is 5.3x the S wide. */
:root:not(.lite) .sb-plate-close.sb-in, :root.no-js .sb-plate-close { background-image: none; }
.film--close { --fade: var(--sm-navy); --sw: clamp(120px, 14vw, 170px); left: 50%; width: calc(var(--sw) * 5.3); z-index: -2;
  top: calc(var(--sw) - var(--sw) * 5.3 * .5625 * .685 + 4px); transform: translateX(-50%); }
.film--close::after { background: radial-gradient(closest-side, transparent 62%, var(--fade)); }
.lite .close picture::after { display: block; }
:root:not(.lite) .close picture::after { left: 20%; right: 20%; bottom: -6px; height: 12px; }

/* ---------------------------------------------------------------- 7. new 3D objects (keyed cut-outs, .fxo depth from fx.js) */
.wkx__in { position: relative; }
.wkx__obj { position: absolute; right: 0; top: -18px; width: 200px; height: 170px; pointer-events: none; }
.fxo--schedule { right: 10px; top: 0; }
.fxo--schedule img { height: 130px; }
@media (max-width: 899.98px) { .wkx__obj { width: 120px; height: 100px; top: -40px; } .fxo--schedule img { height: 84px; } }
@media (max-width: 599.98px) { .wkx__obj { display: none; } }
.tpls__in { position: relative; }
.tpls__obj { position: absolute; right: 2%; top: -10px; width: 180px; height: 160px; pointer-events: none; }
.fxo--bhub { right: 0; top: 0; }
.fxo--bhub img { height: 150px; }
@media (max-width: 1399.98px) { .tpls__obj { display: none; } }
.lim__obj { position: relative; height: 176px; }
.fxo--runlog { left: 50%; top: 0; transform: translateX(-50%); }
.fxo--runlog img { height: 160px; }
@media (max-width: 899.98px) { .lim__obj { display: none; } }

/* ---------------------------------------------------------------- 8. industry scene tiles (CGI vignettes, navy in both themes) */
.ind { gap: 10px; }
.ind a { padding: 6px 6px 10px; gap: 8px; background: linear-gradient(180deg, #0b1a30, #071326); box-shadow: 0 0 0 1px rgb(174 201 239 / .14), 0 18px 30px -22px rgb(0 0 0 / .7); color: var(--sm-ice-soft); transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .2s; }
.ind a:hover, .ind a:focus-visible { color: var(--sm-ice); box-shadow: 0 0 0 1px rgb(110 226 90 / .45), 0 26px 36px -22px rgb(0 0 0 / .75), 0 0 28px -8px rgb(74 158 255 / .45); }
:root[data-theme="light"] .ind a { box-shadow: 0 0 0 1px rgb(2 10 25 / .08), 0 18px 30px -20px rgb(2 10 25 / .45); }
.ind__art { height: auto; aspect-ratio: 1; padding: 0; overflow: hidden; background: #050f22; place-items: stretch; }
.ind__art img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) { :root[data-motion="full"]:not(.lite) .ind a:hover .ind__art img { transform: scale(1.06); } }
.ind__n { font-weight: 600; }

/* ---------------------------------------------------------------- 9. blog cards: CGI header, tag + date, title, quoted excerpt */
.res__sub { margin-top: 10px; max-width: 56ch; }
.res__list { gap: 18px; }
.post { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 20px; overflow: hidden; background: var(--surface);
  box-shadow: var(--card-shadow); transition: box-shadow .35s var(--ease); }
:root[data-theme="dark"] .post { background: linear-gradient(180deg, #0b1a30, #081729); box-shadow: 0 0 0 1px rgb(174 201 239 / .12), 0 30px 50px -34px rgb(0 0 0 / .9); }
.post__art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #050f22; }
.post__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transition: transform .8s var(--ease); }
.post__art::after { content: ""; position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(to bottom, transparent, rgb(5 15 34 / .55)); }
.post__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 20px; }
.post__meta { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-size: .74rem; color: var(--ink-faint); }
.post__tag { letter-spacing: .12em; text-transform: uppercase; color: var(--system-text); }
.post__t { margin: 0; font: 700 1.14rem/1.28 var(--f-display); font-stretch: 104%; letter-spacing: -.01em; text-wrap: balance; }
.post__t a { color: var(--ink); text-decoration: none; }
.post__t a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }   /* whole card is the link */
.post__x { margin: 0; flex: 1; font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }
.post__go { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0; font-weight: 600; font-size: .9rem; color: var(--action-text); }
.post__go .ico { transition: transform .2s var(--ease); }
.post:hover .post__t a, .post:focus-within .post__t a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.post:hover .post__go .ico, .post:focus-within .post__go .ico { transform: translateX(3px); }
.post:focus-within { box-shadow: 0 0 0 2px var(--focus, var(--sm-green)), var(--card-shadow); }
.post__t a:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) { :root[data-motion="full"]:not(.lite) .post:hover .post__art img { transform: scale(1.05); } }
.res__note { margin-top: 14px; }
@media (max-width: 1099.98px) and (min-width: 700px) { .res__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699.98px) { .res__list { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- 10. content-visibility size hints, re-measured after this pass
   (tools/budget/heights.mjs: rendered heights at 1440 / 1024 / 768 / 390 px wide) */
.js .wkx { contain-intrinsic-size: auto 790px; } .js .intg { contain-intrinsic-size: auto 1010px; } .js .ctl { contain-intrinsic-size: auto 935px; }
.js .lim { contain-intrinsic-size: auto 1010px; } .js .res { contain-intrinsic-size: auto 1390px; } .js .bridge { contain-intrinsic-size: auto 540px; } .js .pricing { contain-intrinsic-size: auto 1470px; }
@media (max-width: 1279.98px) { .js .res { contain-intrinsic-size: auto 1870px; } .js .bridge { contain-intrinsic-size: auto 1055px; } .js .pricing { contain-intrinsic-size: auto 1665px; } .js .ctl { contain-intrinsic-size: auto 1005px; } }
@media (max-width: 899.98px) { .js .wkx { contain-intrinsic-size: auto 960px; } .js .intg { contain-intrinsic-size: auto 1100px; } .js .ctl { contain-intrinsic-size: auto 1280px; } .js .lim { contain-intrinsic-size: auto 1070px; } .js .res { contain-intrinsic-size: auto 1740px; } .js .bridge { contain-intrinsic-size: auto 760px; } .js .pricing { contain-intrinsic-size: auto 2235px; } }
@media (max-width: 599.98px) { .js .wkx { contain-intrinsic-size: auto 1635px; } .js .intg { contain-intrinsic-size: auto 1420px; } .js .ctl { contain-intrinsic-size: auto 1775px; } .js .lim { contain-intrinsic-size: auto 1325px; } .js .res { contain-intrinsic-size: auto 3125px; } .js .bridge { contain-intrinsic-size: auto 1230px; } .js .pricing { contain-intrinsic-size: auto 2660px; } }
/* the old resources rule styled every link in a card as a padded tile; the blog card's title link is plain text */
.res__i .post__t a { position: static; display: inline; padding: 0; gap: 0; height: auto; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.close picture { margin-bottom: 10px; }


/* the integrations loop is dark footage: light theme keeps the light still */
:root:not([data-theme="dark"]) .film__loop[data-dark-only] { display: none; }

@media (max-width: 599.98px) { .close picture { margin-bottom: 22px; } }