/* Kraftflix component corrections.
   Tokens live in positioning.css :root; this file holds only the rules that
   apply them — type floors, contrast, target size, spacing rhythm, motion.
   Nothing here declares a colour that is not in the palette. */

/* ── Focus: visible, 3:1+, and never hidden behind the sticky header ────── */
html{scroll-padding-top:calc(var(--header-h) + var(--space-2))}
:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:3px;
}
.trust-section :focus-visible,
.closing-section :focus-visible,
.site-header :focus-visible{outline-color:var(--focus-ring-on-dark)}
.site-header :focus-visible{outline-color:var(--focus-ring)}
.skip-link:focus{top:12px;border-radius:var(--radius-sm);box-shadow:var(--shadow-2);font-weight:750}

/* ── Type ──────────────────────────────────────────────────────────────── */
/* Label sizes now come from the tokens in positioning.css; only the tracking
   that the larger sizes need is set here. */
.eyebrow{letter-spacing:.14em}
.hero-bottom,.footer-bottom,.hero-proof{letter-spacing:.06em}
.workspace-chips span,.ad-float-card b,.floating-output strong{letter-spacing:0}
.floating-output strong,.ad-visual-bottom strong{font-size:var(--text-xs);letter-spacing:-.01em}

/* Body copy: 1.5+ line-height, measure capped */
.showcase-flow p,
.workflow-cards p,
.product-card p,
.ad-audience strong,
.segment-benefits p,
.trust-grid p,
.faq-list p{font-size:var(--text-sm);line-height:1.6}
.hero-lead,.section-heading p,.split-heading>p,.ad-copy>p,
.trust-layout>div>p,.closing-section p{line-height:1.6}

/* ── Contrast: every muted tone below replaces a sub-4.5:1 grey ─────────── */
p{color:var(--text-muted)}
.audience-inner span,.hero-bottom,.hero-proof,.hero-eligibility,
.footer-bottom,.floating-output div>span,.ad-visual-top,.ad-visual-bottom,
.ad-float-card small,.workspace-preview-note{color:var(--text-subtle)}
.audience-inner strong,.ad-visual-bottom strong,.floating-output strong,
.ad-float-card b{color:var(--text-strong)}
.workspace-kicker,.floating-output small,.product-card-head,
.footer-main>div>span,.preview-toolbar,.segment-row>span,
.workflow-cards article>span,.ad-segments span{color:var(--text-violet)}
.segment-benefits p,.showcase-flow p,.workflow-cards p,
.product-card p,.faq-list p{color:var(--text-muted)}
.ad-audience strong,.segment-row>div span{color:var(--text-body)}
.footer-main a:not(.brand),.footer-main p{color:var(--text-muted)}
.desktop-nav a,.header-contact{color:var(--text-body)}
.hero-path-picker button{color:var(--text-body)}

/* Dark surfaces */
.trust-layout>div>p,.trust-grid p{color:var(--text-muted-on-dark)}
.trust-grid h3{color:var(--neutral-0)}
.trust-grid article>span{color:var(--violet-300)}
.closing-section p{color:var(--violet-100)}

/* Mock-window chrome on dark imagery */
.visual-overlay small,.image-caption,.concept-badge{color:var(--neutral-0)}

/* ── Target size: WCAG 2.2 AA (24px), 44px on coarse pointers ───────────── */
.inline-link,
.hero-demo,
.footer-main a:not(.brand),
.faq-list p a,
.product-card>a{display:inline-flex;align-items:center;min-height:24px}
/* Header links reach 24px through padding — setting display here would
   override the responsive rule that hides .header-contact under 1100px. */
.desktop-nav a,.header-contact{padding-block:3px}
.footer-main a:not(.brand){padding-block:var(--space-1)}
.faq-list summary{min-height:44px;align-items:center;padding-block:var(--space-1)}

@media (pointer:coarse){
  .inline-link,.hero-demo,.footer-main a:not(.brand),
  .mobile-nav a,.product-card>a{min-height:44px}
  .footer-main>div:not(:first-child){gap:var(--space-2)}
}

/* ── Spacing rhythm: section padding on the 4pt grid ────────────────────── */
.section-pad{padding:var(--space-24) 0;scroll-margin-top:calc(var(--header-h) + var(--space-2))}
.closing-inner{padding:var(--space-24) 0}
.site-footer{padding-top:var(--space-16)}
.footer-main{padding-bottom:var(--space-16)}
.section-heading{margin-bottom:var(--space-12)}
.split-heading{margin-bottom:var(--space-12)}
@media (max-width:640px){
  .section-pad{padding:var(--space-16) 0;scroll-margin-top:calc(67px + var(--space-2))}
  .closing-inner{padding:var(--space-16) 0}
  html{scroll-padding-top:calc(67px + var(--space-2))}
}

/* ── Motion: intent-specific durations, honest hover affordance ─────────── */
.button{transition:transform var(--dur-base) var(--ease-out),
                   box-shadow var(--dur-base) var(--ease-out),
                   background var(--dur-fast) linear;
        cursor:pointer}
.button:active{transform:translateY(0) scale(.985)}
.path-card{transition:transform var(--dur-base) var(--ease-out),
                      box-shadow var(--dur-base) var(--ease-out),
                      border-color var(--dur-fast) linear}
.hero-path-picker button{transition:background var(--dur-fast) linear,
                                    color var(--dur-fast) linear,
                                    box-shadow var(--dur-base) var(--ease-out)}
.faq-list summary span{transition:transform var(--dur-slow) var(--ease-out)}
a,summary,button,[role=button]{cursor:pointer}

/* Hover states the original left flat */
.faq-list summary:hover{color:var(--violet-800)}
.trust-grid article{transition:background var(--dur-base) var(--ease-out),
                               border-color var(--dur-base) var(--ease-out)}
.trust-grid article:hover{background:rgb(255 255 255 / 8%);border-color:rgb(255 255 255 / 20%)}
.workflow-cards article{transition:border-color var(--dur-base) var(--ease-out),
                                   box-shadow var(--dur-base) var(--ease-out)}
.workflow-cards article:hover{border-color:var(--border-strong);box-shadow:var(--shadow-2)}
.segment-row>div span{transition:border-color var(--dur-fast) linear,color var(--dur-fast) linear}
.segment-row>div span:hover{border-color:var(--violet-700);color:var(--violet-800)}

/* ── Elevation: one shadow family instead of eight ad-hoc values ────────── */
.workspace-window{box-shadow:var(--shadow-3)}
.ad-visual{box-shadow:var(--shadow-3)}
.floating-label,.floating-output,.ad-float-card{box-shadow:var(--shadow-2)}
.movie-showcase,.product-preview{box-shadow:var(--shadow-1)}
.path-card:hover{box-shadow:var(--shadow-2)}

/* ── Fluid headline sizing so long words never kiss the gutter ──────────── */
/* Headlines carry authored <br> breaks, so text-wrap:balance is not used —
   it would re-break lines the copywriter set deliberately. */
.hero-lead,.section-heading p,.split-heading>p,.ad-copy>p,
.trust-layout>div>p,.closing-section p,.faq-list p{text-wrap:pretty}
@media (max-width:420px){
  .hero h1{font-size:clamp(34px,8.8vw,46px);letter-spacing:-.05em}
  .section-heading h2,.split-heading h2,.trust-layout h2,
  .faq-layout h2,.ad-copy h2{font-size:clamp(32px,8.6vw,44px)}
  .closing-section h2{font-size:clamp(36px,9vw,50px)}
}

/* ── Status colour is never the only signal ─────────────────────────────── */
.product-status{display:inline-flex;align-items:center;gap:5px}
.status-live::before,.status-soon::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.status-soon::before{
  border-radius:50%;background:none;border:1.5px solid currentColor;width:8px;height:8px}

@media (prefers-reduced-motion:reduce){
  .button:hover,.path-card:hover{transform:none}
}

/* ── Second pass: label families missed by the first sweep ──────────────── */

/* Mock chrome that needed a contrast lift as well as a size lift. */
.movie-video-timeline{color:var(--neutral-400)}
.movie-motion-toggle{color:var(--violet-100);background:rgb(var(--overlay-tint) / 80%);border-color:rgb(255 255 255 / 42%)}
.storyboard-sheet-head{color:var(--text-700)}

.hero-proof b{font-size:var(--text-xs)}
.hero-eligibility{font-size:var(--text-2xs)}
.flow-number{color:var(--violet-900);border-color:var(--violet-400);letter-spacing:0}
@media (max-width:390px){
  .hero-proof span:not(.proof-star,.proof-divider){font-size:var(--text-2xs)}
  .hero-proof b{font-size:var(--text-xs)}
}

/* Tinted card surfaces sit above var(--neutral-0), so body text needs a darker tone
   to hold 4.5:1 against the radial wash. */
.product-card p,.path-card p{color:var(--text-600)}

/* Decorative glyph badges: raise the plate, not the glyph. */
.play-emblem{background:rgb(var(--overlay-tint) / 62%);border-color:rgb(255 255 255 / 77%)}
.ad-visual-top span:last-child{color:var(--green-700)}

/* ── Scroll reveal ──────────────────────────────────────────────────────── */
/* .reveal is applied by reveal.js, never in markup, so content is visible
   without JS and under reduced motion. The transition reads as a fade with a
   slight rise, not a slide. */
.reveal-ready .reveal{
  opacity:0;
  transform:translate3d(0,12px,0);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
  will-change:opacity,transform;
}
.reveal-ready .reveal-in{
  opacity:1;
  transform:none;
  will-change:auto;
}
@media (prefers-reduced-motion:reduce){
  .reveal-ready .reveal{opacity:1;transform:none;transition:none}
}
@media print{
  .reveal-ready .reveal{opacity:1 !important;transform:none !important}
}

/* ── Icons ─────────────────────────────────────────────────────────────── */
/* Replaces 29 typographic glyphs that stood in for icons. Six of them
   (U+25A3 U+25A4 U+25A6 U+25CE U+25F7 U+2726) are absent from Inter, so they
   were rendering in whatever font each visitor's OS happened to pick. */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{
  width:1em;height:1em;           /* sized by the parent's font-size */
  display:inline-block;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:-.125em;
  overflow:visible;
}
/* Filled marks read better at small sizes than hairline strokes. */
.proof-star .icon,.mini-mark .icon,.closing-orb .icon,
.product-glyph .icon,.output-icon .icon,.movie-video-play .icon{stroke-width:1.6}

/* Live indicator in the campaign mock: a shape, not a bullet character. */
.live-dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--green-700);
  box-shadow:0 0 0 3px rgb(15 127 106 / 14%);
}

/* The FAQ marker rotates from plus to close; the SVG rotates as the glyph did. */
.faq-list summary .icon{stroke-width:2;color:var(--violet-700);transition:transform var(--dur-slow) var(--ease-out)}
.faq-list details[open] summary .icon{transform:rotate(45deg)}

/* ── Hero workspace sequence ────────────────────────────────────────────── */
/* The three progress pips were in the markup from the start but never moved.
   They now track the sequence, and the chips show which output is selected. */
.workspace-progress span{
  transition:background var(--dur-slow) var(--ease-out),
             width var(--dur-slow) var(--ease-out);
}
.workspace-progress span.is-active{background:var(--violet-700)}
.workspace-progress span:not(.is-active){background:var(--neutral-200)}

.workspace-chips span{
  transition:background var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out);
}
.workspace-chips span.is-active{
  background:var(--violet-700);
  border-color:var(--violet-700);
  color:var(--neutral-0);
}

.hero-sequence-toggle{
  position:absolute;right:14px;bottom:12px;
  min-height:26px;padding:5px 10px;
  border:1px solid var(--neutral-300);
  border-radius:100px;
  background:var(--neutral-0);
  color:var(--text-500);
  font-size:var(--text-illustrative);
  font-weight:750;letter-spacing:.06em;
  cursor:pointer;
  transition:color var(--dur-fast) linear,border-color var(--dur-fast) linear;
}
.hero-sequence-toggle:hover{color:var(--violet-700);border-color:var(--violet-400)}
.workspace-main{position:relative}

@media (pointer:coarse){ .hero-sequence-toggle{min-height:44px;padding-inline:14px} }

/* With motion reduced the sequence holds on its first state, so the control
   would do nothing — hide it rather than offer a dead button. */
@media (prefers-reduced-motion:reduce){
  .hero-sequence-toggle{display:none}
  .workspace-progress span,.workspace-chips span,
  .visual-overlay small,.visual-overlay>span{transition:none}
}

/* ── Generated clip ─────────────────────────────────────────────────────── */
/* The video sits over the still and only becomes visible once it has decoded,
   so a missing or failing clip leaves the slide exactly as it was. */
.movie-video-frame{position:relative}
.movie-video-clip{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-out);
}
.movie-video-frame.has-clip .movie-video-clip{opacity:1}
/* The play emblem is an invitation on a still; once the clip runs it is a lie. */
.movie-video-frame.has-clip .movie-video-play{opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
.movie-video-track span{transition:width var(--dur-fast) linear}

/* ── Hero workspace: three output states ────────────────────────────────── */
/* Storyboard sheet, generated shot, pitch slide — the same three outputs the
   movie carousel shows, at hero scale. States stack and cross-fade; only one
   is in the accessibility tree at a time. */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.workspace-visual{position:relative;background:var(--dark-900)}
.hv-state{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-slow) var(--ease-out),
             visibility 0s linear var(--dur-slow);
}
.hv-state.is-active{opacity:1;visibility:visible;transition-delay:0s,0s}

/* 1 — storyboard sheet */
.hv-state[data-hv="0"]{
  display:flex;flex-direction:column;gap:6px;
  padding:9px 10px;background:var(--violet-50);
}
.hv-head{
  display:flex;justify-content:space-between;gap:8px;
  font-size:var(--text-illustrative);font-weight:850;letter-spacing:.09em;
  color:var(--text-violet);
}
.hv-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:5px;flex:1;min-height:0}
.hv-grid figure{
  position:relative;margin:0;overflow:hidden;
  border-radius:5px;background:var(--dark-900);
}
.hv-grid img{width:100%;height:100%;object-fit:cover}
.hv-grid small{
  position:absolute;left:5px;bottom:4px;
  font-size:var(--text-illustrative);font-weight:850;letter-spacing:.06em;color:var(--neutral-0);
  text-shadow:0 1px 3px rgb(var(--overlay-tint) / 85%);
}

/* 2 — generated shot */
.hv-state[data-hv="1"]{background:var(--dark-900)}
.hv-shot{width:100%;height:100%;object-fit:cover}
.hv-state[data-hv="1"]::after{
  content:"";position:absolute;inset:40% 0 0;
  background:linear-gradient(transparent,rgb(var(--overlay-tint) / 82%));
}
.hv-badge{
  position:absolute;top:9px;left:10px;z-index:1;
  padding:4px 7px;border-radius:5px;
  border:1px solid rgb(255 255 255 / 42%);
  background:rgb(var(--overlay-tint) / 55%);
  color:var(--neutral-0);
  font-size:var(--text-illustrative);font-weight:850;letter-spacing:.07em;
  backdrop-filter:blur(6px);
}
.hv-title{
  position:absolute;left:12px;bottom:20px;z-index:1;
  color:var(--neutral-0);
  font-size:19px;font-weight:750;line-height:1.15;letter-spacing:-.04em;
}
.hv-timeline{
  position:absolute;left:12px;right:12px;bottom:10px;z-index:1;
  height:3px;border-radius:3px;background:rgb(255 255 255 / 28%);overflow:hidden;
}
.hv-timeline span{display:block;height:100%;width:0;background:var(--neutral-0);border-radius:3px}
/* Runs only while this state is showing, so the scrub matches the dwell. */
.hv-state[data-hv="1"].is-active .hv-timeline span{animation:hv-scrub 4.2s linear forwards}
@keyframes hv-scrub{from{width:0}to{width:100%}}

/* 3 — pitch slide */
.hv-state[data-hv="2"]{
  display:flex;flex-direction:column;gap:7px;
  padding:10px;background:var(--violet-100);
}
.hv-slide{
  flex:1;min-height:0;display:grid;grid-template-columns:1fr .8fr;gap:8px;
  padding:10px;border-radius:6px;background:var(--neutral-0);
  box-shadow:var(--shadow-1);
}
.hv-slide-copy{display:flex;flex-direction:column;gap:5px;justify-content:center;min-width:0}
.hv-slide-copy small{
  font-size:var(--text-illustrative);font-weight:850;letter-spacing:.08em;color:var(--text-violet);
}
.hv-slide-copy strong{
  font-size:17px;font-weight:800;line-height:1.08;letter-spacing:-.04em;color:var(--text-900);
}
.hv-slide-img{width:100%;height:100%;object-fit:cover;border-radius:4px;background:var(--dark-900)}
.hv-pages{display:flex;gap:4px;justify-content:center}
.hv-pages i{width:14px;height:3px;border-radius:3px;background:var(--violet-300)}
.hv-pages i:first-child{background:var(--violet-700)}

@media (prefers-reduced-motion:reduce){
  .hv-state{transition:none}
  .hv-state[data-hv="1"].is-active .hv-timeline span{animation:none;width:100%}
}

/* ── Pricing ────────────────────────────────────────────────────────────── */
.pricing-section{background:linear-gradient(180deg,var(--neutral-0),var(--violet-50))}

/* Free tier reads as a lead-in, not a fifth column — it is the only plan
   without a monthly price and the app's own comparison omits it too. */
.price-free{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-6);
  margin-bottom:var(--space-6);
  padding:var(--space-6);
  border:1px solid var(--violet-200);
  border-radius:var(--radius-xl);
  background:var(--neutral-0);
  box-shadow:var(--shadow-1);
}
.price-free>div{max-width:72ch}
.price-free strong{display:block;margin:var(--space-2) 0 var(--space-1);font-size:var(--text-lg);letter-spacing:-.02em}
.price-free p{margin:0;font-size:var(--text-sm);line-height:1.6}
.price-free .button{flex:none}

.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);align-items:start}

.price-card{
  display:flex;flex-direction:column;
  padding:var(--space-6);
  border:1px solid var(--neutral-200);
  border-radius:var(--radius-xl);
  background:var(--neutral-0);
  transition:border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.price-card:hover{border-color:var(--violet-300);box-shadow:var(--shadow-2)}
.price-card.is-featured{
  border-color:var(--violet-700);
  box-shadow:0 0 0 1px var(--violet-700),var(--shadow-2);
}

.price-head{display:flex;min-height:22px;margin-bottom:var(--space-4)}
.price-tier,.price-flag{
  font-size:var(--text-2xs);font-weight:850;letter-spacing:.12em;
  color:var(--text-violet);
}
.price-flag{padding:4px 8px;border-radius:100px;line-height:1}
.flag-popular{background:var(--violet-700);color:var(--neutral-0)}
.flag-offer{background:var(--violet-100);color:var(--violet-800)}
.flag-value{background:var(--blue-100);color:var(--blue-700)}

.price-card h3{font-size:28px;margin:0 0 var(--space-2);letter-spacing:-.04em}
.price-blurb{font-size:var(--text-xs);line-height:1.55;margin:0 0 var(--space-4);min-height:4.3em}

.price-amount{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2);margin:0}
.price-amount del{color:var(--text-500);font-size:var(--text-md);text-decoration-thickness:1px}
.price-amount strong{font-size:34px;font-weight:800;letter-spacing:-.05em;color:var(--text-900)}
.price-amount span{font-size:var(--text-sm);color:var(--text-500);font-weight:650}
.price-gst{margin:var(--space-1) 0 var(--space-4);font-size:var(--text-2xs);color:var(--text-500)}

.price-credits{
  padding:var(--space-3);margin-bottom:var(--space-4);
  border:1px solid var(--violet-150);border-radius:var(--radius-md);
  background:var(--violet-50);
  font-size:var(--text-2xs);color:var(--text-violet);line-height:1.5;
}
.price-credits b{color:var(--text-900);font-weight:800}
.price-credits span{display:block;margin-top:var(--space-1);color:var(--text-500)}

.price-card .button{width:100%;margin-bottom:var(--space-6)}
.price-what{
  margin:0 0 var(--space-3);
  font-size:var(--text-2xs);font-weight:850;letter-spacing:.12em;color:var(--text-500);
}
.price-feats{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.price-feats li{display:flex;gap:var(--space-3);font-size:var(--text-xs);line-height:1.5;color:var(--text-muted)}
.price-feats .icon{flex:none;margin-top:.15em;color:var(--violet-700);font-size:var(--text-md)}

.price-foot{
  max-width:88ch;margin:var(--space-6) 0 0;
  font-size:var(--text-xs);line-height:1.7;color:var(--text-500);
}
.price-foot .inline-link{font-size:inherit}

/* Comparison table, folded away by default so it does not dominate. */
.price-compare{margin-top:var(--space-8);border-top:1px solid var(--neutral-200)}
.price-compare summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  min-height:44px;padding:var(--space-4) 0;
  font-size:var(--text-lg);font-weight:730;cursor:pointer;list-style:none;
}
.price-compare summary::-webkit-details-marker{display:none}
.price-compare summary:hover{color:var(--violet-700)}
.price-compare summary .icon{
  font-size:24px;color:var(--violet-700);
  transition:transform var(--dur-slow) var(--ease-out);
}
.price-compare[open] summary .icon{transform:rotate(45deg)}

/* contain:paint stops the 720px table widening the document. Without it the
   wrapper scrolls correctly but the page still gains ~279px of horizontal
   scroll at 375px. */
.price-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:var(--space-2);contain:paint}
.price-table-wrap:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.price-table{width:100%;min-width:720px;border-collapse:collapse;font-size:var(--text-xs)}
.price-table th,.price-table td{padding:var(--space-3);text-align:left;border-bottom:1px solid var(--neutral-150)}
.price-table thead th{
  font-size:var(--text-2xs);font-weight:850;letter-spacing:.1em;
  color:var(--text-violet);border-bottom:1px solid var(--neutral-300);
}
.price-table tbody th[scope=row]{font-weight:650;color:var(--text-body);width:34%}
.price-table td{color:var(--text-muted)}
.price-table .tbl-group th{
  padding-top:var(--space-6);
  font-size:var(--text-2xs);font-weight:850;letter-spacing:.12em;
  color:var(--violet-800);background:var(--violet-50);
  border-bottom:1px solid var(--violet-150);
}
.price-table .icon{color:var(--green-700);font-size:var(--text-md)}
.price-table .is-off .icon{color:var(--neutral-400)}
.price-table-note{margin:var(--space-4) 0 0;font-size:var(--text-2xs);color:var(--text-500);line-height:1.6}

@media (max-width:1100px){
  .price-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
  .price-blurb{min-height:0}
}
@media (max-width:640px){
  .price-grid{grid-template-columns:1fr}
  .price-free{flex-direction:column;align-items:flex-start;padding:var(--space-4)}
  .price-free .button{width:100%}
  .price-card h3{font-size:25px}
  .price-amount strong{font-size:30px}
  .price-compare summary{font-size:var(--text-md)}
}
@media (prefers-reduced-motion:reduce){
  .price-card,.price-compare summary .icon{transition:none}
}

/* ── Billing-period toggle ──────────────────────────────────────────────── */
/* Both terms render; this picks which one is shown. With JavaScript off the
   section keeps its default data-term="monthly" and the monthly prices stand. */
.pricing-section[data-term="monthly"] [data-term="annual"],
.pricing-section[data-term="annual"] [data-term="monthly"]{display:none}

.price-term{
  display:inline-flex;gap:var(--space-1);
  margin:0 auto var(--space-6);
  padding:5px;
  border:1px solid var(--violet-200);border-radius:13px;
  background:var(--neutral-0);
  box-shadow:var(--shadow-1);
}
.price-term-row{display:flex;justify-content:center}
.price-term button{
  display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:38px;padding:8px 16px;
  border:0;border-radius:9px;background:transparent;
  color:var(--text-body);
  font-size:var(--text-xs);font-weight:750;
  cursor:pointer;
  transition:background var(--dur-fast) linear,color var(--dur-fast) linear,
             box-shadow var(--dur-base) var(--ease-out);
}
.price-term button small{
  padding:3px 7px;border-radius:100px;
  background:var(--green-50);color:var(--green-800);
  font-size:var(--text-2xs);font-weight:800;letter-spacing:.02em;
}
.price-term button:hover:not([aria-pressed="true"]){background:var(--violet-100);color:var(--violet-800)}
.price-term button[aria-pressed="true"]{
  background:var(--violet-700);color:var(--neutral-0);
  box-shadow:0 6px 16px rgb(var(--shadow-tint) / 22%);
}
/* On the selected button a white plate only lifts the violet, leaving the
   label at 4.68:1. A darker plate takes it to about 9.7:1 instead. */
.price-term button[aria-pressed="true"] small{
  background:rgb(var(--overlay-tint) / 30%);color:var(--neutral-0);
}

/* The annual line carries the billed total, so the per-month figure is never
   the only number on screen. */
.price-gst [data-term="annual"]{color:var(--text-violet);font-weight:700}

@media (pointer:coarse){ .price-term button{min-height:44px} }
@media (max-width:640px){
  .price-term{width:100%;margin-bottom:var(--space-4)}
  .price-term button{flex:1;justify-content:center;padding:8px 10px}
  .price-term button small{display:none}
}
@media (prefers-reduced-motion:reduce){ .price-term button{transition:none} }

/* The annual note runs to two lines; reserving the space keeps card heights
   identical across both terms, so switching still causes no layout shift. */
.price-gst{min-height:3.2em}
.price-amount del[data-term="annual"]{font-size:var(--text-sm)}

/* ── What a month buys ──────────────────────────────────────────────────── */
/* Costed project sheets, laid out like receipts: line items left, credits
   right, a ruled total. Both project types render; CSS shows one. */
.buys{margin-top:var(--space-16);padding-top:var(--space-12);border-top:1px solid var(--neutral-200)}
.buys .split-heading h3{
  font-size:clamp(30px,3.4vw,44px);line-height:1.07;letter-spacing:-.05em;margin:var(--space-3) 0 0;
}
.buy-pane{display:none}
.buy-pane.is-active{display:block}

.buy-pipeline{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  list-style:none;margin:0 0 var(--space-4);padding:0;
}
.buy-pipeline li{
  font-size:var(--text-2xs);font-weight:800;letter-spacing:.04em;
  color:var(--text-violet);
  padding:5px 10px;border:1px solid var(--violet-150);border-radius:100px;
  background:var(--neutral-0);
}
/* An arrow between steps, drawn by CSS so it is never read aloud. */
.buy-pipeline{counter-reset:none}
.buy-pipeline li{position:relative}
.buy-pipeline li+li{margin-left:var(--space-4)}
.buy-pipeline li+li::before{
  content:"";position:absolute;left:calc(var(--space-4) * -1 + 2px);top:50%;
  width:8px;height:1px;background:var(--violet-300);
}
.buy-intro{max-width:92ch;margin:0 0 var(--space-6);font-size:var(--text-xs);line-height:1.7;color:var(--text-muted)}

.buy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);align-items:stretch}
.buy-sheet{
  display:flex;flex-direction:column;
  padding:var(--space-4);
  border:1px solid var(--neutral-200);border-radius:var(--radius-lg);
  background:var(--neutral-0);
}
.buy-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2)}
.buy-plan{font-size:var(--text-2xs);font-weight:850;letter-spacing:.12em;color:var(--text-violet)}
.buy-cr{font-size:var(--text-2xs);font-weight:800;color:var(--violet-700)}
.buy-sheet h4{
  font-size:var(--text-md);font-weight:750;line-height:1.3;letter-spacing:-.02em;
  margin:var(--space-3) 0 var(--space-1);color:var(--text-900);min-height:2.6em;
}
.buy-images{margin:0 0 var(--space-4);font-size:var(--text-2xs);color:var(--text-500)}

.buy-lines{margin:0 0 var(--space-4);padding:var(--space-3) 0 0;border-top:1px solid var(--neutral-150);display:grid;gap:var(--space-2);align-content:start}
.buy-line{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.buy-line dt{font-size:var(--text-2xs);line-height:1.45;color:var(--text-muted);min-width:0}
.buy-line dd{
  margin:0;flex:none;
  font-size:var(--text-2xs);font-weight:750;color:var(--text-body);
  font-variant-numeric:tabular-nums;
}
.buy-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);
  margin-top:auto;padding-top:var(--space-3);
  border-top:1px solid var(--neutral-300);
}
.buy-total span{font-size:var(--text-2xs);font-weight:850;letter-spacing:.1em;color:var(--text-500)}
.buy-total strong{font-size:var(--text-lg);font-weight:800;letter-spacing:-.03em;color:var(--text-900);font-variant-numeric:tabular-nums}
.buy-left{
  margin:var(--space-2) 0 0;
  font-size:var(--text-2xs);font-weight:700;color:var(--green-800);
}
.buy-foot{margin:var(--space-6) 0 0;max-width:88ch;font-size:var(--text-2xs);line-height:1.7;color:var(--text-500)}

@media (max-width:1100px){
  .buy-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
  .buy-sheet h4{min-height:0}
}
@media (max-width:640px){
  .buy-grid{grid-template-columns:1fr}
  .buys{margin-top:var(--space-12)}
  .buy-switch{width:100%}
  .buy-switch button{flex:1;justify-content:center}
}

/* ── Model rate tables ──────────────────────────────────────────────────── */
.rate-compare{border-top:0}
.rate-intro{max-width:92ch;margin:0 0 var(--space-6);font-size:var(--text-xs);line-height:1.7;color:var(--text-muted)}
.rate-block+.rate-block{margin-top:var(--space-8)}
.rate-title{
  display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;
  margin:0 0 var(--space-3);
  font-size:var(--text-md);font-weight:800;letter-spacing:-.01em;color:var(--text-900);
}
.rate-title span{
  font-size:var(--text-2xs);font-weight:800;letter-spacing:.1em;
  color:var(--text-violet);text-transform:uppercase;
}
.rate-table{min-width:560px}
.rate-table tbody th[scope=row]{width:38%;font-weight:650}
.rate-table td{font-variant-numeric:tabular-nums}
/* The plan each column unlocks — a header for the column, not a model. */
.rate-from th,.rate-from td{
  font-size:var(--text-2xs);font-weight:850;letter-spacing:.08em;
  color:var(--violet-800);background:var(--violet-50);
  border-bottom:1px solid var(--violet-150);
}
@media (max-width:640px){ .rate-table{min-width:480px} }

/* Model line inside the credits box: families on top, the plan's ceiling
   beneath. Every plan carries every model, so only the ceiling differs. */
.price-credits span{display:block;margin-top:var(--space-1);color:var(--text-body);font-weight:700}
.price-credits span em{
  display:block;margin-top:2px;
  font-style:normal;font-weight:650;
  color:var(--text-500);letter-spacing:.01em;
}

/* Pointer from the trust section to the people, and the FAQ attribution. */
.trust-people{margin:0 0 var(--space-3);font-size:var(--text-sm);line-height:1.6}
.trust-people .inline-link{font-size:inherit}
.faq-byline{display:block;margin-top:var(--space-3);font-size:var(--text-2xs);color:var(--text-500)}
.faq-byline a{color:var(--violet-700);text-decoration:underline;text-underline-offset:2px}