/* frimpomaasync visual system: stat tiles, tracks, gradient module panels,
   floating UI cards, elbow connectors, role chips.
   Driven by the existing motion engine in fsnav.js (data-reveal / data-stagger / data-count).
   Separate file so journey.css is never touched. */
    /* Shared visual system for /method, /operations-map, /about.
       Uses the existing motion engine in fsnav.js:
       data-reveal, data-stagger, data-count. No second animation system. */

    /* Second accent, locked 30 July. journey.css defines it; the fallback is
       here because a few pages load this sheet without journey.css. */
    :root{ --red:#E4222C; --red-soft:rgba(228,34,44,.12); }

    .m-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:8px;
      border:1px solid rgba(16,20,38,.11);border-radius:14px;overflow:hidden;background:#fff;
      box-shadow:0 24px 54px -38px rgba(16,20,38,.4)}
    .m-stat{padding:28px 26px 26px;position:relative;border-right:1px solid rgba(16,20,38,.09);
      transition:background .45s ease}
    .m-stat:last-child{border-right:none}
    .m-stat::before{content:"";position:absolute;left:26px;right:26px;top:0;height:2px;background:#C2501C;
      transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
    .m-stat:hover{background:#FDFBFA}
    .m-stat:hover::before{transform:scaleX(1)}
    .m-stat .n{font-family:var(--serif,'Iowan Old Style',Georgia,serif);font-size:46px;line-height:.95;
      color:#101426;font-variant-numeric:tabular-nums;letter-spacing:-1.2px}
    .m-stat .n span{color:#C2501C}
    .m-stat .l{margin-top:14px;padding-top:13px;border-top:1px solid rgba(16,20,38,.10);
      font-size:12.6px;line-height:1.5;color:rgba(16,20,38,.58);max-width:26ch}
    @media (max-width:980px){
      .m-stats{grid-template-columns:repeat(2,1fr)}
      .m-stat{border-bottom:1px solid rgba(16,20,38,.09)}
      .m-stat:nth-child(2n){border-right:none}
      .m-stat:nth-last-child(-n+2){border-bottom:none}
      .m-stat .n{font-size:38px}
    }
    @media (max-width:430px){
      .m-stats{grid-template-columns:1fr}
      .m-stat{border-right:none;padding:22px 20px}
      .m-stat:not(:last-child){border-bottom:1px solid rgba(16,20,38,.09)}
      .m-stat .n{font-size:34px}
    }

    /* ---- the seven-day build rail ---- */
    .m-rail{position:relative;margin-top:26px;display:grid;gap:0}
    .m-rail::before{content:"";position:absolute;left:26px;top:26px;bottom:26px;width:2px;
      background:linear-gradient(180deg,#C2501C 0%,rgba(194,80,28,.28) 100%)}
    .m-day{position:relative;display:grid;grid-template-columns:54px 1fr;gap:18px;padding:16px 0;align-items:start}
    .m-day .dot{position:relative;z-index:1;width:54px;height:54px;border-radius:14px;background:#fff;
      border:1.5px solid rgba(16,20,38,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;
      font-family:var(--mono,ui-monospace,Menlo,monospace);line-height:1.1}
    .m-day .dot .k{font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(16,20,38,.40)}
    .m-day .dot .v{font-size:19px;color:#101426;font-weight:600}
    .m-day.on .dot{background:#101426;border-color:#101426}
    .m-day.on .dot .k{color:rgba(255,255,255,.55)}
    .m-day.on .dot .v{color:#fff}
    .m-day .b h3{font-family:var(--serif,'Iowan Old Style',Georgia,serif);font-size:19px;font-weight:600;margin:6px 0 4px;color:#101426}
    .m-day .b p{font-size:13.8px;color:rgba(16,20,38,.64);line-height:1.55}
    .m-day .doc{display:inline-flex;align-items:center;gap:7px;margin-top:9px;background:#FCEFE9;color:#C2501C;
      border-radius:100px;padding:5px 12px;font-size:11.5px;font-weight:600}
    .m-day .doc::before{content:"";width:5px;height:5px;border-radius:50%;background:#C2501C;flex:0 0 auto}
    @media (max-width:420px){
      .m-rail::before{left:20px}
      .m-day{grid-template-columns:42px 1fr;gap:13px}
      .m-day .dot{width:42px;height:42px;border-radius:11px}
      .m-day .dot .v{font-size:15px}
      .m-day .dot .k{font-size:7.5px}
    }

    /* ---- the standard, as a console ---- */
    .m-console{margin-top:24px;background:#101426;border-radius:14px;overflow:hidden;
      box-shadow:0 24px 60px -30px rgba(16,20,38,.55)}
    .m-console .bar{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.09)}
    .m-console .bar .dots{display:flex;gap:6px}
    .m-console .bar .dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
    .m-console .bar .t{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:10.5px;letter-spacing:1.4px;
      text-transform:uppercase;color:rgba(255,255,255,.48)}
    .m-console .bar .st{margin-left:auto;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:10.5px;
      letter-spacing:1.2px;text-transform:uppercase;color:#8FCB9B}
    .m-rows{padding:6px 0}
    .m-row{display:grid;grid-template-columns:26px 1fr auto;gap:14px;align-items:center;padding:13px 20px;
      border-bottom:1px solid rgba(255,255,255,.055)}
    .m-row:last-child{border-bottom:none}
    .m-row .tick{width:22px;height:22px;border-radius:7px;background:rgba(143,203,155,.16);border:1px solid rgba(143,203,155,.5);
      position:relative}
    .m-row .tick::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #8FCB9B;
      border-width:0 2px 2px 0;transform:rotate(45deg)}
    .m-row .lab{color:rgba(255,255,255,.92);font-size:14px;line-height:1.4}
    .m-row .lab span{display:block;color:rgba(255,255,255,.44);font-size:12.3px;margin-top:3px}
    .m-row .pass{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:10px;letter-spacing:1.3px;
      text-transform:uppercase;color:#8FCB9B;white-space:nowrap}
    .m-console .foot{padding:14px 20px;border-top:1px solid rgba(255,255,255,.09);
      font-size:12.6px;color:rgba(255,255,255,.55);line-height:1.5}
    @media (max-width:430px){
      .m-row{grid-template-columns:22px 1fr;gap:11px;padding:12px 15px}
      .m-row .pass{grid-column:2;margin-top:-4px}
      .m-console .bar{padding:12px 15px}
      .m-console .bar .t{font-size:9.5px;letter-spacing:1px}
    }


    /* ---- featured modules: floating UI cards, elbow connectors, role chips ---- */
    .mods-wrap{position:relative}
    .mods-wrap::before{content:"";position:absolute;inset:-40px -24px;z-index:0;pointer-events:none;
      background-image:radial-gradient(rgba(16,20,38,.10) 1px, transparent 1px);
      background-size:22px 22px;
      -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
      mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
    .mods{position:relative;z-index:1;display:grid;gap:74px;margin-top:30px}
    .mod{display:grid;grid-template-columns:1fr 1.12fr;gap:52px;align-items:center}
    .mod.rev .mod-copy{order:2}
    .mod.rev .mod-art{order:1}
    .mod-copy h3{font-family:var(--serif,'Iowan Old Style',Georgia,serif);font-size:27px;line-height:1.2;
      font-weight:600;color:#101426;margin:10px 0 12px;letter-spacing:-.2px}
    .mod-copy h3 span{color:#C2501C}
    .mod-copy p{font-size:14.6px;line-height:1.62;color:rgba(16,20,38,.66)}
    .mod-copy .kicker{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:10px;letter-spacing:1.6px;
      text-transform:uppercase;color:#C2501C}
    .mod-copy .note{margin-top:14px;font-size:12.8px;color:rgba(16,20,38,.5)}

    .mod-art{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;
      box-shadow:0 30px 70px -34px rgba(16,20,38,.5)}
    .mod-art::after{content:"";position:absolute;inset:0;pointer-events:none;
      background:radial-gradient(120% 80% at 18% 8%, rgba(255,255,255,.28), transparent 58%)}
    .art-copper{background:linear-gradient(142deg,#D4601F 0%,#B4460F 42%,#6E2A08 100%)}
    .art-ink{background:linear-gradient(142deg,#232A50 0%,#141930 46%,#080B18 100%)}
    .art-dusk{background:linear-gradient(142deg,#E4753C 0%,#C2501C 48%,#3A1606 100%)}

    .uic{position:absolute;background:#fff;border-radius:11px;padding:12px 13px;
      box-shadow:0 18px 40px -16px rgba(8,11,24,.55), 0 2px 6px rgba(8,11,24,.14);z-index:3}
    .uic .h{display:flex;align-items:center;gap:8px}
    .uic .ico{width:19px;height:19px;border-radius:6px;background:#101426;flex:0 0 auto;position:relative}
    .uic .ico.c{background:#C2501C}
    .uic .ico::after{content:"";position:absolute;left:5.5px;top:5.5px;width:8px;height:8px;border-radius:2px;
      border:1.5px solid #fff}
    .uic .ico.tick::after{left:6.5px;top:4px;width:4px;height:8px;border:solid #fff;border-width:0 1.6px 1.6px 0;
      transform:rotate(45deg);border-radius:0}
    .uic .t{font-size:11.5px;font-weight:600;color:#101426;letter-spacing:-.1px}
    .uic .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
    .uic .k{font-size:10.5px;color:rgba(16,20,38,.52)}
    .uic .v{font-size:11px;font-weight:700;color:#101426;font-variant-numeric:tabular-nums}
    .uic .pillx{display:inline-block;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:8.5px;
      letter-spacing:1.1px;text-transform:uppercase;padding:3px 7px;border-radius:100px;white-space:nowrap}
    .uic .pillx.ok{background:rgba(63,107,68,.13);color:#3F6B44}
    .uic .pillx.cop{background:#FCEFE9;color:#C2501C}
    .uic .big{font-family:var(--serif,'Iowan Old Style',Georgia,serif);font-size:26px;color:#C2501C;line-height:1;
      margin-top:7px;font-variant-numeric:tabular-nums}
    .uic .sep{height:1px;background:rgba(16,20,38,.09);margin:9px 0 2px}

    /* elbow connectors, orthogonal only so they never distort */
    .cx{position:absolute;z-index:2;background:rgba(255,255,255,.55)}
    .cx.h{height:1.5px}
    .cx.v{width:1.5px}
    .cx.arrow::after{content:"";position:absolute;right:-1px;top:50%;width:6px;height:6px;
      border:solid rgba(255,255,255,.75);border-width:1.5px 1.5px 0 0;transform:translateY(-50%) rotate(45deg)}
    .cx.down::after{content:"";position:absolute;left:50%;bottom:-1px;width:6px;height:6px;
      border:solid rgba(255,255,255,.75);border-width:0 1.5px 1.5px 0;transform:translateX(-50%) rotate(45deg)}

    /* role chip, the little cursor label */
    .who{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:6px;background:#101426;color:#fff;
      border-radius:100px;padding:5px 11px;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:8.5px;
      letter-spacing:1.2px;text-transform:uppercase;box-shadow:0 10px 24px -10px rgba(8,11,24,.7)}
    .who.cop{background:#C2501C}
    .who::before{content:"";width:0;height:0;border-left:6px solid currentColor;border-top:4px solid transparent;
      border-bottom:4px solid transparent;opacity:.85}

    /* the pill marquee */
    .pills{position:relative;z-index:1;display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
    .pills span{border:1px solid rgba(16,20,38,.13);border-radius:100px;padding:6px 13px;font-size:12px;
      color:rgba(16,20,38,.62);background:#fff}
    .pills span.on{border-color:#C2501C;color:#C2501C;background:#FCEFE9}

    /* card placements */
    .m1a{left:6%;top:9%;width:47%}
    .m1b{left:44%;top:33%;width:50%}
    .m1c{left:9%;top:62%;width:52%}
    .m1x1{left:53%;top:22%;width:6%}
    .m1x2{left:59%;top:22%;height:13%}
    .m1x3{left:52%;top:55%;height:6%}
    .m1w{left:63%;top:80%}

    .m2a{left:7%;top:11%;width:52%}
    .m2b{left:36%;top:47%;width:57%}
    .m2x1{left:33%;top:31%;height:18%}
    .m2w{left:8%;top:78%}

    .m3a{left:7%;top:10%;width:50%}
    .m3b{left:38%;top:38%;width:55%}
    .m3c{left:10%;top:72%;width:44%}
    .m3x1{left:31%;top:28%;height:12%}
    .m3x2{left:46%;top:63%;height:7%}
    .m3w{left:60%;top:82%}

    @media (max-width:900px){
      .mods-wrap::before{inset:-30px 0}
      .mods{gap:46px}
      .mod{grid-template-columns:1fr;gap:22px}
      .mod.rev .mod-copy{order:1} .mod.rev .mod-art{order:2}
      .mod-copy h3{font-size:23px}
    }
    @media (max-width:520px){
      .mod-art{aspect-ratio:1/1}
      .uic{padding:10px 11px;border-radius:9px}
      .uic .t{font-size:10.5px}
      .uic .k{font-size:9.5px} .uic .v{font-size:10px}
      .uic .big{font-size:21px}
      .who{font-size:7.5px;padding:4px 9px}
      .mods-wrap::before{background-size:18px 18px}
    }

    /* ---- the twelve steps, as three connected tracks ---- */
    .trks{display:grid;gap:16px;margin-top:26px}
    .trk{background:linear-gradient(180deg,#fff,#FDFCFC);border:1px solid rgba(16,20,38,.10);border-radius:14px;
      padding:28px 30px;position:relative;overflow:hidden;
      box-shadow:0 20px 46px -34px rgba(16,20,38,.38);transition:box-shadow .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
    .trk:hover{box-shadow:0 28px 60px -34px rgba(16,20,38,.46);transform:translateY(-2px)}
    .trk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
      background:linear-gradient(180deg,#D4601F,rgba(194,80,28,.25))}
    .trk-head{display:grid;grid-template-columns:132px 1fr;gap:26px;align-items:baseline}
    .trk-head .rng{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:10px;letter-spacing:1.5px;
      text-transform:uppercase;color:#C2501C;padding-top:5px}
    .trk-head h3{font-family:var(--serif,'Iowan Old Style',Georgia,serif);font-size:21px;font-weight:600;
      color:#101426;margin-bottom:6px;letter-spacing:-.15px}
    .trk-head p{font-size:14px;line-height:1.6;color:rgba(16,20,38,.64)}
    .trk-steps{display:flex;gap:26px;margin-top:20px;padding-left:158px;flex-wrap:wrap}
    .trk-step{position:relative;display:flex;align-items:center;gap:9px}
    .trk-step::before{content:"";position:absolute;left:-26px;top:50%;width:26px;height:1.5px;
      background:rgba(194,80,28,.32)}
    .trk-step:first-child::before{display:none}
    .trk-step .n{width:26px;height:26px;border-radius:50%;background:#FCEFE9;color:#C2501C;flex:0 0 auto;
      display:flex;align-items:center;justify-content:center;font-family:var(--mono,ui-monospace,Menlo,monospace);
      font-size:10px;font-weight:600}
    .trk-step .lb{font-size:13.6px;color:#101426;white-space:nowrap}
    .trk.done .trk-step .n{background:#101426;color:#fff}

    /* explicit stacked variant, for tracks living in a narrow column */
    .trks-stack .trk-head{grid-template-columns:1fr;gap:6px}
    .trks-stack .trk-head .rng{padding-top:0}
    .trks-stack .trk-steps{padding-left:0;gap:0;margin-top:18px;flex-direction:column;align-items:flex-start}
    .trks-stack .trk-step{padding:8px 0}
    .trks-stack .trk-step::before{left:12.5px;top:-8px;width:1.5px;height:16px}
    .trks-stack .trk-step .lb{white-space:normal}

    @media (max-width:900px){
      .trk{padding:20px 20px 20px 22px}
      .trk-head{grid-template-columns:1fr;gap:6px}
      .trk-head .rng{padding-top:0}
      .trk-steps{padding-left:0;gap:0;margin-top:18px;flex-direction:column;align-items:flex-start}
      .trk-step{padding:8px 0 8px 0}
      .trk-step::before{left:12.5px;top:-8px;width:1.5px;height:16px}
      .trk-step .lb{white-space:normal}
    }

    @media (prefers-reduced-motion: reduce){
      .m-day,.m-row{transition:none !important}
    }

    /* ---- light-context fix for .role-list ----
       journey.css styles .role-row p white, for dark sections. On a light
       section that is white on white. This restores it wherever .on-light is set. */
    .role-list.on-light .role-row p{color:rgba(16,20,38,.64)}
    .role-list.on-light .role-row strong{color:#101426}

    /* ---- reasons grid: numbered cards, no dead column ---- */
    .rsns{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
    .rsn{background:linear-gradient(180deg,#fff,#FDFCFC);border:1px solid rgba(16,20,38,.10);border-radius:12px;
      padding:24px 24px;position:relative;overflow:hidden;
      box-shadow:0 16px 40px -32px rgba(16,20,38,.36);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
    .rsn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#C2501C;
      transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
    .rsn:hover{transform:translateY(-3px);box-shadow:0 26px 56px -32px rgba(16,20,38,.44)}
    .rsn:hover::before{transform:scaleY(1)}
    .rsn .n{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:10px;letter-spacing:1.5px;color:#C2501C}
    .rsn h3{font-family:var(--serif,'Iowan Old Style',Georgia,serif);font-size:18px;font-weight:600;color:#101426;
      margin:7px 0 7px;letter-spacing:-.1px;line-height:1.25}
    .rsn p{font-size:13.6px;line-height:1.6;color:rgba(16,20,38,.64)}
    @media (max-width:820px){ .rsns{grid-template-columns:1fr} }

    /* ---- data surface: what each role touches, and what it never touches ---- */
    .dsurf{display:grid;gap:12px;margin-top:26px}
    .dsurf-row{background:#fff;border:1px solid rgba(16,20,38,.10);border-radius:12px;overflow:hidden;
      display:grid;grid-template-columns:196px 1fr}
    .dsurf-name{background:#FBFAF9;border-right:1px solid rgba(16,20,38,.08);padding:20px 22px}
    .dsurf-name .n{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:10px;letter-spacing:1.5px;color:#C2501C}
    .dsurf-name h3{font-family:var(--serif,'Iowan Old Style',Georgia,serif);font-size:19px;font-weight:600;
      color:#101426;margin-top:7px;line-height:1.2}
    .dsurf-body{padding:18px 22px 20px}
    .dline{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;padding:7px 0}
    .dline + .dline{border-top:1px solid rgba(16,20,38,.07)}
    .dline .lab{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:9px;letter-spacing:1.3px;
      text-transform:uppercase;padding-top:6px}
    .dline.yes .lab{color:#C2501C}
    .dline.no .lab{color:rgba(16,20,38,.38)}
    .chips{display:flex;flex-wrap:wrap;gap:6px}
    .chip{border-radius:100px;padding:5px 11px;font-size:12.2px;line-height:1.3;white-space:nowrap}
    .chip.on{background:#FCEFE9;color:#B4460F;border:1px solid rgba(194,80,28,.22)}
    .chip.off{background:#F4F4F6;color:rgba(16,20,38,.46);border:1px solid rgba(16,20,38,.09)}
    .dsurf-note{margin-top:13px;padding-top:12px;border-top:1px solid rgba(16,20,38,.07);
      font-size:13.2px;line-height:1.55;color:rgba(16,20,38,.62)}
    @media (max-width:820px){
      .dsurf-row{grid-template-columns:1fr}
      .dsurf-name{border-right:none;border-bottom:1px solid rgba(16,20,38,.08);padding:16px 18px}
      .dsurf-name h3{font-size:17px;margin-top:5px}
      .dsurf-body{padding:15px 18px 18px}
      .dline{grid-template-columns:1fr;gap:6px;padding:9px 0}
      .dline .lab{padding-top:0}
      .chip{font-size:11.6px;white-space:normal}
    }

    /* ---- spacing when the tiles sit next to another module ----
       .m-stats carries an 8px top margin for the case where it opens a
       section. Following a track or leading the path cards it needs room. */
    .trks + .m-stats{margin-top:18px}
    .m-stats + .card-grid{margin-top:22px}

    /* ---- sources: figure, what it is, citation ---- */
    .srcs{display:grid;gap:10px;margin-top:24px}
    .src{background:#fff;border:1px solid rgba(16,20,38,.10);border-radius:12px;padding:18px 22px;
      display:grid;grid-template-columns:180px 1fr 260px;gap:24px;align-items:center}
    .src .fig{font-family:var(--serif,'Iowan Old Style',Georgia,serif);font-size:26px;color:#C2501C;line-height:1.05;
      font-variant-numeric:tabular-nums}
    .src .fig small{display:block;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:9px;
      letter-spacing:1.3px;text-transform:uppercase;color:rgba(16,20,38,.40);margin-top:6px}
    .src .what{font-size:13.8px;line-height:1.55;color:rgba(16,20,38,.68)}
    .src .cite{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:10.5px;line-height:1.6;
      letter-spacing:.4px;color:rgba(16,20,38,.46);text-align:right}
    .src .cite b{display:block;color:#101426;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;font-size:9.5px;margin-bottom:4px}
    .src.mine{background:#FCEFE9;border-color:rgba(194,80,28,.22)}
    .src.mine .cite b{color:#B4460F}
    @media (max-width:900px){
      .src{grid-template-columns:1fr;gap:10px;padding:16px 18px}
      .src .cite{text-align:left}
      .src .fig{font-size:22px}
    }

    /* ---- the bridge: the missing rung between free and the build ---- */
    a.bridge{display:block;text-decoration:none;color:inherit;margin-top:34px;border-radius:18px;overflow:hidden;
      position:relative;background:linear-gradient(148deg,#1C2246 0%,#12162C 44%,#080B18 100%);
      box-shadow:0 40px 90px -46px rgba(8,11,24,.75);
      transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s cubic-bezier(.2,.7,.2,1)}
    a.bridge::before{content:"";position:absolute;inset:0;pointer-events:none;
      background:radial-gradient(90% 120% at 88% 0%, rgba(194,80,28,.42), transparent 58%)}
    a.bridge::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
      background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);background-size:22px 22px;
      -webkit-mask-image:linear-gradient(115deg,#000,transparent 62%);mask-image:linear-gradient(115deg,#000,transparent 62%)}
    a.bridge:hover{transform:translateY(-3px);box-shadow:0 52px 104px -46px rgba(8,11,24,.85)}
    a.bridge:focus-visible{outline:2px solid #C2501C;outline-offset:3px}

    .bridge-in{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:52px;
      align-items:center;padding:46px 48px}
    .bridge .eb{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:10px;letter-spacing:1.8px;
      text-transform:uppercase;color:#E8895C}
    .bridge h2{font-family:var(--serif,'Iowan Old Style',Georgia,serif);font-size:33px;line-height:1.16;
      font-weight:600;color:#fff;margin:13px 0 14px;letter-spacing:-.4px}
    .bridge h2 em{font-style:italic;color:#F0A47C}
    .bridge .sub{color:rgba(255,255,255,.68);font-size:15px;line-height:1.6;max-width:46ch}
    .bridge-facts{display:flex;gap:30px;margin-top:26px;flex-wrap:wrap}
    .bridge-fact .v{font-family:var(--serif,'Iowan Old Style',Georgia,serif);font-size:23px;color:#fff;line-height:1}
    .bridge-fact .k{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:9px;letter-spacing:1.3px;
      text-transform:uppercase;color:rgba(255,255,255,.44);margin-top:7px}
    .bridge-go{display:inline-flex;align-items:center;gap:9px;margin-top:28px;color:#fff;font-size:14.5px;font-weight:600}
    .bridge-go .ar{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
    a.bridge:hover .bridge-go .ar{transform:translateX(6px)}

    /* the ladder */
    .ladder{display:grid;gap:0}
    .rung{border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:15px 18px;background:rgba(255,255,255,.04);
      display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center}
    .rung .amt{font-family:var(--serif,'Iowan Old Style',Georgia,serif);font-size:17px;color:rgba(255,255,255,.6)}
    .rung .nm{font-size:13.4px;color:rgba(255,255,255,.6);line-height:1.4}
    .rung .nm small{display:block;color:rgba(255,255,255,.36);font-size:11.6px;margin-top:3px}
    .rung.mid{background:linear-gradient(135deg,#D4601F,#B4460F);border-color:transparent;padding:20px 20px;
      box-shadow:0 22px 44px -18px rgba(8,11,24,.9);transform:scale(1.045);position:relative;z-index:2}
    .rung.mid .amt{color:#fff;font-size:22px}
    .rung.mid .nm{color:#fff;font-size:14.6px;font-weight:600}
    .rung.mid .nm small{color:rgba(255,255,255,.78);font-weight:400}
    .lgap{height:26px;position:relative}
    .lgap::before{content:"";position:absolute;left:47px;top:4px;bottom:4px;width:1.5px;background:rgba(255,255,255,.2)}
    .lgap::after{content:"";position:absolute;left:44px;bottom:3px;width:6px;height:6px;
      border:solid rgba(255,255,255,.4);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}

    @media (max-width:940px){
      .bridge-in{grid-template-columns:1fr;gap:32px;padding:34px 26px}
      .bridge h2{font-size:26px}
    }
    @media (max-width:430px){
      .bridge-in{padding:28px 20px}
      .bridge h2{font-size:23px}
      .bridge-facts{gap:20px}
      .rung{grid-template-columns:78px 1fr;gap:12px;padding:13px 14px}
      .rung.mid{transform:none;padding:16px 15px}
      .lgap::before{left:38px} .lgap::after{left:35px}
    }

    /* ---- the board: five roles, stated the way $25,000 should look ---- */
    .board{position:relative;border-radius:20px;overflow:hidden;
      background:linear-gradient(155deg,#1A2044 0%,#111529 46%,#070A16 100%);
      box-shadow:0 50px 110px -52px rgba(8,11,24,.8), inset 0 1px 0 rgba(255,255,255,.06)}
    .board::before{content:"";position:absolute;inset:0;pointer-events:none;
      background:radial-gradient(75% 100% at 96% -6%, rgba(194,80,28,.38), transparent 56%)}
    .board::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
      background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:24px 24px;
      -webkit-mask-image:linear-gradient(160deg,#000,transparent 55%);mask-image:linear-gradient(160deg,#000,transparent 55%)}

    .board-top{position:relative;z-index:1;display:flex;align-items:baseline;justify-content:space-between;
      gap:20px;padding:30px 38px 24px;border-bottom:1px solid rgba(255,255,255,.10)}
    .board-top .ttl{font-family:var(--serif,'Iowan Old Style',Georgia,serif);font-size:25px;color:#fff;letter-spacing:-.3px}
    .board-top .ttl em{font-style:italic;color:#F0A47C}
    .board-top .mark{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:9.5px;letter-spacing:2px;
      text-transform:uppercase;color:rgba(255,255,255,.42);white-space:nowrap}

    .board-rows{position:relative;z-index:1}
    .brow{display:grid;grid-template-columns:74px 1fr 1.05fr;gap:26px;align-items:center;
      padding:24px 38px;border-bottom:1px solid rgba(255,255,255,.075);position:relative;
      transition:background .4s ease}
    .brow:last-child{border-bottom:none}
    .brow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#C2501C;
      transform:scaleY(0);transform-origin:center;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
    .brow:hover{background:rgba(255,255,255,.035)}
    .brow:hover::before{transform:scaleY(1)}
    .brow .idx{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:11px;letter-spacing:1.6px;
      color:rgba(240,164,124,.85)}
    .brow .nm{font-family:var(--serif,'Iowan Old Style',Georgia,serif);font-size:23px;color:#fff;line-height:1.15;
      letter-spacing:-.2px;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
    .brow:hover .nm{transform:translateX(4px)}
    .brow .ds{font-size:14px;line-height:1.55;color:rgba(255,255,255,.52)}

    .board-foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
      gap:22px;padding:26px 38px;border-top:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);flex-wrap:wrap}
    .board-foot .price{font-family:var(--serif,'Iowan Old Style',Georgia,serif);font-size:27px;color:#fff}
    .board-foot .price span{font-size:14px;color:rgba(255,255,255,.5);margin-left:9px}
    .board-foot .gtee{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:10px;letter-spacing:1.7px;
      text-transform:uppercase;color:#F0A47C}

    @media (max-width:900px){
      .board-top{padding:24px 22px 20px;flex-direction:column;gap:8px}
      .board-top .ttl{font-size:21px}
      .brow{grid-template-columns:52px 1fr;gap:6px 16px;padding:18px 22px}
      .brow .ds{grid-column:2;font-size:13.2px}
      .brow .nm{font-size:19px}
      .board-foot{padding:20px 22px}
      .board-foot .price{font-size:23px}
    }
    @media (max-width:400px){
      .brow{grid-template-columns:40px 1fr;padding:16px 18px}
      .board-top,.board-foot{padding-left:18px;padding-right:18px}
    }

    /* ---- paired statements: give the two-column sections a frame ----
       Scoped to pages that load modules.css. journey.css keeps owning .split
       everywhere else, so nothing on the rest of the site moves. */
    .section > .wrap.split{
      background:linear-gradient(180deg,#fff,#FDFCFC);
      border:1px solid rgba(16,20,38,.10);border-radius:16px;
      padding:38px 40px;gap:0;
      box-shadow:0 24px 56px -40px rgba(16,20,38,.4)}
    /* A dark section paints its text white, so the paper card above would hide
       every word inside it. Dark sections get the same frame in ink instead.
       Fixed 31 July after /synkasa rendered two headings white on white. */
    .section.dark > .wrap.split{
      background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
      border-color:rgba(255,255,255,.15);
      box-shadow:0 30px 70px -40px rgba(0,0,0,.65)}
    .section.dark > .wrap.split > * + *::before{
      background:linear-gradient(180deg,transparent,rgba(255,255,255,.20) 18%,rgba(255,255,255,.20) 82%,transparent)}
    @media (max-width:880px){
      .section.dark > .wrap.split > * + *::before{
        background:linear-gradient(90deg,transparent,rgba(255,255,255,.20) 12%,rgba(255,255,255,.20) 88%,transparent)}
    }
    /* journey.css makes the first column of a split sticky, which was right when
       a split was two bare columns on the page. Inside this framed card it slides
       out of the bottom of its own border and leaves a hole above the eyebrow.
       Seen on the /synkasa FAQ, the response script, and the homepage close.
       The frame is the thing that has to hold, so the sticky comes off here. */
    .section > .wrap.split > *{position:relative;padding:0 40px}
    @media (min-width:901px){
      .section > .wrap.split > :first-child{position:relative;top:auto}
    }
    .section > .wrap.split > *:first-child{padding-left:0}
    .section > .wrap.split > *:last-child{padding-right:0}
    .section > .wrap.split > * + *::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;
      background:linear-gradient(180deg,transparent,rgba(16,20,38,.14) 18%,rgba(16,20,38,.14) 82%,transparent)}
    .section > .wrap.split .eyebrow{position:relative;padding-top:14px}
    .section > .wrap.split .eyebrow::before{content:"";position:absolute;left:0;top:0;width:26px;height:2px;background:#C2501C}
    @media (max-width:880px){
      .section > .wrap.split{padding:26px 22px;gap:30px}
      .section > .wrap.split > *{padding:0}
      .section > .wrap.split > * + *{padding-top:30px}
      .section > .wrap.split > * + *::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;
        background:linear-gradient(90deg,transparent,rgba(16,20,38,.14) 12%,rgba(16,20,38,.14) 88%,transparent)}
    }