/* ════════════════════════════════════════════════════════════════
   Prism — workflow kit (extracted Phase 2, 2026-07-12)
   Shared sections, lifted byte-for-byte from the hand-synced page
   copies the audit verified identical: section header (pp-src__head),
   ELEMENTS stack, capabilities carousel, explore-more cards, CTA
   bento (+ Stay-updated), FAQ accordion, enterprise bento.
   Loads AFTER styles.css and BEFORE each page's inline <style>, so a
   page-level rule with the same selector still wins — pages override
   the kit, never fight it.
   CTA colorway: amber is the default (workflow pages); index/product/
   enterprise set --cta-ink/--cta-shadow (teal) on .pp-cta__bento.
   ════════════════════════════════════════════════════════════════ */

/* ── src-head ── */
/* ── Shared section header (pp-src pattern: title left / lede right) ── */
    .pp-src__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);align-items:start}

    .pp-src__title{font-family:var(--sans);margin:0;font-size:clamp(1.9rem,3.3vw,2.9rem);font-weight:500;line-height:1.08;letter-spacing:-.025em;color:var(--n900);text-wrap:balance}

    .pp-src__right{padding-top:6px}

    .pp-src__lede{font-family:var(--sans);margin:0;font-size:clamp(16px,1.15vw,18px);line-height:1.55;color:var(--text-mute);max-width:48ch}

    @media(max-width:820px){ .pp-src__head{grid-template-columns:1fr;gap:22px} .pp-src__right{padding-top:0} }

/* ── elements ── */
/* ═══ ELEMENTS STACK — RESPONSIVE, SELF-CONTAINED · keep IDENTICAL on both workflow pages ═══
       Each card is an absolute child pinned to a FIXED 28px inset (so the top card aligns with the
       presenter card at EVERY width); ONLY the card content scales — scale(100cqw/780). The old
       scaled-canvas wrappers (.pp-fit--stack / .pp-fit__c) are neutralised to a transparent
       full-size pass-through. The fade is a FIXED 92px band on the VISUAL, never on the cards. */
    .pp-bento-sec .pr-bento__visual:has(.pp-fit--stack){ overflow:hidden; container-type:inline-size;
      -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 92px),transparent 100%);
      mask-image:linear-gradient(to bottom,#000 calc(100% - 92px),transparent 100%); }

    .pp-bento-sec .pr-bento__visual .pp-fit--stack{ position:absolute; inset:0; width:auto; height:auto; min-height:0; max-width:none; margin:0; aspect-ratio:auto; align-self:auto; container-type:normal; }

    .pp-bento-sec .pr-bento__visual .pp-fit--stack .pp-fit__c{ position:absolute; inset:0; width:auto; height:auto; transform:none; }

    .pp-bento-sec .wf-stack__panel{ position:absolute; width:432px; height:560px; bottom:auto; transform-origin:top left; transform:scale(calc(100cqw / 780px)); }

    .pp-bento-sec .wf-stack__panel--back{ top:28px; left:28px; z-index:1; }

    .pp-bento-sec .wf-stack__panel--front{ top:calc(28px + 5.9cqw); left:calc(44.6cqw - 28px); z-index:2; filter:drop-shadow(0 26px 46px rgba(23,24,26,.32)); }

    .pp-bento-sec .wf-stack__panel .pr-panel-frame{ inset:0; background:transparent; -webkit-mask-image:none; mask-image:none; }

    .pp-bento-sec .wf-stack__panel .pr-panel-frame--audio > .pf-audio,
    .pp-bento-sec .wf-stack__panel .pr-panel-frame--bumpers > .pf-elements{ left:0; right:auto; top:0; transform:none; }

    /* the Audio panel ships an "Audio library" size override (24px title, 48px tabs);
       normalise it to the Visual panel so the two Elements cards are identical */
    .wf-stack__panel .pf-audio{ padding:22px 16px; }

    .wf-stack__panel .pf-audio__head{ margin-bottom:32px; }

    .wf-stack__panel .pf-audio__title{ font-size:18px; line-height:1; font-weight:400; }

    .wf-stack__panel .pf-audio__tabs{ border-radius:8px; margin-bottom:0; }

    .wf-stack__panel .pf-audio__tab{ height:44px; font-size:12px; letter-spacing:.04em; border-radius:6px; }

    /* Below ~560px the card scales SHORTER than the fixed 360px visual (scale=100cqw/780 tracks
       width; the visual min-height did not) → the stack floated with dead space beneath it. Track
       the visual height to the SAME scale ratio so the cards fill and bleed into the 92px fade band
       at every phone width. The desktop 2-col grid keeps min-height:360 and is untouched. */
    @media (max-width:560px){
      .pp-bento-sec .pr-bento__visual:has(.pp-fit--stack){ aspect-ratio:780 / 560; min-height:0; }
    }

/* ── caps — illustrative bento carousel (equal cards · 2 rows · dots);
       mono ink+grey line-work with a single amber accent per card ── */
    .wf-caps-sec{ position:relative; padding:var(--sec-pad) 0; background:var(--n50);
      --card:#F0F2F7; --line-c:#E6EAF2; --n300:#C7CCD7; --n500:#717378; --n900:#17181A; --amber:#FFB700;
      --inset:max(var(--gutter), (100vw - var(--max))/2 + var(--gutter)); }

    .wf-caps-sec .pp-in{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }


    /* scroll wrapper hosts the edge fades — left aligned to the container, right full-bleed */
    .wf-caps-scroll{ position:relative; margin-top:var(--head-gap); }

    .wf-caps-scroll::before, .wf-caps-scroll::after{ content:''; position:absolute; top:0; bottom:0; width:var(--inset); z-index:6; pointer-events:none; opacity:1; transition:opacity .25s ease; }

    .wf-caps-scroll::before{ left:0; background:linear-gradient(to right, var(--n50), rgba(247,248,251,0)); }

    .wf-caps-scroll::after{ right:0; background:linear-gradient(to left, var(--n50), rgba(247,248,251,0)); }

    .wf-caps-scroll.is-start::before{ opacity:0; }
   /* no left fade until a card is actually clipped */
    .wf-caps-scroll.is-end::after{ opacity:0; }
       /* no right fade once fully scrolled */
    .wf-caps-track{
      margin:0;
      display:grid; grid-auto-flow:column; grid-template-rows:repeat(2,1fr);
      grid-auto-columns:clamp(300px,29.5vw,380px); gap:16px;
      overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
      padding:6px var(--inset) 8px var(--inset);   /* symmetric inset: first & last cards rest at the container edges; cards full-bleed past them while scrolling */
      scroll-padding-left:var(--inset); scroll-padding-right:var(--inset);
      -webkit-overflow-scrolling:touch; scrollbar-width:none; }

    .wf-caps-track::-webkit-scrollbar{ display:none; }


    .wf-cap{ background:var(--w); border:1px solid #ECEEF2;
      border-radius:16px; padding:24px 24px 26px; display:flex; flex-direction:column;
      box-shadow:0 1px 2px rgba(23,24,26,.04), 0 12px 28px -18px rgba(23,24,26,.17); }

    .wf-cap:nth-child(odd){ scroll-snap-align:start; }

    .wf-cap__vis{ height:120px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }

    .wf-cap__vis svg{ width:182px; height:auto; display:block; }

    .wf-cap__h{ font-family:var(--sans); font-size:16.5px; font-weight:500; letter-spacing:-.014em; line-height:1.2; color:var(--n900); margin:0 0 5px; }

    .wf-cap__p{ font-family:var(--sans); font-size:13px; line-height:1.42; color:var(--n500); margin:0; letter-spacing:-.003em; }


    /* dots */
    .wf-caps-dots{ display:flex; gap:9px; justify-content:center; align-items:center; margin-top:clamp(28px,3.4vw,42px); min-height:8px; }

    .wf-caps-dot{ width:24px; height:24px; border-radius:50%; background:transparent; border:0; padding:0; cursor:pointer; -webkit-appearance:none; appearance:none; position:relative; }
    .wf-caps-dot::before{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:8px; height:8px; border-radius:99px; background:var(--n500); transition:width .3s cubic-bezier(.22,1,.36,1), background-color .2s ease; }
    .wf-caps-dot:hover::before{ background:var(--n700); }

    

    .wf-caps-dot--on::before{ width:26px; background:var(--n900); }

    .wf-caps-dot--on:hover::before{ background:var(--n900); }


    @media (max-width:980px){
      .wf-caps-track{ grid-auto-columns:clamp(272px,46vw,352px); }
    }

    @media (max-width:600px){
      .wf-caps-track{ grid-auto-columns:82vw; }
      .wf-cap__vis{ height:106px; }
      .wf-cap__vis svg{ width:168px; }
    }

/* ── cross ── */
/* ── Explore-more / sibling-workflow cards (pr-cross pattern) ── */
    .wf-cross { padding:clamp(56px,8vh,104px) 0; background:var(--n50); }

    .wf-cross__in { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

    .wf-cross__eyebrow { font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--n500); display:flex; align-items:center; gap:11px; margin:0 0 26px; }

    .wf-cross__eyebrow::before { content:''; width:20px; height:1.5px; background:currentColor; border-radius:2px; }

    .wf-cross__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

    .wf-cross__card { position:relative; display:flex; flex-direction:column; gap:14px; padding:26px 26px 24px; min-height:180px; background:var(--w); border:0.5px solid var(--n100); border-radius:16px; text-decoration:none; transition:border-color .22s, box-shadow .22s, transform .22s; }

    .wf-cross__card:hover { border-color:var(--n300); box-shadow:0 18px 44px -30px rgba(23,24,26,.4); transform:translateY(-2px); }

    .wf-cross__card-eyebrow { display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--n700,var(--n700)); }

    .wf-cross__dot { width:9px; height:9px; border-radius:50%; flex:none; }

    .wf-cross__card-h { font-family:var(--sans); font-size:1.28rem; font-weight:400; line-height:1.16; letter-spacing:-.02em; color:var(--n900); margin:0; max-width:22ch; }

    .wf-cross__card-arrow { margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--n900); }

    .wf-cross__card-arrow svg { width:14px; height:14px; transition:transform .22s; }

    .wf-cross__card:hover .wf-cross__card-arrow svg { transform:translateX(3px); }

    /* coming-soon card — greyed, non-interactive (nav-dropdown parity) until the page ships */
    .wf-cross__card--soon { pointer-events:none; }

    .wf-cross__card--soon .wf-cross__card-eyebrow,
    .wf-cross__card--soon .wf-cross__card-h,
    .wf-cross__card--soon .wf-cross__card-arrow { color:var(--n500); }

    .wf-cross__card--soon .wf-cross__dot { opacity:.45; }

    @media (max-width:820px){ .wf-cross__grid{ grid-template-columns:1fr; } .wf-cross__card{ min-height:0; } }

/* ── cta ── */
/* ── CTA bento — amber-mesh MultiPointGradient shader inside a deep-amber card ── */
    .pp-cta{background:var(--n50);padding:clamp(16px,3vh,48px) 0 clamp(72px,11vh,132px)}

    .pp-cta__in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

    .pp-cta__bento{position:relative;isolation:isolate;overflow:hidden;border-radius:clamp(20px,2.4vw,30px);padding:clamp(56px,8.5vw,116px) clamp(26px,5vw,72px);text-align:center;color:#fff;background:var(--cta-ink,var(--p900));box-shadow:0 50px 110px -60px var(--cta-shadow,rgba(34,24,0,.72)),inset 0 0 0 1px rgba(255,255,255,.06)}

    /* width/height forced so the lib's fixed inline px can't shrink the canvas when the bento grows (Stay-updated expand) */
    .pp-cta__shader{position:absolute;inset:0;width:100%!important;height:100%!important;z-index:0;display:block}

    .pp-cta__bento::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(125% 125% at 50% 38%,transparent 42%,rgba(0,18,26,.5) 100%);pointer-events:none}

    .pp-cta__content{position:relative;z-index:2;max-width:680px;margin:0 auto}

    .pp-cta__title{font-family:var(--sans);font-size:clamp(2rem,3.8vw,3.1rem);font-weight:500;line-height:1.04;letter-spacing:-.025em;color:#fff;margin:0 0 18px}

    .pp-cta__title em{font-style:normal;color:var(--p500,var(--p500))}

    .pp-cta__sub{font-family:var(--sans);font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.5;color:rgba(255,255,255,.82);max-width:520px;margin:0 auto}

    .pp-cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:clamp(28px,4vw,40px)}

    .pp-cta__ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.28)}

    .pp-cta__ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.46);color:#fff}

    .pp-cta__ghost[aria-expanded="true"]{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}

    /* Stay-updated inline email capture — expands on demand */
    .pp-cta__signup{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;transition:grid-template-rows .42s var(--ease-out,ease),opacity .34s ease,margin-top .42s var(--ease-out,ease)}

    .pp-cta__bento.is-stay .pp-cta__signup{grid-template-rows:1fr;opacity:1;margin-top:24px}

    .pp-cta__signup-clip{overflow:hidden}

    .pp-cta__signup-form{display:flex;gap:10px;max-width:460px;margin:0 auto;text-align:left;align-items:flex-end}

    .pp-cta__signup-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}

    .pp-cta__signup-label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72)}

    .pp-cta__signup-input{width:100%;box-sizing:border-box;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:12px 14px;font-family:var(--sans);font-size:15px;color:#fff;transition:border-color .2s,background .2s}

    .pp-cta__signup-input::placeholder{color:rgba(255,255,255,.5)}

    .pp-cta__signup-input:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.18)}

    .pp-cta__signup-btn{white-space:nowrap}

    .pp-cta__signup-note{margin:10px 0 0;min-height:16px;font-size:12.5px;color:rgba(255,255,255,.62);text-align:center}

    .pp-cta__signup-note.is-error{color:#FFB3A6}

    .pp-cta__signup-done{margin:0;padding:8px 0;font-size:15.5px;color:#fff;text-align:center}

    .pp-cta__signup-done span{color:var(--p500,var(--p500))}

    @media(max-width:560px){ .pp-cta__actions .btn{width:100%;justify-content:center} .pp-cta__signup-form{flex-direction:column;align-items:stretch} .pp-cta__signup-btn{justify-content:center} }

/* ── faq ── */
/* ── Canonical FAQ accordion (verbatim from newswire-to-video.html) ── */
#faq{background:var(--n50);padding:var(--sec-pad) 0}

.pp-faq__in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(36px,6vw,96px);align-items:start}

.pp-faq__eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--p800);display:flex;gap:11px;align-items:center;margin:0 0 20px}

.pp-faq__eyebrow::before{content:"";width:20px;height:1.5px;background:currentColor;border-radius:2px}

.pp-faq__title{font-family:var(--sans);font-size:clamp(1.9rem,3.3vw,2.8rem);font-weight:500;line-height:1.04;letter-spacing:-.022em;color:var(--n900);margin:0 0 18px}

.pp-faq__sub{font-family:var(--sans);font-size:1rem;line-height:1.55;color:rgba(23,24,26,.6);max-width:34ch;margin:0}

.pp-faq__sub a{color:var(--p800);text-decoration:underline;text-underline-offset:2px}

.pp-faq__list{display:flex;flex-direction:column;gap:10px}

.pp-faq__item{border:1px solid rgba(23,24,26,.1);border-radius:14px;background:#fff;transition:border-color .25s,box-shadow .25s}

.pp-faq__item.is-open{border-color:rgba(23,24,26,.16);box-shadow:0 14px 40px -28px rgba(8,12,22,.32)}

.pp-faq__q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:21px 24px;text-align:left;font-family:var(--sans);font-size:1.05rem;font-weight:500;line-height:1.35;color:var(--n900);background:none;border:0;cursor:pointer}

.pp-faq__icon{position:relative;width:16px;height:16px;flex:none;margin-top:3px}

.pp-faq__icon::before,.pp-faq__icon::after{content:"";position:absolute;background:var(--n900);border-radius:2px;transition:transform .3s var(--ease-out,ease),opacity .3s}

.pp-faq__icon::before{left:0;top:50%;width:100%;height:1.6px;transform:translateY(-50%)}

.pp-faq__icon::after{top:0;left:50%;width:1.6px;height:100%;transform:translateX(-50%)}

.pp-faq__item.is-open .pp-faq__icon::after{transform:translateX(-50%) scaleY(0);opacity:0}

.pp-faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease-out,ease)}

.pp-faq__item.is-open .pp-faq__a{grid-template-rows:1fr}

.pp-faq__a>div{overflow:hidden}

.pp-faq__a-in{padding:0 24px 22px;font-family:var(--sans);font-size:.97rem;line-height:1.62;color:rgba(23,24,26,.62);max-width:64ch}

.pp-faq__a-in a{color:var(--p800);text-decoration:underline;text-underline-offset:2px}

@media(max-width:860px){ .pp-faq__in{grid-template-columns:1fr;gap:30px} }

/* ── ent — reusable DARK enterprise bento (wf-ent): dark rounded card, dot-gradient
       from the top-right, CTA beside the heading ── */
.wf-ent{ padding:var(--sec-pad) 0; background:var(--n50); }

    .wf-ent__in{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

    .wf-ent__bento{ position:relative; overflow:hidden; border-radius:clamp(20px,2.4vw,28px);
      padding:clamp(38px,4.2vw,54px) clamp(30px,3.4vw,50px);
      background:radial-gradient(130% 150% at 100% 0%, #23252B 0%, #191A1D 52%, #131416 100%);
      color:#fff; }

    .wf-ent__dots{ position:absolute; inset:0; pointer-events:none; z-index:0;
      background-image:radial-gradient(circle, rgba(255,255,255,.36) 1.2px, transparent 1.9px);
      background-size:23px 23px;
      -webkit-mask-image:radial-gradient(115% 115% at 100% 0%, #000 0%, rgba(0,0,0,.55) 34%, transparent 70%);
      mask-image:radial-gradient(115% 115% at 100% 0%, #000 0%, rgba(0,0,0,.55) 34%, transparent 70%); opacity:.92; }


    .wf-ent__head{ position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:36px;
      margin-bottom:clamp(30px,3.8vw,46px); }

    .wf-ent__eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--p500); margin:0 0 18px; }

    .wf-ent__title{ font-family:var(--sans); font-size:clamp(25px,3vw,35px); font-weight:400; letter-spacing:-.018em; line-height:1.2; color:#fff; margin:0 0 17px; max-width:22ch; }

    .wf-ent__lede{ font-family:var(--sans); font-size:15px; line-height:1.55; color:rgba(255,255,255,.6); margin:0; max-width:50ch; letter-spacing:-.005em; }

    .wf-ent__cta{ flex:none; display:inline-flex; align-items:center; gap:8px; background:var(--p500); color:var(--n900);
      font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.01em; text-decoration:none;
      padding:13px 24px; border-radius:999px; white-space:nowrap; margin-top:4px; transition:transform .2s ease, background-color .2s ease; }

    .wf-ent__cta:hover{ background:#FFC633; transform:translateY(-1px); }


    .wf-ent__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.06fr; gap:clamp(30px,4vw,58px); align-items:center; }

    .wf-ent__left{ display:flex; flex-direction:column; justify-content:center; }

    .wf-ent__feature{ display:flex; gap:15px; padding:18px 0; border-top:1px solid rgba(255,255,255,.11); }

    .wf-ent__feature:first-child{ border-top:0; padding-top:0; }

    .wf-ent__feature:last-child{ padding-bottom:0; }

    .wf-ent__feature-ic{ flex:none; width:23px; height:23px; margin-top:1px; }

    .wf-ent__feature-ic svg{ width:23px; height:23px; display:block; }

    .wf-ent__feature-h{ font-family:var(--sans); font-size:15px; font-weight:500; letter-spacing:-.01em; color:#fff; margin:0 0 4px; }

    .wf-ent__feature-p{ font-family:var(--sans); font-size:13px; line-height:1.48; color:rgba(255,255,255,.5); margin:0; }


    .wf-ent__tiles{ border:1px solid rgba(255,255,255,.12); border-radius:16px; overflow:hidden;
      display:grid; grid-template-columns:repeat(3,1fr); background:rgba(255,255,255,.03); }

    .wf-ent__tile{ padding:clamp(28px,3vw,40px) 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; }

    .wf-ent__tile:not(:last-child){ border-right:1px solid rgba(255,255,255,.09); }

    .wf-ent__tile-ic{ width:38px; height:38px; }

    .wf-ent__tile-ic svg{ width:38px; height:38px; display:block; }

    .wf-ent__tile-l{ font-family:var(--sans); font-size:13.5px; font-weight:500; color:rgba(255,255,255,.9); line-height:1.25; letter-spacing:-.004em; }

    .wf-ent__certnote{ margin:12px 2px 0; font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; line-height:1.5; color:rgba(255,255,255,.45); }


    @media (max-width:860px){
      .wf-ent__head{ flex-direction:column; gap:22px; margin-bottom:clamp(28px,6vw,36px); }
      .wf-ent__cta{ align-self:flex-start; margin-top:0; }
      .wf-ent__grid{ grid-template-columns:1fr; gap:clamp(28px,6vw,40px); align-items:start; }
    }

    @media (max-width:600px){
      .wf-ent__cta{ width:100%; justify-content:center; }
      .wf-ent__tiles{ grid-template-columns:1fr; }
      .wf-ent__tile{ flex-direction:row; justify-content:flex-start; text-align:left; padding:18px 20px; gap:14px; }
      .wf-ent__tile:not(:last-child){ border-right:none; border-bottom:1px solid rgba(255,255,255,.09); }
      .wf-ent__tile-l{ font-size:12px; }
      .wf-ent__tile-ic, .wf-ent__tile-ic svg{ width:32px; height:32px; }
    }

/* ── section bases: pp-bento-sec + wf-flow-sec ──
   ⚠ These scopes re-declare --n100/--n200/--n300 etc. with DESIGN-LIBRARY values
   that differ from the global styles.css neutrals of the same name (shadow tokens).
   Inside these sections var(--n100) is NOT the global n100 — intentional import
   from the Figma exports; single-sourced here so the shadowing is defined ONCE. ── */

    .pp-bento-sec{ --bg:#fff; --n100:var(--n150); --n200:#D7DCE5; --n500:var(--n500);
      --line:rgba(23,24,26,.09); --line-strong:rgba(23,24,26,.18);
      --text:var(--n900); --text-primary:var(--n900); --text-mute:var(--n700,#45484D); --text-dim:rgba(23,24,26,.42); --bg-mute:#fff;
      --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:72px;--sp-9:112px;
      --ease-out:cubic-bezier(.22,.50,.40,.96);
      padding:var(--sec-pad) 0; background:var(--n50); }

    .pp-bento-sec .pp-in{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }


    /* ═══ HOW IT WORKS — 4-step flow (grey seamless cards, blank graphic placeholders) ═══ */
    .wf-flow-sec{ --n50:var(--n50); --n100:var(--n150); --n200:#DCDFE7; --n300:#C7CCD7; --n500:var(--n500); --n700:var(--n700);
      --line:rgba(23,24,26,.09); --line-strong:rgba(23,24,26,.18); --text-dim:rgba(23,24,26,.42);
      padding:var(--sec-pad) 0; background:var(--n50); }

    .wf-flow-sec .pp-in{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }