/* MarketAlong product pages, editorial layer (redesign, 10 Oct).
   Same approved tokens (v10.css + spectrum.css); no new colours. Light only. No eyebrow text.
   What changes is composition: solid headlines, larger product views, colour confined to deliberate stages,
   and a shared close (question, answers, form) instead of the five repeated template sections. */
:root{
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --r-ui:12px;--r-stage:16px;
  --sh-ui:0 0 0 1px rgba(11,42,102,.08),0 1px 2px rgba(11,42,102,.05),0 14px 28px -20px rgba(11,42,102,.30);
  --sh-lift:0 0 0 1px rgba(11,42,102,.07),0 24px 48px -30px rgba(8,80,180,.36);
  --x-max:1320px;
}

/* ---------- type: solid ink headlines; colour, when used, carries meaning */
.x-h1{font-size:clamp(40px,4.4vw,66px);line-height:1.03;letter-spacing:-.032em;font-weight:800;color:var(--ink);text-wrap:balance;max-width:var(--h1w,15em)}
.x-h1 .q{color:var(--text);font-weight:700}
.x-h2{font-size:clamp(30px,2.9vw,46px);line-height:1.07;letter-spacing:-.027em;font-weight:800;color:var(--ink);text-wrap:balance;max-width:var(--h2w,19em)}
.x-h3{font-size:22px;line-height:1.25;letter-spacing:-.012em;font-weight:800;color:var(--ink);text-wrap:balance}
.x-lead{font-size:19px;line-height:1.55;color:var(--text);max-width:var(--lw,33em);text-wrap:pretty}
.x-p{font-size:17px;line-height:1.62;color:var(--text);max-width:36em;text-wrap:pretty}
.x-p+.x-p{margin-top:var(--s4)}
.nw{white-space:nowrap}

/* ---------- section frame */
.x-sec{padding:var(--s10) var(--gut)}
.x-in{max-width:var(--x-max);margin:0 auto}
.x-band{background:var(--cloud)}
.x-tight{padding-block:var(--s9)}

/* ---------- hero headers (each page chooses one; the visual that follows is its own) */
.x-hero{padding:var(--s7) var(--gut) 0}
.x-top{max-width:var(--x-max);margin:0 auto;display:grid;gap:var(--s5) var(--s8)}
.x-top.split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
.x-top.split .x-side{display:grid;gap:var(--s5);padding-bottom:6px}
.x-top.stack{grid-template-columns:minmax(0,1fr);justify-items:start}
.x-top.center{justify-items:center;text-align:center}.x-top.center .x-h1,.x-top.center .x-lead{margin-inline:auto}
.x-top.center .pp-cta,.x-top.center .pp-status{justify-content:center}
.x-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5)}

/* ---------- the stage: a framed light surface where the ribbon is allowed to be vivid.
   data-rib="box" keeps the ribbon inside the frame; the page around it stays calm white. */
.x-stage{position:relative;border-radius:var(--r-stage);background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;isolation:isolate}
[data-rib="box"]>.ribclip{border-radius:inherit}
.x-stage>.x-stage-in{position:relative;padding:var(--s8)}

/* the product frame: a large, readable piece of illustrative UI */
.x-ui{background:#fff;border-radius:var(--r-ui);box-shadow:var(--sh-ui);color:var(--ink)}
.x-ui-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:14px 22px;border-bottom:1px solid var(--line)}
.x-ui-title{font-size:15px;font-weight:700;color:var(--ink)}
.x-k{font-size:14px;font-weight:700;color:var(--deep)}
.x-tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;border-radius:6px;padding:4px 10px;background:var(--ice);color:var(--deep);white-space:nowrap}
.x-tag.teal{background:#E3F7F4;color:var(--t-teal)}.x-tag.coral{background:#FFF0F2;color:var(--t-coral)}.x-tag.amber{background:rgba(255,198,90,.12);box-shadow:inset 0 0 0 1px rgba(255,198,90,.42);color:var(--t-amber)}.x-tag.plain{background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--text)}

/* ---------- "what it prepares / what you decide / what it would need" */
.x-ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.x-ledger>div{padding:var(--s6) var(--s6) 0 0}
.x-ledger>div+div{padding-left:var(--s6);border-left:1px solid var(--line)}
.x-ledger h3{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.x-ledger ul{margin-top:var(--s4);display:grid;gap:var(--s3)}
.x-ledger li{font-size:16.5px;line-height:1.5;color:var(--text);padding-left:22px;position:relative}
.x-ledger li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--cobalt)}
.x-ledger>div:nth-child(2) li::before{background:var(--ma-coral)}.x-ledger>div:nth-child(3) li::before{background:var(--ma-teal)}

/* planned capabilities: a compact list, clearly marked as plans */
.x-caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s8)}
.x-caps>div{padding:var(--s5) 0;border-top:1px solid var(--line)}
.x-caps dt{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.x-caps dd{margin-top:6px;font-size:16px;line-height:1.55;color:var(--text)}
.x-plan{font-size:15px;line-height:1.5;color:var(--text)}

/* ---------- the close: one question, honest answers, the email handoff, the neighbours */
.x-close{padding:var(--s10) var(--gut) var(--s9)}
.x-close-in{max-width:var(--x-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s7) var(--s9);align-items:start}
.x-close-copy{display:grid;gap:var(--s5);align-content:start}
.x-close.center .x-close-in{grid-template-columns:minmax(0,1fr);max-width:820px;justify-items:center;text-align:center}
.x-close.center .x-faq{text-align:left;width:100%}
.x-close .pa-form{margin-top:0;box-shadow:var(--sh-lift)}
.x-faq{margin-top:var(--s3)}
.x-faq details{border-top:1px solid var(--line)}.x-faq details:last-child{border-bottom:1px solid var(--line)}
.x-faq summary{display:flex;justify-content:space-between;gap:var(--s4);padding:18px 0;cursor:pointer;list-style:none;font-size:17px;font-weight:700;color:var(--ink)}
.x-faq summary::-webkit-details-marker{display:none}
.x-faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--cobalt);font-weight:700;transition:transform .3s var(--out)}
.x-faq details[open] summary::after{transform:rotate(45deg)}
.x-faq details p{padding:0 40px 20px 0;font-size:16px;line-height:1.6;color:var(--text)}
.x-nb{position:relative;max-width:var(--x-max);margin:var(--s9) auto 0;display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:var(--s5) var(--s6);align-items:start;padding:var(--s5) var(--s6);border-radius:var(--r-ui);background:#fff;box-shadow:var(--sh-ui)}
.x-nb>p{font-size:15px;font-weight:700;color:var(--ink);max-width:12em;line-height:1.4}
.x-nb li{display:grid;gap:4px}
.x-nb a,.x-nb b{font-size:16px;font-weight:800;color:var(--cobalt)}.x-nb b{color:var(--ink)}
.x-nb span{font-size:15px;line-height:1.5;color:var(--text)}
.x-nb ul{display:contents}

/* motion: content is visible at rest; a few blocks settle into place as they arrive (products.js .rise) */
@media (prefers-reduced-motion:no-preference){
  .js .x-rise{transition:transform .9s var(--out),opacity .9s var(--out);transition-delay:calc(var(--d,0) * 90ms)}
  .js .x-rise.lo{transform:translateY(36px);opacity:.2}
  /* first screen: the headline, lead and demo settle into place on load. They start at partial opacity, never invisible,
     so the very first frame is already complete. */
  .js .x-top>*,.js main>section:first-of-type>.x-in,.js main>section:first-of-type>.x-stage,.js main>section:first-of-type>figure,.js main>section:first-of-type>.cv-grid,.js main>section:first-of-type>.ct-desk,.js .ad-hero-in>*{animation:xIn .9s var(--out) both}
  .js .x-top>*:nth-child(2){animation-delay:.08s}.js .x-top>*:nth-child(3),.js .x-top .x-side{animation-delay:.14s}
  .js main>section:first-of-type>.x-in,.js main>section:first-of-type>.x-stage,.js main>section:first-of-type>figure,.js main>section:first-of-type>.cv-grid,.js main>section:first-of-type>.ct-desk,.js .ad-hero-in>*:nth-child(2){animation:xStage 1.1s var(--out) .18s both}
  @keyframes xIn{from{opacity:.35;transform:translateY(18px)}}
  @keyframes xStage{from{opacity:.5;transform:translateY(42px) scale(.985)}}
}
/* a broken or slow image shows a calm tinted panel, never a hole */
main img{background:var(--cloud)}
/* pause control for the moving background (WCAG 2.2.2) */
.ft-motion{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:var(--deep)}
.ft-motion::before{content:"";width:10px;height:10px;border-radius:2px;box-shadow:inset 3px 0 0 var(--deep),inset -3px 0 0 var(--deep)}
.ft-motion[aria-pressed=true]::before{border-radius:0;box-shadow:none;width:0;height:0;border-left:9px solid var(--deep);border-top:6px solid transparent;border-bottom:6px solid transparent}
.rb-paused .rb-layer,.rb-paused .rb-glint{animation-play-state:paused!important}.rb-paused .ribseg{animation:none!important}
@media (prefers-reduced-motion:reduce){.ft-motion{display:none}}

@media (max-width:1100px){
  .x-top.split{grid-template-columns:1fr;align-items:start}
  .x-close-in{grid-template-columns:1fr}
  .x-ledger{grid-template-columns:1fr}.x-ledger>div,.x-ledger>div+div{padding:var(--s5) 0;border-left:0;border-top:1px solid var(--line)}
  .x-nb{grid-template-columns:1fr 1fr}.x-nb>p{grid-column:1/-1;max-width:none}
  .x-stage>.x-stage-in{padding:var(--s6)}
}
@media (max-width:760px){
  .x-sec{padding:var(--s9) var(--gut)}.x-close{padding:var(--s9) var(--gut) var(--s8)}
  .x-hero{padding-top:var(--s5)}
  .x-h1{font-size:clamp(34px,9.6vw,44px);line-height:1.06;letter-spacing:-.028em}
  .x-h2{font-size:clamp(28px,7.6vw,34px)}
  .x-lead{font-size:17.5px}
  .x-caps{grid-template-columns:1fr}
  .x-nb{grid-template-columns:1fr}
  .x-stage{border-radius:16px}.x-stage>.x-stage-in{padding:var(--s4)}
  .x-ui-bar{padding:12px 16px}
}

/* where a ribbon section meets a calm one, the ribbon fades out instead of ending on a straight cut */
.rib-fb>.ribclip{-webkit-mask-image:linear-gradient(#000 calc(100% - 180px),transparent);mask-image:linear-gradient(#000 calc(100% - 180px),transparent)}
.rib-ft>.ribclip{-webkit-mask-image:linear-gradient(transparent,#000 180px);mask-image:linear-gradient(transparent,#000 180px)}
.rib-ft.rib-fb>.ribclip{-webkit-mask-image:linear-gradient(transparent,#000 180px,#000 calc(100% - 180px),transparent);mask-image:linear-gradient(transparent,#000 180px,#000 calc(100% - 180px),transparent)}
/* the close with the form first (some pages lead with the action) */
.x-close.rev .x-close-in{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.x-close.rev .x-close-copy{order:2}
@media (max-width:1100px){.x-close.rev .x-close-in{grid-template-columns:1fr}.x-close.rev .x-close-copy{order:0}}
@media (max-width:760px){
  .x-top.center{justify-items:start;text-align:left}.x-top.center .x-h1,.x-top.center .x-lead{margin-inline:0}
  .x-top.center .x-cta,.x-top.center .pp-status{justify-content:flex-start}
  .x-ui-bar{flex-wrap:wrap;gap:4px 12px}
}
/* headings inside product UI carry no browser margin (v10.css resets only h1, h2 and p) */
main h3,main h4{margin:0}
.x-close.center .pp-status{justify-content:center}
/* on tinted bands the ribbon never passes behind text, so the white backing would only show as a smudge */
.x-band [class$="-src"]::before,.x-band .illus::before,.x-ui .illus::before{display:none}