/* Pricing page: src/assets/css/world-pricing.css (24 September 2026).
   Loaded last, after homepage-fonts, homepage-world, world-effects and
   world-interior.css. Every rule is scoped to the Pricing body, so nothing here
   reaches the homepage, About or Features. The shared hooks (.world-interior,
   the .world-interior-hero band, [data-reveal], base typography, header and
   footer chrome) belong to world-interior.css and are not restyled here, apart
   from the band title (set large, as About's and Features' are) and the band
   height (a little shorter, so the price shows in the first screen).

   Page anatomy
   1. Band: the eyebrow and the h1.
   2. The plan. From 1000px wide and 600px tall, two columns: the pricing
      object on a sticky stage on the left (world/pricing-object.js, the still
      PNG until it is live), and on the right the offer (the price) and the
      stream of copy that assembles the object as it is read. Below that,
      one column: the offer, the stage, then the stream.
   3. "Getting started": the three payments as a stepped timeline. Its track
      fills with the scroll and each amount is marked as its step is reached
      (world/pricing.js); without JavaScript or with reduced motion it is
      drawn complete.
   4. The close, on the yellow panel (as Features' index): the demo call, the
      minimum cost and the fine print with the terms link.

   Asset urls are relative to assets/css/. */

.superstrate-interior-page[data-current-page="pricing"]{
 --pr-ink:#1c1b1f;                     /* = --ink */
 --pr-muted:#45473f;                   /* = --ink-muted: 10.6:1 on white, 7.6:1 on the yellow panel */
 --pr-yellow:#ffd64e;                  /* Headline Gold: the close panel */
 --pr-signal:#ffd700;                  /* Signal Yellow: reached nodes, amount marks */
 --pr-rule:rgba(28,27,31,.14);
 --pr-track:rgba(28,27,31,.16);
 --pr-prose:clamp(18px,1.05vw,20px);
 --pr-lede:clamp(20px,1.3vw,25px);
 --pr-lead:clamp(21px,1.45vw,28px);    /* a step's first sentence */
 --pr-node:18px;
 --pr-measure:620px;
 --pr-pad:clamp(56px,5.6vw,112px);
 --pr-stage-top:calc(var(--frame-inset) + 20px);
}

/* Current page, as world-interior.css marks About and Features: visible with
   JS off (body attribute + href) as well as on chrome.js's aria-current.
   COUPLED TO THE INCLUDE PARAMS: "/pricing" is the "pricing" value this page
   passes to world-header.html. */
.superstrate-interior-page[data-current-page="pricing"] .world-header nav a[href="/pricing"]{
 text-decoration:underline;text-decoration-color:#ffd700;text-decoration-thickness:2px;text-underline-offset:.4em;
}
.superstrate-interior-page[data-current-page="pricing"] .world-menu nav a[href="/pricing"]{
 text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:max(2px,.05em);text-underline-offset:.16em;
}

/* ------------------------------------------------------------------ band */
/* Only where the shared band has a floor (world-interior.css sizes it to its content on phones and short screens). */
@media (min-width:601px) and (min-height:501px){
 .superstrate-interior-page[data-current-page="pricing"] .world-interior-hero{min-height:clamp(380px,50svh,660px)}
}
.superstrate-interior-page[data-current-page="pricing"] .world-interior-eyebrow{display:flex;align-items:center;gap:12px;width:fit-content;cursor:default}
.superstrate-interior-page[data-current-page="pricing"] .world-interior-eyebrow svg{width:14px;height:14px;flex-shrink:0}
.superstrate-interior-page[data-current-page="pricing"] .pricing-title{
 margin:0;max-width:none;
 font-size:clamp(40px,4.4vw,84px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance;
}
/* The second sentence takes its own line, in Headline Gold (a headline's highlight). */
.superstrate-interior-page[data-current-page="pricing"] .pricing-title .world-gold{display:block;color:var(--wi-gold)}

/* ------------------------------------------------------------------ plan */
.superstrate-interior-page[data-current-page="pricing"] .pricing-plan{padding-block:var(--pr-pad) calc(var(--pr-pad) * 1.15)}
.superstrate-interior-page[data-current-page="pricing"] .pricing-plan-inner{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(36px,4vw,56px)}
.superstrate-interior-page[data-current-page="pricing"] .pricing-offer,
.superstrate-interior-page[data-current-page="pricing"] .pricing-stream{min-width:0;max-width:var(--pr-measure);color:var(--pr-ink)}

/* The offer. The price is display type: the currency set small and high, the
   figure large, the period beside it; the scope underneath. */
.superstrate-interior-page[data-current-page="pricing"] .pricing-price{margin:0;max-width:none}
.superstrate-interior-page[data-current-page="pricing"] .pricing-figure{
 display:flex;align-items:baseline;flex-wrap:wrap;
 font-weight:700;color:var(--pr-ink);
 font-size:clamp(84px,8.2vw,164px);line-height:.92;letter-spacing:-.055em;
 font-variant-numeric:lining-nums tabular-nums;
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-currency{align-self:flex-start;margin-top:.1em;font-size:clamp(28px,2.8vw,56px);letter-spacing:-.02em;line-height:1}
.superstrate-interior-page[data-current-page="pricing"] .pricing-figure-num{margin-left:.04em}
.superstrate-interior-page[data-current-page="pricing"] .pricing-figure-unit{margin-left:.5em;font-size:max(22px,.2em);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.superstrate-interior-page[data-current-page="pricing"] .pricing-scope{display:block;margin-top:16px;font-size:clamp(18px,1.2vw,22px);line-height:1.4;color:var(--pr-muted)}
.superstrate-interior-page[data-current-page="pricing"] .pricing-setup{
 margin:clamp(24px,2.2vw,36px) 0 0;padding-top:clamp(18px,1.6vw,26px);max-width:none;
 border-top:1px solid var(--pr-rule);
 font-size:clamp(22px,1.75vw,33px);line-height:1.2;letter-spacing:-.02em;color:var(--pr-muted);
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-setup strong{font-weight:700;color:var(--pr-ink)}

/* The stream. */
.superstrate-interior-page[data-current-page="pricing"] .pricing-stream > p,
.superstrate-interior-page[data-current-page="pricing"] .pricing-start{margin:0;max-width:none}
.superstrate-interior-page[data-current-page="pricing"] .pricing-stream > :is(p,section) + :is(p,section){margin-top:clamp(40px,3.4vw,64px)}
.superstrate-interior-page[data-current-page="pricing"] .pricing-lede{font-size:var(--pr-lede);line-height:1.5;letter-spacing:-.01em}
.superstrate-interior-page[data-current-page="pricing"] .pricing-included{font-size:var(--pr-prose);line-height:1.6}
.superstrate-interior-page[data-current-page="pricing"] .pricing-included-lead{
 display:block;margin-bottom:.55em;
 font-size:clamp(24px,1.8vw,34px);line-height:1.12;letter-spacing:-.03em;font-weight:700;
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-included strong:not(.pricing-included-lead){font-weight:600}
/* The rate protection: the About sign-off's yellow bar marks it. */
.superstrate-interior-page[data-current-page="pricing"] .pricing-protected{font-size:var(--pr-lede);line-height:1.45;letter-spacing:-.01em}
.superstrate-interior-page[data-current-page="pricing"] .pricing-protected::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--pr-signal);margin-bottom:clamp(16px,1.3vw,22px)}
.superstrate-interior-page[data-current-page="pricing"] .pricing-protected strong{font-weight:600}
.superstrate-interior-page[data-current-page="pricing"] .pricing-quoted{font-size:var(--pr-prose);line-height:1.6;color:var(--pr-muted)}

/* ------------------------------------------------------ getting started */
.superstrate-interior-page[data-current-page="pricing"] .pricing-start{padding-top:clamp(8px,1.4vw,24px)}
.superstrate-interior-page[data-current-page="pricing"] .pricing-start-title{margin:0 0 clamp(28px,2.4vw,44px);font-size:clamp(32px,2.6vw,50px);line-height:1.08;letter-spacing:-.035em}
.superstrate-interior-page[data-current-page="pricing"] .pricing-steps{list-style:none;margin:0;padding:0;max-width:none}
.superstrate-interior-page[data-current-page="pricing"] .pricing-step{
 --pr-node-top:calc(var(--pr-lead) * .66 - var(--pr-node) / 2);
 position:relative;margin:0;padding:0 0 0 calc(var(--pr-node) + clamp(20px,1.7vw,30px));
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-step + .pricing-step{margin-top:clamp(34px,2.8vw,52px)}
.superstrate-interior-page[data-current-page="pricing"] .pricing-step p{margin:0;max-width:none;font-size:var(--pr-prose);line-height:1.6;color:var(--pr-muted)}
.superstrate-interior-page[data-current-page="pricing"] .pricing-step-lead{
 display:block;
 font-size:var(--pr-lead);line-height:1.32;letter-spacing:-.018em;font-weight:500;color:var(--pr-ink);
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-step-note{display:block;margin-top:.6em}
/* The node: a ring on the track, filled Signal Yellow once reached. */
.superstrate-interior-page[data-current-page="pricing"] .pricing-step::before{
 content:"";position:absolute;left:0;top:var(--pr-node-top);z-index:1;
 width:var(--pr-node);height:var(--pr-node);box-sizing:border-box;border-radius:50%;
 border:2px solid var(--pr-ink);background:var(--pr-signal);
 transition:background-color .35s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1);
}
/* The track: from this node down to the next one. It fills with ink as the
   page scrolls (--pr-fill, written by world/pricing.js; 1 = complete, the
   default without JavaScript). The last step's track runs on past its node
   as a fading dashed line: the subscription goes on renewing. */
.superstrate-interior-page[data-current-page="pricing"] .pricing-step::after{
 content:"";position:absolute;left:calc(var(--pr-node) / 2 - 1px);width:2px;
 top:calc(var(--pr-node-top) + var(--pr-node) / 2);
 bottom:calc(-1 * clamp(34px,2.8vw,52px) - var(--pr-node-top) - var(--pr-node) / 2);
 background:linear-gradient(var(--pr-ink),var(--pr-ink)) no-repeat top / 100% calc(var(--pr-fill,1) * 100%),var(--pr-track);
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-step:last-child::after{
 bottom:auto;height:clamp(72px,6vw,110px);
 background:repeating-linear-gradient(to bottom,var(--pr-ink) 0 6px,transparent 6px 12px);
 -webkit-mask:linear-gradient(to bottom,#000 calc(var(--pr-fill,1) * 55%),transparent calc(var(--pr-fill,1) * 100%));
 mask:linear-gradient(to bottom,#000 calc(var(--pr-fill,1) * 55%),transparent calc(var(--pr-fill,1) * 100%));
 opacity:.45;
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-steps{padding-bottom:clamp(40px,3.4vw,72px)}
/* The amount a step asks for, marked with the Features highlighter; the parts
   that make up the second payment are only set heavier. */
.superstrate-interior-page[data-current-page="pricing"] .pricing-amount{
 font-weight:700;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;
 background:linear-gradient(var(--pr-signal),var(--pr-signal)) no-repeat 0 88% / 100% .36em;
 transition:background-size .7s cubic-bezier(.16,1,.3,1);
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-amount--part{font-weight:600;background:none}
/* Scroll state (world/pricing.js adds html.pricing-js only when motion is
   allowed): an unreached node is an empty ring, its amount not yet marked. */
html.pricing-js .superstrate-interior-page[data-current-page="pricing"] .pricing-step:not(.is-reached)::before{background:#fff;transform:scale(.78)}
html.pricing-js .superstrate-interior-page[data-current-page="pricing"] .pricing-step:not(.is-reached) .pricing-amount:not(.pricing-amount--part){background-size:0% .36em}
html.pricing-js .superstrate-interior-page[data-current-page="pricing"][data-motion-paused="true"] .pricing-amount{transition:none}

/* ---------------------------------------------------------------- legend */
/* The phrases the live object answers (world/pricing.js, section 4): marked
   with the page's highlighter while they, or their part of the object, are
   under a mouse or pen. They are words, not links: no pointer cursor, no tab
   stop, no underline. The big monthly figure marks its number and its period,
   not the whole row. Without the live object nothing is ever marked. */
.superstrate-interior-page[data-current-page="pricing"] [data-pricing-legend]:not(.pricing-figure),
.superstrate-interior-page[data-current-page="pricing"] .pricing-figure[data-pricing-legend] > :is(.pricing-figure-num,.pricing-figure-unit){
 background:linear-gradient(var(--pr-signal),var(--pr-signal)) no-repeat 0 88% / 0% .36em;
 -webkit-box-decoration-break:clone;box-decoration-break:clone;
 transition:background-size .32s cubic-bezier(.16,1,.3,1);
}
.superstrate-interior-page[data-current-page="pricing"] [data-pricing-legend].is-legend:not(.pricing-figure),
.superstrate-interior-page[data-current-page="pricing"] .pricing-figure.is-legend > .pricing-figure-unit{background-size:100% .36em}
/* At display size the mark is kept to a stroke's weight rather than a third of the numerals. */
.superstrate-interior-page[data-current-page="pricing"] .pricing-figure[data-pricing-legend] > .pricing-figure-num{background-size:0% .2em}
.superstrate-interior-page[data-current-page="pricing"] .pricing-figure.is-legend > .pricing-figure-num{background-size:100% .2em}
.superstrate-interior-page[data-current-page="pricing"][data-motion-paused="true"] :is([data-pricing-legend],.pricing-figure > span){transition:none}

/* ----------------------------------------------------------------- stage */
.superstrate-interior-page[data-current-page="pricing"] .pricing-stage-col{min-width:0}
.superstrate-interior-page[data-current-page="pricing"] .pricing-stage{position:relative;display:flex;align-items:center;justify-content:center}
.superstrate-interior-page[data-current-page="pricing"] .pricing-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.superstrate-interior-page[data-current-page="pricing"] .pricing-stage.is-live{cursor:grab}
.superstrate-interior-page[data-current-page="pricing"] .pricing-stage.is-dragging{cursor:grabbing}
/* The still (the homepage's own pricing.png) is cropped to the object: 970 x 450
   of its 1440 x 900 pixels, on the still's own ground, so it reads as a panel. */
.superstrate-interior-page[data-current-page="pricing"] .pricing-still-frame{
 position:relative;overflow:hidden;width:100%;aspect-ratio:970 / 450;
 border-radius:var(--frame-radius);background:#f7f2e9;
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-still{position:absolute;left:-34.02%;top:-55.56%;width:148.45%;max-width:none;height:auto}
.superstrate-interior-page[data-current-page="pricing"] .pricing-stage.is-live .pricing-still-frame{visibility:hidden}

/* ------------------------------------------------------------------ close */
.superstrate-interior-page[data-current-page="pricing"] .pricing-close{position:relative;isolation:isolate;padding-block:clamp(64px,6.2vw,124px) clamp(44px,4vw,72px);color:var(--pr-ink)}
.superstrate-interior-page[data-current-page="pricing"] .pricing-close::before{
 content:"";position:absolute;inset:0 var(--frame-inset);z-index:-1;
 border-radius:var(--frame-radius);background:var(--pr-yellow);
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-close-inner{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(32px,3vw,48px)}
.superstrate-interior-page[data-current-page="pricing"] .pricing-close-inner > p{margin:0;max-width:none}
.superstrate-interior-page[data-current-page="pricing"] .pricing-minimum{font-size:clamp(20px,1.45vw,27px);line-height:1.3;letter-spacing:-.015em}
.superstrate-interior-page[data-current-page="pricing"] .pricing-minimum-label{display:block;margin-bottom:.35em;font-weight:600}
/* The total, at the figure's size (no comma after it: the owner's call, 24
   September 2026); the rest of the sentence sits beside it (two balanced lines)
   or, below 1000px, under it. */
.superstrate-interior-page[data-current-page="pricing"] .pricing-minimum-total{
 display:inline-block;white-space:nowrap;vertical-align:baseline;
 font-size:clamp(76px,8.2vw,164px);line-height:.95;letter-spacing:-.055em;font-weight:700;
 font-variant-numeric:lining-nums tabular-nums;
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-minimum-figure{display:inline-block;font-weight:700}
.superstrate-interior-page[data-current-page="pricing"] .pricing-minimum-rest{display:block;margin-top:.5em;font-weight:500}
/* The demo call on the yellow panel: the site's ink button (the yellow demo
   fill would vanish on this ground). data-demo stays the click hook. */
.superstrate-interior-page[data-current-page="pricing"] .pricing-close .world-button[data-demo]{
 min-height:56px;box-sizing:border-box;padding:18px 24px;gap:28px;font-size:16px;font-weight:500;
 background:var(--pr-ink);color:#fffbf2;
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-close .world-button[data-demo]:hover{background:#384b30;color:#fffbf2}
.superstrate-interior-page[data-current-page="pricing"] .pricing-close .world-button[data-demo]:focus-visible{outline:2px solid var(--pr-ink);outline-offset:4px}
.superstrate-interior-page[data-current-page="pricing"] .pricing-fine{
 display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 40px;
 padding-top:20px;border-top:1px solid rgba(28,27,31,.28);
 font-size:15px;line-height:1.5;color:var(--pr-muted);
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-fine p{margin:0;max-width:62ch}
.superstrate-interior-page[data-current-page="pricing"] .pricing-terms{
 color:var(--pr-ink);font-weight:500;
 text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;transition:text-decoration-thickness .2s;
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-terms:hover{text-decoration-thickness:2px}
.superstrate-interior-page[data-current-page="pricing"] .pricing-terms:focus-visible{outline:2px solid var(--pr-ink);outline-offset:3px;border-radius:2px}

/* -------------------------------------------- two columns: 1000px+ wide */
@media (min-width:1000px){
 .superstrate-interior-page[data-current-page="pricing"] .pricing-plan-inner{
  grid-template-columns:minmax(0,54fr) minmax(0,46fr);grid-template-rows:auto 1fr;
  column-gap:clamp(40px,4.4vw,96px);row-gap:clamp(48px,4.4vw,80px);align-items:start;
 }
 .superstrate-interior-page[data-current-page="pricing"] .pricing-offer{grid-column:2;grid-row:1}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-stage-col{grid-column:1;grid-row:1 / span 2;align-self:stretch}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-stream{grid-column:2;grid-row:2}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-close-inner{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,4vw,80px);align-items:end}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-close-action{grid-column:2;grid-row:1;align-self:end;padding-bottom:.9em}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-minimum{grid-column:1;grid-row:1}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-minimum-rest{display:inline-block;max-width:11em;margin:0 0 0 .5em;vertical-align:baseline;text-wrap:balance}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-fine{grid-column:1 / -1;grid-row:2}
}
/* The hold: the stage stays in view while the stream is read, when the
   viewport is tall enough for it. The object is fitted to the stage and
   centred in whatever part of it is on screen (pricing-object.js). */
@media (min-width:1000px) and (min-height:600px){
 .superstrate-interior-page[data-current-page="pricing"] .pricing-stage{
  position:sticky;top:var(--pr-stage-top);
  height:calc(100svh - 2 * var(--pr-stage-top));
 }
 /* The still alone (no JavaScript, reduced motion, no WebGL) sits at the top of
    the held stage, beside the price, not half a screen below it. */
 .superstrate-interior-page[data-current-page="pricing"] .pricing-stage:not(.is-live){align-items:flex-start;padding-top:clamp(0px,3svh,40px)}
}

/* Wide but short (a landscape laptop under 600px tall): no hold, the stage
   simply scrolls with the plan. */
@media (min-width:1000px) and (max-height:599px){
 .superstrate-interior-page[data-current-page="pricing"] .pricing-stage.is-live{aspect-ratio:16 / 10}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-stage.is-live .pricing-still-frame{position:absolute}
}

/* ------------------------------------------------- one column: < 1000px */
@media (max-width:999px){
 /* The close reads minimum cost, then the call, then the fine print. */
 .superstrate-interior-page[data-current-page="pricing"] .pricing-close-action{order:1}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-fine{order:2}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-stage.is-live{aspect-ratio:4 / 3}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-stage.is-live .pricing-still-frame{position:absolute}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-stream{max-width:var(--pr-measure)}
}
@media (min-width:600px) and (max-width:999px){
 .superstrate-interior-page[data-current-page="pricing"] .pricing-stage.is-live{aspect-ratio:16 / 10}
}

/* --------------------------------------------------------- phone: <600px */
@media (max-width:599px){
 .superstrate-interior-page[data-current-page="pricing"]{--pr-pad:48px;--pr-node:16px}
 /* Match the band's text edge (frame inset + 20px), as Features does. */
 .superstrate-interior-page[data-current-page="pricing"] .pricing-plan-inner,
 .superstrate-interior-page[data-current-page="pricing"] .pricing-close-inner{padding-inline:calc(var(--frame-inset) + 20px)}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-title{font-size:clamp(34px,9.6vw,44px);line-height:1.04;letter-spacing:-.04em}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-figure{font-size:clamp(68px,21vw,92px)}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-figure-unit{font-size:20px}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-scope{font-size:17px;margin-top:12px}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-setup{font-size:21px}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-lede,
 .superstrate-interior-page[data-current-page="pricing"] .pricing-protected{font-size:19px}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-included-lead{font-size:24px}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-start-title{font-size:30px}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-step{--pr-lead:20px;padding-left:calc(var(--pr-node) + 18px)}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-step p{font-size:17px}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-minimum-total{font-size:clamp(64px,19vw,84px)}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-minimum{font-size:19px}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-close .world-button[data-demo]{width:100%;justify-content:space-between}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-fine{font-size:14px}
}
@media (max-height:500px){
 .superstrate-interior-page[data-current-page="pricing"] .pricing-figure{font-size:clamp(56px,7vw,84px)}
}

/* --------------------------------------------------------------- motion */
@media (prefers-reduced-motion:reduce){
 .superstrate-interior-page[data-current-page="pricing"] .pricing-step::before,
 .superstrate-interior-page[data-current-page="pricing"] .pricing-amount,
 .superstrate-interior-page[data-current-page="pricing"] :is([data-pricing-legend],.pricing-figure > span){transition:none}
}

/* ---------------------------------------------------------- how it works */
/* (25 September 2026) The setup timeline, woven in after the plan's payment
   timeline ("Getting started") and before the close: sections/superstrate-
   pricing/sec-how.html, its copy moved verbatim from the homepage's How it
   works chapter. It repeats the plan's composition, mirrored for the page's
   rhythm: from 1000px wide the eyebrow, the heading and the three phases on
   the left, on the band's text edge, and the homepage's stair (object08) on a
   sticky stage on the right, built tread by tread as the phases are read
   (world/pricing.js section 5 mounts world/setup-object.js; the still,
   setup.png, until it is live). Below that, one column: the heading, the
   stage, then the phases. The phase labels are the stair's legend, marked
   with the page's highlighter as the plan's phrases are. Everything here is
   added; nothing above is restyled. */
.superstrate-interior-page[data-current-page="pricing"] .pricing-how{padding-block:var(--pr-pad) calc(var(--pr-pad) * 1.15)}
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-inner{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(36px,4vw,56px)}
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-head,
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-stream{min-width:0;max-width:var(--pr-measure);color:var(--pr-ink)}
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-eyebrow{margin:0 0 clamp(22px,2vw,32px)}
/* The heading at the page's section-opener size; its second sentence takes its own line. */
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-title{
 margin:0;max-width:none;
 font-size:clamp(36px,3.2vw,62px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance;
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-title-line{display:block}
/* The phases: each opens with its label at the size of the plan's "All
   features included" lead, over a hairline (the homepage chapter ruled its
   phases too). */
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-step{
 margin:0;max-width:none;padding-top:clamp(20px,1.8vw,30px);border-top:1px solid var(--pr-rule);
 font-size:var(--pr-lede);line-height:1.5;letter-spacing:-.01em;
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-step + .pricing-how-step{margin-top:clamp(40px,3.4vw,64px)}
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-phase{
 display:block;width:fit-content;margin-bottom:.5em;
 font-size:clamp(24px,1.8vw,34px);line-height:1.12;letter-spacing:-.03em;font-weight:700;
 /* The legend's mark (as [data-pricing-legend] above): off until the phase, or its treads, are under a mouse or pen. */
 background:linear-gradient(var(--pr-signal),var(--pr-signal)) no-repeat 0 88% / 0% .36em;
 -webkit-box-decoration-break:clone;box-decoration-break:clone;
 transition:background-size .32s cubic-bezier(.16,1,.3,1);
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-phase.is-legend{background-size:100% .36em}
.superstrate-interior-page[data-current-page="pricing"][data-motion-paused="true"] .pricing-how-phase{transition:none}

/* The stage, as the plan's. The still (the homepage's own setup.png) is
   cropped to the stair: 880 x 884 of its 1440 x 900 pixels, on its own ground. */
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-stage-col{min-width:0}
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-stage{position:relative;display:flex;align-items:center;justify-content:center}
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-stage > canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-stage.is-live{cursor:grab}
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-stage.is-dragging{cursor:grabbing}
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-still-frame{
 position:relative;overflow:hidden;width:100%;aspect-ratio:880 / 884;
 border-radius:var(--frame-radius);background:#fbf6e4;
}
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-still{position:absolute;left:-33.75%;top:-1.81%;width:163.64%;max-width:none;height:auto}
.superstrate-interior-page[data-current-page="pricing"] .pricing-how-stage.is-live .pricing-how-still-frame{visibility:hidden}

/* Two columns from 1000px wide, the plan's mirrored: the stream on the left. */
@media (min-width:1000px){
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-inner{
  grid-template-columns:minmax(0,46fr) minmax(0,54fr);grid-template-rows:auto 1fr;
  column-gap:clamp(40px,4.4vw,96px);row-gap:clamp(48px,4.4vw,80px);align-items:start;
 }
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-head{grid-column:1;grid-row:1}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-stage-col{grid-column:2;grid-row:1 / span 2;align-self:stretch}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-stream{grid-column:1;grid-row:2}
}
/* The hold, as the plan's: the stage stays in view while the phases are read.
   The phases are spaced so each holds the reading line while its treads build. */
@media (min-width:1000px) and (min-height:600px){
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-stage{
  position:sticky;top:var(--pr-stage-top);
  height:calc(100svh - 2 * var(--pr-stage-top));
 }
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-stage:not(.is-live){align-items:flex-start;padding-top:clamp(0px,3svh,40px)}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-still-frame{max-width:calc(100svh - 2 * var(--pr-stage-top) - clamp(0px,3svh,40px))}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-step + .pricing-how-step{margin-top:clamp(64px,19svh,200px)}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-stream{padding-bottom:clamp(0px,24svh,260px)}
}
@media (min-width:1000px) and (max-height:599px){
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-stage.is-live{aspect-ratio:1 / 1}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-stage.is-live .pricing-how-still-frame{position:absolute}
}
@media (max-width:999px){
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-stage.is-live{aspect-ratio:1 / 1}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-stage.is-live .pricing-how-still-frame{position:absolute}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-still-frame{max-width:640px}
}
@media (min-width:600px) and (max-width:999px){
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-stage.is-live{aspect-ratio:4 / 3}
}
@media (max-width:599px){
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-inner{padding-inline:calc(var(--frame-inset) + 20px)}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-title{font-size:clamp(30px,8.6vw,38px);line-height:1.06}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-step{font-size:19px}
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-phase{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
 .superstrate-interior-page[data-current-page="pricing"] .pricing-how-phase{transition:none}
}