/* ============================================================
   PRICING PAGE — components specific to Minded Pricing
   (plans grid, pinned problem→solution fold, /human band, FAQ).
   Reuses tokens + nav/buttons/sections/tiers/footer from
   site-v3.css.
   ============================================================ */

/* nav — current page */
.nav-links a.active { color: var(--ink-900); font-weight: 600; }

/* in-menu CTAs only exist inside the collapsed mobile menu */
.nav-links .menu-cta { display: none; }

/* nav — match the homepage chrome: gradient marketing CTA + collapsible burger
   menu (collapse + burger JS come from shared site-v3.css/js). Top-bar CTA is
   the 44px DS MARKETING button, level with the 44px Log in secondary. */
.nav-cta .cta-short { display: none; }
.nav-actions .nav-cta.btn-cta {
  font-weight: 500; border-radius: 14px;
  background: var(--brand-gradient-cta); background-size: 100% 100%;
  background-origin: border-box; background-clip: border-box;
  color: #fff; border: 1px solid transparent;
  box-shadow: 0 8px 20px -7px rgba(255, 95, 52, 0.34), 0 6px 16px -6px rgba(228, 60, 255, 0.26);
  animation: none; height: 44px; padding: 0 22px; font-size: 18px; gap: 9px; }
.nav-actions .nav-cta.btn-cta:hover { filter: brightness(1.04); box-shadow: 0 10px 24px -7px rgba(255, 95, 52, 0.40), 0 8px 18px -6px rgba(228, 60, 255, 0.30); transform: translateY(-1px); }
.nav-actions .nav-cta.btn-cta svg { width: 16px; height: 16px; }

@media (max-width: 940px) {
  /* top bar carries no action buttons on mobile — the burger menu holds them */
  .nav-actions { display: none !important; }
  /* frosted DS burger + glass chrome to match the landing page */
  .nav-burger { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.42); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 6px 20px rgba(16, 24, 40, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
  .brand { background: rgba(245, 247, 250, 0.48); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: 0 6px 20px rgba(16, 24, 40, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
  .nav-links { box-shadow: var(--shadow-selected); border: 1px solid var(--line); border-radius: 16px; background: rgba(245, 247, 250, 0.55); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); }
  .nav.menu-open .nav-links a:active { background: var(--surface-muted-2); }
  /* full-width action buttons stacked under the links (shared layout) */
  .nav.menu-open .nav-links .menu-cta { display: inline-flex; margin-top: 6px; height: auto; justify-content: center; padding: 12px 16px; border-radius: 12px; font-size: 15px; font-weight: 600; }
  /* only the gradient primary gets the white label + brand glow; the secondary
     Log in keeps its DS ink-on-white (was inheriting white-on-white) */
  .nav.menu-open .nav-links .menu-cta-primary { color: #fff; border: none;
    background-color: transparent;
    background-image: linear-gradient(90deg, #FFAC6F 0%, #FF5F34 55%, #E43CFF 100%);
    background-size: 100% 100%; background-position: 0 0; background-repeat: no-repeat;
    box-shadow: 0 8px 22px rgba(255,95,52,.20), 0 8px 22px rgba(228,60,255,.13); }

}

/* DS primary gradient for all gradient buttons on this page — EXACT brand gradient stops (peach → coral → magenta), no position drift so the colors render true */
.btn-cta { background: var(--brand-gradient); background-size: 100% 100%; background-origin: border-box; background-clip: border-box; animation: none; box-shadow: var(--shadow-glow); }
/* secondary buttons read full ink by default (DS outlined: white fill, ink text + icon) */
.btn-secondary { color: var(--ink-900); }
.btn-cta:hover { box-shadow: 0 10px 30px rgba(255, 95, 52, 0.22), 0 10px 30px rgba(228, 60, 255, 0.15); }
/* top-bar Start Free is the 44px DS MARKETING button (shared site-v3 .nav-actions
   .btn sizing), level with the matching 44px Log in secondary */
.nav-actions .btn-cta { border: 1px solid transparent; }

/* ---- sky wrap — LP cloud hero treatment over hero + plans --- */
.skywrap { position: relative; margin-top: -67px; }
.sky-bg { position: absolute; inset: 0; background: url("hero-clouds.png") top center / cover no-repeat; }
.sky-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFFFFF); }
.skywrap > section { position: relative; z-index: 1; }

.phero { position: relative; padding: 126px 0 24px; text-align: center; }
.phero .container { position: relative; }
.phero h1 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; font-size: clamp(38px, 4.6vw, 62px); margin: 0; color: var(--ink-900); text-wrap: balance; }
/* phones: shrink the headline so the gradient line "Your first $50 is on us." stays on ONE line (2 lines total) */
@media (max-width: 560px) { .phero h1 { font-size: clamp(25px, 8.2vw, 34px); } }
.ph-sub { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--slate-600); max-width: 560px; margin: 18px auto 0; text-wrap: pretty; }
/* hero CTA + reassurance (above the fold) */
.ph-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ph-reassure { justify-content: center; margin-top: 16px; }
/* trusted-by slider sitting on the cloud sky, above the fold */
.trusted-hero { height: auto; border-bottom: none; padding: 18px 0 6px; }
.trusted-hero .cap { margin-bottom: 14px; }

/* ---- plans ------------------------------------------------- */
.plans { padding-top: 36px; }
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; max-width: 1020px; margin: 0 auto; }
.plan { position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-elevation); padding: 24px 22px 22px; display: flex; flex-direction: column; }
.plan .phead { min-height: 186px; }
.plan .pname { font-size: 15px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.01em; }
.plan .pprice { display: flex; align-items: baseline; gap: 7px; margin-top: 12px; }
.plan .pprice .amt { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.plan .pprice .amt.txt { font-size: 30px; letter-spacing: -0.02em; }
.plan .pprice .per { font-size: 13px; color: var(--slate-500); }
.plan .pblurb { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--slate-600); }
.plan .plist { list-style: none; margin: 16px 0 20px; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan .plist li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.5; color: var(--slate-700); }
.plan .plist li svg { width: 15px; height: 15px; stroke-width: 2.2px; color: var(--brand-coral); flex: none; margin-top: 2.5px; }
.plan .plist .grad-text { font-weight: 700; }
.plan .btn { width: 100%; font-size: 15px; padding: 11px 20px; }

/* DS elevation button — white card-style CTA */
.btn-elev { background: #fff; color: var(--ink-900); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: var(--shadow-elevation); }
/* hover = much lighter grey tint + DS elevation lift (not a heavy fill/border) */
.btn-elev:hover { background: var(--surface-muted); border-color: rgba(0, 0, 0, 0.08); box-shadow: var(--shadow-selected); transform: translateY(-1px); }

/* Pro — primary-gradient border (full peach→coral→magenta under a padding-box white fill) */
.plan.pro { border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--brand-gradient) border-box;
  background-size: 100% 100%, 100% 100%; }

/* card-top badges — every plan carries one. The SELECTED plan shows the full
   brand-gradient pill; deselected plans show a plain white pill. Default
   selected = Pro; on hover the gradient follows the hovered card. */
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 6;
  background: #fff; color: var(--ink-900); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; padding: 5px 13px; border-radius: 999px;
  box-shadow: var(--shadow-elevation);
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; }
.plan-badge .bslash { font-weight: 800; }
/* gradient pill = the selected plan's badge (Pro by default). The pill keeps a
   1px transparent border for size parity with the white (deselected) state, so
   the gradient must fill the border-box (origin+clip) or the border ring shows
   an edge-colour seam. */
.plan.pro .plan-badge { background: var(--brand-gradient); background-size: 100% 100%; background-origin: border-box; background-clip: border-box; color: #fff; border-color: transparent;
  box-shadow: 0 6px 18px rgba(228, 60, 255, 0.22), 0 4px 12px rgba(255, 95, 52, 0.26); }

/* ---- interactive hover: JS-latched single-selection model ----
   Pure CSS :hover failed here: the promoted card's scale(1.035)+z-index
   overhangs neighbours while shrunk (scale .98) cards vacate their grid cells,
   so the live hit-box stops mapping to the grid — mid-sweep `.plan:hover`
   lands on the wrong card or none, and the dim + promote layers fight ("effect
   stops working after enlarging multiple cards"). Selection is now LATCHED in
   JS via `.is-engaged` (grid) + `.is-sel` (one card), decoupling which card is
   selected from the transformed hit geometry.
   No engaged → Pro stays selected via the default .plan.pro rules above.
   Specificity is layered so SELECTED always beats DIMMED and DIMMED beats
   .plan.pro (so Pro reverts when another card is selected):
     .plan.pro (0,2,1) < .plans-grid.is-engaged .plan (0,3,0)
       < .plans-grid.is-engaged .plan.is-sel (0,4,0)
     .plan.pro .plan-badge (0,3,0) < ….is-engaged .plan .plan-badge (0,4,0)
       < ….is-engaged .plan.is-sel .plan-badge (0,5,0)
   `background` is dropped from the transition (gradient background-image is
   non-interpolable — it only does a laggy discrete swap, never a true fade). */
@media (hover: hover) and (pointer: fine) {
  .plan { transition: transform 0.3s cubic-bezier(0.32, 0.72, 0.3, 1), box-shadow 0.3s ease, opacity 0.3s ease, border-color 0.2s ease; }
  /* the entrance reveal pins these with !important once it finishes
     ([data-reveal].reveal-final { opacity:1!important; transform:none!important;
     transition:none!important }), which would freeze the hover effect — so the
     hover state below uses !important to win it back, and we re-enable the
     transition here so the recede/promote stays smooth after reveal. */
  .plans-grid .plan.reveal-final { transition: transform 0.3s cubic-bezier(0.32, 0.72, 0.3, 1), box-shadow 0.3s ease, opacity 0.3s ease, border-color 0.2s ease !important; }

  /* recede every card while the grid is engaged, and reset its border + badge */
  .plans-grid.is-engaged .plan { opacity: 0.55 !important; transform: scale(0.98) !important; border-color: var(--line); background: #fff; }
  .plans-grid.is-engaged .plan .plan-badge { background: #fff; color: var(--ink-900); border-color: var(--line); box-shadow: var(--shadow-elevation); }

  /* promote the single selected card: scale, glow, gradient border + badge */
  .plans-grid.is-engaged .plan.is-sel { opacity: 1 !important; transform: scale(1.035) !important; z-index: 5; border-color: transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--brand-gradient) border-box; background-size: 100% 100%, 100% 100%;
    box-shadow: 0 26px 64px rgba(255, 95, 52, 0.22), 0 12px 30px rgba(228, 60, 255, 0.18), var(--shadow-elevation); }
  .plans-grid.is-engaged .plan.is-sel .plan-badge { background: var(--brand-gradient); background-size: 100% 100%; background-origin: border-box; background-clip: border-box; color: #fff; border-color: transparent;
    box-shadow: 0 6px 18px rgba(228, 60, 255, 0.22), 0 4px 12px rgba(255, 95, 52, 0.26); }

  /* belt-and-braces: hold cards steady while a credits menu is open (the menu is
     absolute and overflows the card bottom; JS also skips re-selecting then) */
  .plans-grid:has(.credsel.open) .plan { opacity: 1 !important; transform: none !important; }
}

/* 'from' prefix on a price */
.pprice .from { font-size: 13px; color: var(--slate-500); margin-right: 2px; }

/* Pro credits dropdown — DS collapsed-trigger pattern (menus.html) */
.credsel { position: relative; display: block; margin-top: 14px; }
.ddtrig { display: flex; width: 100%; align-items: center; gap: 9px; height: 44px; padding: 0 11px 0 13px; border-radius: 12px; border: 1px solid var(--line-strong, rgba(16,24,40,0.16)); background: #fff; box-shadow: var(--shadow-button); font: 600 14px/1.2 var(--font-sans, "DM Sans", sans-serif); color: var(--ink-900); cursor: pointer; white-space: nowrap; transition: border-color 0.15s, background 0.15s; }
.ddtrig:hover { border-color: rgba(0, 0, 0, 0.22); }
.ddtrig:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 1px; }
.credsel.open .ddtrig { background: var(--surface-muted-2, #F4F6F8); border-color: rgba(0, 0, 0, 0.22); }
.ddtrig .tl { width: 18px; height: 18px; color: var(--slate-500); display: inline-flex; flex: none; }
.ddtrig .tl svg { width: 18px; height: 18px; }
.ddtrig .ddlabel { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.ddtrig .chev { width: 15px; height: 15px; color: var(--slate-500); flex: none; transition: transform 0.18s ease; }
.credsel.open .ddtrig .chev { transform: rotate(180deg); }

.credsel .menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; max-height: 264px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-selected); padding: 4px; opacity: 0; transform: translateY(6px) scale(0.98); transform-origin: top center; visibility: hidden; pointer-events: none; transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.32, 0.72, 0.3, 1); }
.credsel.open .menu { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.credsel .mi { display: flex; align-items: center; gap: 10px; margin: 2px; padding: 9px 10px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--slate-600); cursor: pointer; }
.credsel .mi:hover { background: rgba(64, 64, 64, 0.05); }
.credsel .mi.sel { color: var(--ink-900); font-weight: 600; background: rgba(64, 64, 64, 0.08); }
/* reset display/margin/padding: the global .cost (cost-comparison chart) is
   display:grid + margin-top:34px + padding, which bleeds onto this same-named
   price span and pushed it onto a second line */
.credsel .mi .cost { display: block; margin: 0 0 0 auto; padding: 0 0 0 12px; font-size: 13px; font-weight: 400; color: var(--slate-500); white-space: nowrap; }
.credsel .mi.sel .cost { color: var(--ink-900); }
/* no checkmark — the selected item reads via its grey highlight + bold label */
.plan .credfoot { margin: 8px 0 0; font-size: 12px; color: var(--slate-500); }

/* ---- pinned problem → solution fold (sauna-style scrollytelling) */
.pinfold { position: relative; height: 460vh; }
.pin-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.pin-arts { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pbeat { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 84px 28px 16px; pointer-events: none; }
.pbeat-2 { opacity: 0; }
.pin-orb { position: absolute; z-index: 3; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 999px; display: grid; place-items: center; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 50px rgba(255, 95, 52, 0.22), 0 6px 18px rgba(16, 24, 40, 0.08); }
.pin-orb img { width: 52px; height: 52px; }
/* fallback when JS marks the fold static (reduced motion) */
.pinfold.static { height: auto; }
.pinfold.static .pin-stage { position: static; height: auto; overflow: visible; }
.pinfold.static .pin-arts, .pinfold.static .pin-orb { display: none; }
.pinfold.static .pbeat { position: static; opacity: 1 !important; transform: none !important; pointer-events: auto; padding: 64px 28px; }
.pinfold.static #graphRise { position: static !important; top: auto !important; opacity: 1 !important; transform: none !important; }
.pinfold.static .c { color: var(--ink-900) !important; }
.pinfold.static .rot { opacity: 1 !important; }

.bloat-h { position: relative; z-index: 2; max-width: 640px; margin: 0; text-align: center; font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; font-size: clamp(28px, 3.4vw, 46px); color: var(--ink-900); text-wrap: balance; }
/* char-split reveal (sauna-style): words hold together, chars fill gray → ink */
.bloat-h .w, .st-text .w { display: inline-block; }
.bloat-h .c, .st-text .c { color: var(--slate-300, #C6CDD5); transition: color 0.22s ease; }
.bloat-h .c.on, .st-text .c.on { color: var(--ink-900); }
.bloat-h .rot { opacity: 0.3; transition: opacity 0.3s ease; }
.bloat-h .rot.lit { opacity: 1; }
/* rotating AI vendor name inside the headline */
.bloat-h .rot { display: inline-grid; justify-items: center; align-items: center; vertical-align: bottom; }
.bloat-h .ri { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.22em; white-space: nowrap; opacity: 0; transform: translateY(0.25em); transition: opacity 0.35s ease, transform 0.35s ease; }
.bloat-h .ri.on { opacity: 1; transform: none; }
.bloat-h .ri img { width: 0.82em; height: 0.82em; }
.art { position: absolute; z-index: 1; opacity: 0.05; transform: rotate(var(--r, 0deg)); will-change: transform, opacity; }

.art-doc { width: 290px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px rgba(16, 24, 40, 0.10); padding: 18px; }
.art-doc .t { font-weight: 700; font-size: 13.5px; color: var(--ink-900); margin-bottom: 9px; }
.art-doc .row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--slate-600); padding: 7px 0; border-top: 1px solid var(--line); }
.art-doc .row img { width: 15px; height: 15px; flex: none; }
.art-doc .row b { margin-left: auto; font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.art-doc .tot { display: flex; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--brand-coral); padding-top: 9px; border-top: 1px solid var(--line); }
.art-doc .tot b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Anthropic invoice receipt (floating bloat-scene art) */
.art-invoice { width: 300px; padding: 0; background: #ECEEF1; border-color: rgba(16,24,40,0.06); overflow: hidden; }
.art-invoice .iv-head { display: flex; align-items: center; gap: 11px; padding: 15px 17px 13px; }
.art-invoice .iv-logo { width: 30px; height: 30px; border-radius: 999px; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 1px 3px rgba(16,24,40,0.14); }
.art-invoice .iv-logo img { width: 16px; height: 16px; object-fit: contain; }
.art-invoice .iv-org { font-weight: 700; font-size: 14px; color: var(--ink-900); }
.art-invoice .iv-card { background: #fff; border-radius: 13px; margin: 0 8px 9px; padding: 15px 16px 13px; box-shadow: 0 5px 16px rgba(16,24,40,0.07); }
.art-invoice .iv-main { display: flex; align-items: flex-start; gap: 12px; }
.art-invoice .iv-info { flex: 1; min-width: 0; }
.art-invoice .iv-from { font-size: 11.5px; color: var(--slate-500); }
.art-invoice .iv-amt { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink-900); font-variant-numeric: tabular-nums; margin: 4px 0; }
.art-invoice .iv-due { font-size: 11.5px; color: var(--slate-500); }
.art-invoice .iv-doc { width: 38px; height: 48px; border-radius: 6px; background: #fff; box-shadow: 0 4px 13px rgba(16,24,40,0.13); flex: none; display: flex; flex-direction: column; gap: 4px; padding: 8px 7px; }
.art-invoice .iv-doc .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--slate-300); }
.art-invoice .iv-doc span { height: 3px; border-radius: 2px; background: var(--slate-200); }
.art-invoice .iv-doc span:nth-child(2) { width: 100%; }
.art-invoice .iv-doc span:nth-child(3) { width: 100%; }
.art-invoice .iv-doc span:nth-child(4) { width: 100%; }
.art-invoice .iv-doc span:nth-child(5) { width: 65%; }
.art-invoice .iv-line { height: 1px; background: var(--line); margin: 13px 0 11px; }
.art-invoice .iv-dl { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--slate-600); }
.art-invoice .iv-dl svg { width: 14px; height: 14px; }

.art-slack { display: flex; gap: 10px; width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 13px 16px; box-shadow: 0 14px 36px rgba(16, 24, 40, 0.10); }
.art-slack .av { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex: none; }
.art-slack .who { font-size: 12.5px; font-weight: 700; color: var(--ink-900); }
.art-slack .who .time { color: var(--slate-400); font-weight: 500; margin-left: 6px; font-size: 11px; }
.art-slack .txt { font-size: 13px; color: var(--slate-700); line-height: 1.45; margin-top: 2px; }

.art-chat { width: 260px; display: flex; flex-direction: column; gap: 7px; }
.art-chat .cu { align-self: flex-end; background: #fff; border: 1px solid var(--line); padding: 8px 12px; border-radius: 12px 12px 4px 12px; font-size: 12.5px; color: var(--ink-900); box-shadow: 0 8px 22px rgba(16, 24, 40, 0.07); }
.art-chat .ca { align-self: flex-start; display: flex; gap: 7px; background: #FAF9F5; border: 1px solid rgba(0, 0, 0, 0.06); padding: 9px 13px; border-radius: 12px 12px 12px 4px; font-size: 12.5px; line-height: 1.45; color: #3d3d3a; font-family: var(--font-serif); box-shadow: 0 8px 22px rgba(16, 24, 40, 0.07); }
.art-chat .ca img { width: 14px; height: 14px; margin-top: 2px; flex: none; }

.art-limit { width: 252px; display: flex; flex-direction: column; gap: 8px; }
.art-limit .lim-prompt { align-self: flex-end; background: #fff; border: 1px solid var(--line); padding: 8px 12px; border-radius: 12px 12px 4px 12px; font-size: 12.5px; color: var(--ink-900); box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08); }
.art-limit .lim-bar { display: flex; align-items: flex-start; gap: 11px; background: #FAF9F5; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 14px; padding: 13px 15px; box-shadow: 0 14px 36px rgba(16, 24, 40, 0.10); }
.art-limit .lim-ic { width: 28px; height: 28px; border-radius: 8px; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.10); }
.art-limit .lim-ic img { width: 17px; height: 17px; object-fit: contain; }
.art-limit .lim-tx { min-width: 0; padding-top: 1px; }
.art-limit .lim-name { font-size: 11px; font-weight: 600; color: var(--slate-500); margin-bottom: 3px; }
.art-limit .lim-t { font-size: 13px; font-weight: 700; color: var(--ink-900); line-height: 1.3; }
.art-limit .lim-s { font-size: 11.5px; color: var(--slate-500); margin-top: 2px; }

.art-chip { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(16, 24, 40, 0.10); }
.art-chip img { width: 24px; height: 24px; }

/* ---- statement + the glass graph (one composed scene) --------- */
.solwrap { position: relative; width: 100%; text-align: center; }
/* graph is taken OUT of normal flow at rest so .solwrap collapses to just the
   statement — the statement then flex-centers alone (like the homepage headline)
   and the orb's measured lift becomes the small crown distance ABOVE it. The JS
   translateY still rises the graph into the gap directly below the statement. */
#graphRise { position: absolute; left: 0; right: 0; top: 100%; margin-top: 34px; opacity: 0; will-change: transform, opacity; }
.st-text { margin: 0 auto; max-width: 800px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.14; font-size: clamp(24px, 3.6vw, 52px); color: var(--ink-900); text-wrap: balance; transform-origin: center top; will-change: transform; }

.graphfold .cost { display: block; position: relative; margin-top: 0; }
/* warm glow blobs behind the glass panel — kept inside the panel edge */
.graphfold .cost::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(640px, 84%); height: 86%; transform: translate(-50%, -50%); pointer-events: none; background:
  radial-gradient(42% 52% at 26% 28%, rgba(255, 172, 111, 0.30), transparent 70%),
  radial-gradient(36% 46% at 74% 66%, rgba(228, 60, 255, 0.14), transparent 70%),
  radial-gradient(44% 56% at 56% 18%, rgba(255, 95, 52, 0.16), transparent 72%);
  filter: blur(34px); z-index: 0; }
.graphfold .cost .c-right { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 42px 52px 28px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.72));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(29, 38, 48, 0.07);
  box-shadow: 0 28px 70px rgba(16, 24, 40, 0.10), 0 2px 6px rgba(16, 24, 40, 0.04); }

/* glass chart — bars fill a fixed-height track so % heights step down
   visibly and every column shares one baseline */
.graphfold .bars-v { height: auto; align-items: flex-end; gap: clamp(12px, 1.6vw, 20px); }
.graphfold .barcol { flex: 0 1 88px; height: auto; gap: 10px; }
.graphfold .barcol .val { font-size: 18px; line-height: 1.2; }
.graphfold .barcol .track { width: 100%; max-width: 74px; height: 210px; display: flex; align-items: flex-end; }
.graphfold .barcol .lbl { height: 36px; display: flex; align-items: center; justify-content: center; }
.graphfold .barcol .bar { width: 100%; max-width: none; border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, rgba(229, 234, 239, 0.82), rgba(209, 217, 226, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.75); border-bottom: none;
  box-shadow: 0 10px 22px rgba(16, 24, 40, 0.07); }
.graphfold .barcol.us .bar { background: var(--brand-gradient); border: none;
  box-shadow: 0 12px 30px rgba(255, 95, 52, 0.38); }
.graphfold .barcol .lbl img { width: 28px; height: 28px; }
.graphfold .barcol .lbl.mind img { width: 32px; height: 32px; }
.graphfold .bars-v::before { top: 32px; }
.graphfold .save-drop { top: 36px; height: 189px; }
.graphfold .save-drop::after { content: ""; position: absolute; left: -5px; bottom: 1px; width: 7px; height: 7px; border: none; border-right: 2px solid rgba(255, 95, 52, 0.8); border-bottom: 2px solid rgba(255, 95, 52, 0.8); transform: rotate(45deg); }
.graphfold .save-note { top: 100px; font-size: 14px; }
.graphfold .cc-title { font-size: 17px; margin-top: 24px; }
/* keep the composed scene inside short viewports */
@media (max-height: 840px) {
  .graphfold .barcol .track { height: 150px; }
  .graphfold .save-drop { top: 32px; height: 133px; }
  .graphfold .save-note { top: 70px; }
  .graphfold .cost .c-right { padding: 30px 44px 22px; }
  #graphRise { margin-top: 26px; }
  .pin-orb { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
  .pin-orb img { width: 42px; height: 42px; }
}

/* ---- what a task costs — equal-height tier cards ------------- */
/* rotating capability in the heading (Viktor-style: "…Minded does: [logo] X") */
.credits-h { max-width: 880px; margin-inline: auto; text-wrap: balance; }
.credits-h .rot { display: inline-grid; justify-items: center; align-items: baseline; vertical-align: baseline; }
/* visibility gate + instant opacity: only the active word ever renders, at full
   opacity immediately. A pure opacity crossfade ghosted (two mismatched-width
   words overlap mid-fade) and froze visibly when the tab is backgrounded
   (document.hidden pauses transitions). The subtle slide stays via transform. */
.credits-h .ri { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.24em; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(0.26em); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.credits-h .ri.on { opacity: 1; visibility: visible; transform: none; }
.credits-h .ri img { width: 0.84em; height: 0.84em; border-radius: 5px; transform: translateY(0.08em); }
@media (prefers-reduced-motion: reduce) { .credits-h .ri { transition: none; } }
/* borderless cards — elevation carries them (overrides shared site-v3 borders) */
#credits .tier, #credits .tier.feat-tier, #credits .tier:hover { border-color: transparent; }
/* feat-tier matches its siblings — no emphasized container ring */
#credits .tier.feat-tier { box-shadow: var(--shadow-elevation); }
#credits .tier .thread { flex: none; height: 364px; justify-content: flex-start; border: 0; box-shadow: var(--shadow-elevation); overflow: hidden; }
/* keep the dashboard preview inside the fixed-height card — unconstrained it is
   ~212px and pushed the pcard out past the card's bottom edge */
#credits .tier .pcard .thumb { max-height: 158px; object-fit: cover; object-position: top; }
#credits .tier .lvl { white-space: nowrap; }
/* churn-dashboard preview: the tier card is narrow (~228px), so the shared
   fixed-height thumb (212px) makes object-fit:cover side-crop the 640×420 image
   — clipping the "Customer Churn" title and the chart edges. Match the box to the
   image aspect so cover fills it with zero crop: the whole dashboard shows. */
#credits .tier .pcard .thumb { height: auto; aspect-ratio: 640 / 420; }
/* credits cards are static: the thread shows its final answer with no streaming
   trace (see the tier finalize in site-v3.js), so nothing reflows a beat after the
   card reveals. Hide the trace stream and drop the result's slide-in so the only
   motion is the card's own data-reveal fade. */
#credits .tier .m-stream { display: none !important; }
#credits .tier .m-result { opacity: 1 !important; transform: none !important; transition: none !important; }
#credits .section-head { margin-bottom: 26px; }

/* ---- /human band — homepage experts layout, as-is ------------- */
.humband { padding-top: 84px; }
/* align the left column to the top so it lines up with the chat card.
   min-height:0 (overriding site-v3's min-height:100%) breaks the circular row
   sizing: 100% tied the left column to the row height while the square card's
   aspect-ratio tied its height to the row — the loop resolved to the tall
   content height and the square grew to 720². With it broken, the card height
   follows aspect-ratio from its (definite) column width. */
#human .exp-left { justify-content: flex-start; min-height: 0; }
/* DS fading chat: bottom-anchored so the newest message sits at the base and older
   ones rise into the top fade as the conversation grows — the first message stays
   fully visible when the animation starts (nothing above it yet).
   Square animation frame at EVERY width: the full /human thread animates inside,
   overflow + the .is-scrolled top-fade mask reveal the latest messages. Without
   this the card grows to the full conversation height (a tall portrait box with
   dead gradient space below the visible messages). */
#human .exp-grid { align-items: start; }
/* clamp the two columns to an even split (minmax(0,1fr)); otherwise the square
   card's min-content inflates its 1fr track and the card balloons past half the
   row, overflowing the container. Desktop only — below 860px the grid is a
   single column (site-v3) and the card spans full width. */
@media (min-width: 861px) {
  #human .exp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* square frame: the thread is taken OUT OF FLOW (absolute) so its tall content
   can't inflate the card — the card height then follows aspect-ratio from its
   column width. overflow + the .is-scrolled top-fade mask reveal the animating
   messages. inset matches the card's 22px padding. */
#human .exp-card { position: relative; aspect-ratio: 1 / 1; min-width: 0; min-height: 0; height: auto; align-self: start; overflow: hidden; }
#human .exp-card .thread { position: absolute; inset: 22px; height: auto; overflow: hidden; }

/* /human marketing CTAs — DS hero/auth button spec: pill, large, icon-leading
   (gradient "cta" + white "secondary" fills come from .btn-cta / .btn-secondary) */
/* DS MARKETING buttons — identical to the landing hero CTAs (44px · 14px radius · 18px/500 · gradient-cta + glow) */
#human .exp-cta .btn { height: 44px; padding: 0 22px; border-radius: 14px; font-size: 18px; font-weight: 500; gap: 9px; box-shadow: var(--shadow-button); }
#human .exp-cta .btn-cta { background: var(--brand-gradient-cta); background-size: 100% 100%; border: none; color: #fff; box-shadow: var(--shadow-glow); animation: none; }
#human .exp-cta .btn-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(255,95,52,0.24), 0 12px 34px rgba(228,60,255,0.16); }
#human .exp-cta .btn-secondary { background: #fff; color: var(--ink-900); border: 1px solid rgba(0,0,0,0.08); box-shadow: var(--shadow-button); }
#human .exp-cta .btn-secondary:hover { transform: translateY(-1px); border-color: rgba(0,0,0,0.22); box-shadow: 0 6px 18px rgba(29,38,48,0.12); }
#human .exp-cta .ico-google, #human .exp-cta .ico-slack { width: 20px; height: 20px; }

/* ---- FAQ — one-column collapsible DS cards -------------------- */
:root { interpolate-size: allow-keywords; }
.faqs { padding-bottom: 26px; }
.faqs .section-head { margin-bottom: 8px; }
.faq-col { max-width: 860px; margin: 30px auto 0; display: flex; flex-direction: column; gap: 12px; }
.qa { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 0 22px; box-shadow: var(--shadow-elevation); transition: border-color 0.2s ease; }
/* smooth collapse/expand of the answer */
.qa::details-content { height: 0; overflow: hidden; opacity: 0; transition: height 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.26s ease, content-visibility 0.32s allow-discrete; }
.qa[open]::details-content { height: auto; opacity: 1; }
.qa summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 19px 0; font-weight: 600; font-size: 16px; color: var(--ink-900); letter-spacing: -0.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa .chev { width: 18px; height: 18px; color: var(--slate-500); flex: none; transition: transform 0.25s ease; }
.qa[open] .chev { transform: rotate(180deg); }
.qa .a { padding: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--slate-600); max-width: 68ch; text-wrap: pretty; }
.qa:hover { border-color: rgba(0, 0, 0, 0.16); }

/* sky glimpse — a teaser of the outro sky below the FAQ */
.sky-peek { height: 200px; background: url("hero-clouds.png") center 32% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 110px, #000 calc(100% - 50px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 110px, #000 calc(100% - 50px), transparent 100%); }

/* ---- outro — glassier composer -------------------------------- */
.outro-prompt { background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 28px 70px rgba(16, 24, 40, 0.18); }
/* sit the composer just above the mascot's head (bottom-anchored) instead of centered over it */
.outro-prompt { top: 31%; transform: translate(-50%, -82%); }
.outro-prompt.in { transform: translate(-50%, -100%); }
/* outro Start Free — full DS brand gradient (peach → coral → magenta) */
.op-start { background: var(--brand-gradient); background-size: 180% 180%; }

/* keep the top bar fully visible at every scroll depth, including over the outro scene */
body:not(.m) .nav { position: fixed; left: 0; right: 0; z-index: 80; }
body:not(.m) .skywrap { margin-top: 0; }

/* mobile: DS spec — bigger 48px touch rows in the open menu */
body.m .credsel .mi { min-height: 48px; padding: 6px 12px; font-size: 15px; }

/* ---- mid widths / tablet -------------------------------------- */
@media (max-width: 1020px) {
  .plans-grid { grid-template-columns: 1fr 1fr; max-width: 720px; }
  .plans-grid .plan:nth-child(3) { grid-column: 1 / -1; }
  .plans-grid .plan:nth-child(3) .phead { min-height: 0; }
}
@media (max-width: 700px) {
  .plans-grid { grid-template-columns: 1fr; max-width: 480px; }
  .plans-grid .plan:nth-child(3) { grid-column: auto; }
  .plan .phead { min-height: 0; }
}
/* collage — smaller artifacts on tablets (coords are inline %) */
@media (max-width: 1024px) {
  .bloat-h { max-width: 460px; }
  .art-doc { width: 230px; padding: 14px; }
  .art-invoice { width: 250px; padding: 0; }
  .art-invoice .iv-amt { font-size: 24px; }
  .art-chat { width: 205px; }
  .art-slack { width: 250px; }
  .art-limit { width: 215px; }
  .art-chip { width: 44px; height: 44px; }
  .art-chip img { width: 20px; height: 20px; }
}
@media (max-width: 880px) {
  /* single-column tablet: let the thread fit its chat instead of a fixed 300px
     that left ~100px of dead gradient under the shorter cards */
  #credits .tier .thread { height: auto; min-height: 0; }
}
@media (max-width: 860px) {
  .bloat-h { max-width: 400px; font-size: 26px; }
  .art-doc { width: 200px; }
  .art-invoice { width: 224px; }
  .art-invoice .iv-amt { font-size: 22px; }
  .art-chat { width: 185px; }
  .art-slack { width: 230px; }
  .art-limit { width: 196px; }
}

/* phones: the cost-chart card stacked too much side gutter (pbeat 28 +
   .container 28 + card 44 each side). body.m never applies on this page,
   so tighten the real responsive path here. */
@media (max-width: 600px) {
  .pbeat { padding-left: 14px; padding-right: 14px; }
  .solwrap { padding-left: 0; padding-right: 0; }
  .graphfold .cost .c-right { max-width: 100%; padding-left: 18px; padding-right: 18px; }
}

/* ---- mobile (body.m, 390px design) --------------------------- */
/* mobile-only line break — hero headline stays at 2 lines on phones */
.mbr { display: none; }

body.m .phero { padding: 140px 0 4px; }
body.m .ph-cta { flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; }
body.m .ph-cta .btn { width: 100%; max-width: 320px; justify-content: center; }
body.m .ph-reassure { margin-top: 14px; font-size: 13px; gap: 8px 16px; }
body.m .trusted-hero { padding: 14px 0 2px; }
body.m .phero h1 { font-size: 30px; line-height: 1.08; letter-spacing: -0.03em; }
body.m .ph-sub { font-size: 16px; }
body.m .plans { padding-top: 30px; }
body.m .plans-grid { grid-template-columns: 1fr; gap: 18px; }
body.m .plan .phead { min-height: 0; }
body.m .pbeat { padding: 78px 18px 10px; }
body.m .bloat-h { font-size: 27px; max-width: 300px; }
body.m .art-doc { width: 172px; padding: 12px; }
body.m .art-invoice { width: 166px; padding: 0; left: 3% !important; top: 5% !important; }
body.m .art-invoice .iv-head { padding: 12px 13px 10px; gap: 9px; }
body.m .art-invoice .iv-logo { width: 25px; height: 25px; }
body.m .art-invoice .iv-logo img { width: 13px; height: 13px; }
body.m .art-invoice .iv-org { font-size: 12.5px; }
body.m .art-invoice .iv-card { margin: 0 7px 7px; padding: 12px 12px 11px; }
body.m .art-invoice .iv-from, body.m .art-invoice .iv-due { font-size: 10px; }
body.m .art-invoice .iv-amt { font-size: 20px; margin: 3px 0; }
body.m .art-invoice .iv-doc { width: 30px; height: 38px; padding: 6px 5px; }
body.m .art-invoice .iv-line { margin: 10px 0 9px; }
body.m .art-invoice .iv-dl { font-size: 11px; }
body.m .art-doc .t { font-size: 12px; }
body.m .art-doc .row, body.m .art-doc .tot { font-size: 10.5px; padding-top: 5px; padding-bottom: 5px; gap: 6px; }
body.m .art-chat { width: 144px; right: 3% !important; top: 7% !important; }
body.m .art-chat .cu, body.m .art-chat .ca { font-size: 10.5px; padding: 6px 9px; }
body.m .art-slack { width: 178px; padding: 10px 12px; left: 3% !important; bottom: 9% !important; }
body.m .art-slack .txt { font-size: 11px; }
body.m .art-limit { width: 164px; right: 3% !important; bottom: 10% !important; }
body.m .art-limit .lim-prompt { font-size: 10.5px; padding: 6px 10px; }
body.m .art-limit .lim-bar { gap: 8px; padding: 10px 11px; }
body.m .art-limit .lim-ic { width: 23px; height: 23px; border-radius: 7px; }
body.m .art-limit .lim-ic img { width: 14px; height: 14px; }
body.m .art-limit .lim-name { font-size: 9.5px; margin-bottom: 2px; }
body.m .art-limit .lim-t { font-size: 11px; }
body.m .art-limit .lim-s { font-size: 10px; }
body.m .art-chip { width: 36px; height: 36px; }
/* chips ride the top/bottom-center gaps and flank the headline in the
   thin side margins — all four visible, none on the text */
body.m .chip-oa { left: 48% !important; right: auto !important; top: 1% !important; }
body.m .chip-co { left: 46% !important; bottom: 1.5% !important; }
body.m .chip-cl { left: 3% !important; top: 33% !important; }
body.m .chip-ge { right: 3% !important; left: auto !important; top: 62% !important; }
body.m .art-chip img { width: 18px; height: 18px; }
body.m .pin-orb { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
body.m .pin-orb img { width: 40px; height: 40px; }
body.m .st-text { font-size: 22px; }
body.m #graphRise { margin-top: 18px; }
body.m .graphfold .cost .c-right { max-width: 100%; padding: 26px 16px 20px; border-radius: 22px; }
body.m .graphfold .bars-v { gap: 8px; }
body.m .graphfold .barcol { flex: 0 1 58px; }
body.m .graphfold .barcol .val { font-size: 14px; }
body.m .graphfold .barcol .track { max-width: 50px; height: 140px; }
body.m .graphfold .barcol .lbl { height: 30px; }
body.m .graphfold .barcol .bar { border-radius: 11px 11px 0 0; }
body.m .graphfold .barcol .lbl img { width: 22px; height: 22px; }
body.m .graphfold .barcol .lbl.mind img { width: 26px; height: 26px; }
body.m .graphfold .bars-v::before { top: 26px; }
body.m .graphfold .save-drop { top: 30px; height: 123px; }
body.m .graphfold .save-note { top: 64px; font-size: 11.5px; padding: 5px 9px; }
body.m .graphfold .cc-title { font-size: 13.5px; }
/* mobile carousel: keep all three cost cards the SAME height (desktop
   uses a fixed 430px; phones get a tuned fixed height so the cards match
   instead of each sizing to its own thread) */
body.m #credits .tier .thread { flex: none; height: 368px; min-height: 0; justify-content: flex-start; overflow: hidden; }
/* price on line 1, difficulty grade on line 2 — consistent across all three cards */
body.m #credits .tier-head { flex-direction: column; align-items: flex-start; gap: 6px; flex-wrap: nowrap; }
/* credits section heading fits two lines on phones */
body.m .credits-h { font-size: 27px; line-height: 1.18; }
body.m #credits .tier .m-result img, body.m #credits .tier .pcard img { max-height: 112px; object-fit: cover; object-position: top; }
body.m .sky-peek { height: 180px; }
/* mobile: full-width CTAs in the experts left column */
body.m .exp-cta .btn { width: 100%; justify-content: center; }
body.m .faq-col { margin-top: 20px; gap: 10px; }
body.m .qa summary { font-size: 15px; }

/* ===== real-mobile fixes (placed last so they win source-order over the base rules above).
   body.m rules only apply inside the /mobile preview frame; these handle the live responsive page. ===== */
@media (max-width: 700px) {
  /* hero CTAs: stack + equal width */
  .ph-cta { flex-direction: column; align-items: center; }
  .ph-cta .btn { width: 100%; max-width: 340px; justify-content: center; }
  /* "Minded plans the task once…" — bigger font (side margins handled by the
     max-width:600px rule above: .solwrap padding 0) */
  .st-text { font-size: 27px; max-width: none; }
  /* "Token cost to run autonomous Month Close Agent" caption → 2 lines */
  .graphfold .cc-title { font-size: 14px; }
  /* cost cards → centered, equal-height horizontal slider */
  /* break the slider out of the container's 28px side padding so cards run wide; heading keeps its padding */
  #credits .tiers { display: flex; align-items: flex-start; grid-template-columns: none; max-width: none; margin-inline: -28px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    /* side padding (7vw) gives the first/last card room to snap CENTER instead of
       sticking to the edge; bottom 36px / top 18px keep the card's drop shadow
       (--shadow-elevation: 0 8px 24px → ~32px below) from being clipped by the
       scroller's overflow */
    gap: 12px; padding: 18px 7vw 36px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #credits .tiers::-webkit-scrollbar { display: none; }
  #credits .tier { flex: 0 0 86vw; scroll-snap-align: center; }
  #credits .tier .thread { height: auto; overflow: hidden; } /* fit the chat — fixed height left big dead gradient under the shorter cards; cards top-align via .tiers align-items */
  /* /human chat demo square frame now comes from the base rule (all widths) */
  /* exp-cta: stack the marketing buttons at equal (fixed) width */
  #human .exp-cta { flex-direction: column; align-items: center; }
  #human .exp-cta .btn { width: 100%; max-width: 340px; justify-content: center; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Card-scroll removed (pricing page only).
   The shared stacked-card effect in site-v3.css pins .testi while #experts
   slides up over it — rounded-card top edge, covering up-shadow, and a
   JS-driven entrance parallax (--enter on > .container). On this page that
   read as the section "scrolling as a card". Neutralised here so the pricing
   page scrolls as flat, normal-flow sections. A separate session will rebuild
   the effect properly for both the homepage and pricing pages.
   (pricing.css loads ONLY on the pricing page, so this never touches the
   homepage; !important beats the low-specificity site-v3.css selectors.) */
.testi { position: static !important; }
.testi > .container,
#experts > .container { transform: none !important; }
.testi,
#experts { box-shadow: none !important; }
.testi,
#experts { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
/* the 100vh height + vertical-centering existed only to make each section a
   full-viewport card for the pin runway; with the pin gone they leave empty
   voids, so size both sections to their content and stack them normally. */
.testi,
#experts { min-height: 0 !important; }
#experts { display: block !important; }