/* ═══════════════════════════════════════════════════════════════════
   "For factories & workshops" — three payrolls vs one plan
   (index.html #one-team)
   Left: the IT, marketing and design teams a business would have to hire,
   each salary counting up into a running payroll before a red X strikes it
   out. Right: one MIT plan at a fraction of the cost. A gear "VS" clunks
   round every time a team is crossed out. Behind it all, the logo is
   sketched like a designer's construction drawing: guide circles, then the
   brush outlines (traced from logo.png) draw themselves, a wash fills in and
   light runs along the lines. Each X makes the sketch glow.
   Light band in light mode, deep night band in dark (glass) mode — every
   colour comes from the --pr-* tokens. Without JS (or with reduced motion)
   the finished state shows: everything crossed, totals filled in.
   ═══════════════════════════════════════════════════════════════════ */
.payroll-section {
    --pr-bg:
        radial-gradient(900px 560px at 0% 0%, rgba(0,194,203,0.14), transparent 60%),
        radial-gradient(900px 560px at 100% 100%, rgba(199,125,186,0.20), transparent 60%),
        linear-gradient(180deg, #f6f7fa 0%, #eef0f5 100%);
    --pr-ink: #1a0e2e;
    --pr-ink-dim: rgba(26,14,46,0.38);
    --pr-soft: rgba(26,14,46,0.74);
    --pr-mute: rgba(26,14,46,0.56);
    --pr-line: rgba(26,14,46,0.13);
    --pr-chip: rgba(255,255,255,0.82);
    --pr-sheet: rgba(255,255,255,0.55);
    --pr-card: linear-gradient(#ffffff, #ffffff);
    --pr-card-shadow: 0 34px 70px -34px rgba(76,29,110,0.45);
    --pr-no: #e0344f;
    --sk-n: #344767;
    --sk-m: #8A328A;
    --sk-p: #c46fc4;
    --sk-guide: rgba(26,14,46,0.15);
    --sk-label: rgba(26,14,46,0.40);
    --sk-wash: 0.11;
    --pr-steel: #cdd2db;
    --pr-track: rgba(26,14,46,0.08);
    --pr-grad: linear-gradient(110deg, #00a6ae 0%, #8A328A 62%, #C77DBA 100%);
    --pr-teal: #00838c;
    --pr-pink: #8A328A;
    --pr-save-bg: rgba(0,194,203,0.10);
    position: relative; overflow: hidden; isolation: isolate; color: var(--pr-ink);
    margin: var(--space-xl) 0;
    padding: 96px 0 72px;
    background: var(--pr-bg);
}
[data-theme="glass"] .payroll-section {
    --pr-bg:
        radial-gradient(900px 560px at 0% 0%, rgba(0,194,203,0.20), transparent 60%),
        radial-gradient(900px 560px at 100% 100%, rgba(138,50,138,0.40), transparent 60%),
        linear-gradient(170deg, #100b1d 0%, #171126 60%, #120d20 100%);
    --pr-ink: #f6f1fc;
    --pr-ink-dim: rgba(246,241,252,0.40);
    --pr-soft: rgba(246,241,252,0.80);
    --pr-mute: rgba(246,241,252,0.60);
    --pr-line: rgba(255,255,255,0.15);
    --pr-chip: rgba(255,255,255,0.07);
    --pr-sheet: rgba(255,255,255,0.035);
    --pr-card: linear-gradient(160deg, #241b3a, #1a1429);
    --pr-card-shadow: 0 34px 80px -34px rgba(0,0,0,0.8);
    --pr-no: #ff5c74;
    --sk-n: #A4ABBD;
    --sk-m: #e0a5d6;
    --sk-p: #FFB1FF;
    --sk-guide: rgba(255,255,255,0.13);
    --sk-label: rgba(246,241,252,0.42);
    --sk-wash: 0.13;
    --pr-steel: #3a3352;
    --pr-track: rgba(255,255,255,0.08);
    --pr-grad: linear-gradient(110deg, #5eead4 0%, #FFB1FF 60%, #e0a5d6 100%);
    --pr-teal: #5eead4;
    --pr-pink: #FFB1FF;
    --pr-save-bg: rgba(94,234,212,0.10);
}
.payroll-section::after {   /* brand hairline along the top edge */
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1;
    background: linear-gradient(90deg, #00C9C6, #8A328A, #FFB1FF, #C77DBA);
}

/* the logo, sketched — outlines are traced from logo.png into <defs> (#lg-*)
   and reused here. payroll.js adds .is-armed (hide), .is-go (guides draw),
   .is-drawing (pen nib on) and .is-done (wash, specks and comets). With no JS
   the finished sketch shows. */
.pr-sketch { position: absolute; z-index: -1; pointer-events: none; overflow: visible; }
.pr-sketch--main { width: 840px; height: 840px; right: -270px; top: -260px; opacity: .9; }
.pr-sketch--echo { width: 400px; height: 400px; left: -150px; bottom: -150px; opacity: .5; }
.c-n { --c: var(--sk-n); } .c-m { --c: var(--sk-m); } .c-p { --c: var(--sk-p); }

.sk-g { fill: none; stroke: var(--sk-guide); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.5s cubic-bezier(.6,0,.3,1) calc(var(--i) * .11s); }
.sk-ring { fill: none; stroke: var(--sk-guide); stroke-width: 1; stroke-dasharray: 2 9;
    transform-box: view-box; transform-origin: 296px 258px; animation: prSpin 90s linear infinite; }
.sk-ticks line { stroke: var(--sk-label); stroke-width: 1; }
.sk-ticks circle { fill: var(--sk-m); }
.sk-labels text { font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; fill: var(--sk-label); }
.sk-ticks, .sk-labels, .sk-ring { transition: opacity 1s ease .9s; }

.sk-ink use { fill: none; stroke: var(--c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.sk-pencil use { fill: none; stroke: var(--c); stroke-width: .8; stroke-linecap: round; stroke-dasharray: 1; opacity: .45; }
.sk-wash use { fill: var(--c); stroke: none; opacity: var(--sk-wash); transition: opacity 1.8s ease; }
.sk-specks { opacity: .55; }
.sk-specks use { fill: var(--c); transform-box: view-box; transform-origin: 296px 258px; transition: opacity 1.2s ease, transform 1.6s cubic-bezier(.22,1,.36,1); }
.sk-specks use:nth-child(2) { transition-delay: .2s; } .sk-specks use:nth-child(3) { transition-delay: .4s; }
.sk-comet { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .04 .96;
    filter: drop-shadow(0 0 5px var(--c)); animation: skComet var(--d, 8s) linear var(--o, 0s) infinite; transition: opacity 1.2s ease; }
@keyframes skComet { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.sk-orbit { transform-box: view-box; transform-origin: 296px 258px; animation: prSpin 16s linear infinite; transition: opacity 1s ease; }
.sk-orbit circle { fill: var(--sk-m); }
.sk-nib { fill: #fff; stroke: var(--sk-m); stroke-width: 2.5; opacity: 0; filter: drop-shadow(0 0 7px var(--sk-m)); transition: opacity .3s ease; }
.pr-sketch .sk-ink { transition: filter .5s ease; }
.pr-sketch.sk-pulse .sk-ink { filter: drop-shadow(0 0 6px var(--sk-m)); }
.payroll-section.is-won .pr-sketch--main { --sk-wash: 0.2; }

/* armed: everything waits; is-go draws the guides; is-done brings in the rest */
.pr-sketch.is-armed .sk-g { stroke-dashoffset: 1; }
.pr-sketch.is-armed.is-go .sk-g { stroke-dashoffset: 0; }
.pr-sketch.is-armed:not(.is-go) .sk-ticks, .pr-sketch.is-armed:not(.is-go) .sk-labels, .pr-sketch.is-armed:not(.is-go) .sk-ring { opacity: 0; }
.pr-sketch.is-armed:not(.is-done) .sk-wash use,
.pr-sketch.is-armed:not(.is-done) .sk-comet,
.pr-sketch.is-armed:not(.is-done) .sk-orbit { opacity: 0; }
.pr-sketch.is-armed:not(.is-done) .sk-specks use { opacity: 0; transform: scale(.82); }
.pr-sketch.is-drawing .sk-nib { opacity: 1; }
@keyframes prSpin { to { transform: rotate(360deg); } }

/* ── heading ── */
.pr-head { max-width: 900px; margin: 0 auto 54px; text-align: center; }
.pr-over { display: inline-flex; align-items: center; gap: 8px; padding: 6px 15px; border-radius: 999px; margin: 0 0 18px;
    background: var(--pr-chip); border: 1px solid var(--pr-line);
    font-family: var(--font-heading); font-size: .82rem; font-weight: 800; letter-spacing: 2.4px; color: var(--pr-pink); }
.pr-over .material-icons-round { font-size: 17px; }
.pr-title { font-family: var(--font-heading); font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 900; line-height: .98; letter-spacing: -2.5px; margin: 0 0 20px; color: var(--pr-ink); }
.pr-title span { background: var(--pr-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pr-lead { font-size: 1.18rem; line-height: 1.6; color: var(--pr-soft); max-width: 640px; margin: 0 auto 24px; }
.pr-trades { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pr-trades li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px 7px 10px; border-radius: 999px;
    background: var(--pr-chip); border: 1px solid var(--pr-line); font-weight: 800; font-size: .92rem; color: var(--pr-ink); }
.pr-trades .material-icons-round { font-size: 19px; color: var(--pr-teal); }

/* ── the duel ── */
.pr-duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 30px; align-items: stretch; }
.pr-col-label { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--font-heading);
    font-size: .84rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--pr-mute); }
.pr-col-label .material-icons-round { font-size: 19px; }

/* left: the payroll sheet */
.pr-old { padding: 30px 34px 32px; border-radius: 28px; background: var(--pr-sheet); border: 1.5px dashed var(--pr-line); }
.pr-teams { list-style: none; margin: 0; padding: 0; }
.pr-team { padding: 20px 0 16px; border-bottom: 1px dashed var(--pr-line);
    transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.pr-word { position: relative; display: inline-block; text-decoration: none;
    font-family: var(--font-heading); font-size: clamp(2.3rem, 4.1vw, 4.3rem); font-weight: 900; line-height: 1; letter-spacing: -1.6px;
    color: var(--pr-ink-dim); transition: color .4s ease .25s; }
.pr-x { position: absolute; left: -5%; top: -10%; width: 110%; height: 120%; overflow: visible; pointer-events: none;
    fill: none; stroke: var(--pr-no); stroke-width: 7; stroke-linecap: round;
    filter: drop-shadow(0 3px 8px rgba(224,52,79,0.35)); clip-path: inset(-30% -10%); }
.pr-x path { vector-effect: non-scaling-stroke; }
.pr-team-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 12px 0 0; }
.pr-team-row > span { font-size: .98rem; color: var(--pr-soft); }
.pr-pay { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; color: var(--pr-no); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr-pay small { font-size: .8rem; font-weight: 700; color: var(--pr-mute); margin-left: 2px; }

.pr-total { margin-top: 22px; }
.pr-total-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 12px; }
.pr-total-top > span { font-family: var(--font-heading); font-size: .9rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--pr-mute); }
.pr-total-top b { font-family: var(--font-heading); font-size: clamp(2.2rem, 3.6vw, 3.4rem); font-weight: 900; letter-spacing: -1px; line-height: 1;
    color: var(--pr-no); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-total-note { margin: 12px 0 0; font-size: .92rem; color: var(--pr-mute); }

/* cost meters — both sides share one scale, so the gap is visible */
.pr-meter { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--pr-track); }
.pr-meter i { display: block; height: 100%; }
.pr-old .pr-meter i:nth-child(1) { width: 34.6%; background: #ff9a5c; }
.pr-old .pr-meter i:nth-child(2) { width: 42.3%; background: #ff5c74; }
.pr-old .pr-meter i:nth-child(3) { width: 23.1%; background: #c93a6a; }
.pr-meter--ours { margin: 4px 0 22px; }
.pr-meter--ours i { width: 9.6%; border-radius: 999px; background: linear-gradient(90deg, #00C2CB, #8A328A); transition: width 1s cubic-bezier(.22,1,.36,1); }

/* centre: gear VS */
.pr-vs { position: relative; align-self: center; width: 116px; height: 116px; display: grid; place-items: center; }
.pr-vs-gear { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--pr-steel); fill: currentColor; animation: prSpin 24s linear infinite; }
.pr-vs-gear.kick { animation: prKick .9s cubic-bezier(.3,1.4,.5,1), prSpin 24s linear .9s infinite; }
@keyframes prKick { from { transform: rotate(0); } to { transform: rotate(120deg); } }
.pr-vs span { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--font-heading); font-size: 1.35rem; font-weight: 900; letter-spacing: -.5px; color: #fff;
    background: linear-gradient(135deg, #00C2CB, #8A328A); box-shadow: 0 10px 24px -8px rgba(138,50,138,0.6); }

/* right: the one plan */
.pr-new { position: relative; padding: 30px 34px 32px; border-radius: 28px; border: 2px solid transparent;
    background: var(--pr-card) padding-box, linear-gradient(135deg, #00C9C6, #8A328A 55%, #FFB1FF) border-box;
    box-shadow: var(--pr-card-shadow);
    transition: opacity .6s ease, filter .6s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.pr-big { margin: 14px 0 6px; font-family: var(--font-heading); font-size: clamp(2.3rem, 4.1vw, 4.3rem); font-weight: 900; line-height: 1; letter-spacing: -1.6px; color: var(--pr-ink); }
.pr-big em { font-style: normal; background: var(--pr-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pr-price { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; line-height: .9; }
.pr-price-unit { display: grid; gap: 6px; font-family: var(--font-heading); font-weight: 800; line-height: 1; }
.pr-price-unit span { font-size: 1.6rem; color: var(--pr-ink); }
.pr-price-unit small { font-size: 1.15rem; color: var(--pr-mute); }
.pr-price b { font-family: var(--font-heading); font-size: clamp(4.2rem, 8vw, 8.2rem); font-weight: 900; letter-spacing: -4px; padding-right: 4px;
    background: linear-gradient(110deg, #00C2CB 0%, #8A328A 60%, #C77DBA 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.pr-gets { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 18px; }
.pr-gets li { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1rem; color: var(--pr-ink);
    transition: opacity .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
.pr-gets .material-icons-round { width: 32px; height: 32px; border-radius: 10px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff; background: linear-gradient(135deg, #00C2CB, #8A328A); }
.pr-gets .pr-more { color: var(--pr-teal); }
.pr-gets .pr-more .material-icons-round { background: transparent; color: var(--pr-teal); border: 1.5px dashed var(--pr-teal); }

.pr-save { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 12px 16px; border-radius: 16px;
    background: var(--pr-save-bg); border: 1px solid rgba(0,194,203,0.4); font-size: 1.08rem; font-weight: 700; color: var(--pr-ink); }
.pr-save .material-icons-round { font-size: 26px; color: var(--pr-teal); }
.pr-save b { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 900; color: var(--pr-teal); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pr-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.payroll-section .btn-primary { background: linear-gradient(135deg, #00C9C6 0%, #8A328A 70%, #C77DBA 100%); color: #fff; box-shadow: 0 14px 30px -12px rgba(138,50,138,0.75); }
.payroll-section .btn-primary:hover { box-shadow: 0 18px 36px -12px rgba(199,125,186,0.8); }
.pr-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--pr-teal); text-decoration: none; }
.pr-link .material-icons-round { font-size: 19px; transition: transform .25s; }
.pr-link:hover .material-icons-round { transform: translateX(4px); }

.pr-foot { margin: 26px 0 0; text-align: center; font-size: .85rem; color: var(--pr-mute); }
.pr-replay { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; vertical-align: middle; border: 1px solid var(--pr-line); background: var(--pr-chip);
    color: var(--pr-ink); font: inherit; font-size: .82rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.pr-replay[hidden] { display: none; }
.pr-replay .material-icons-round { font-size: 16px; }

/* ── animated run (payroll.js adds .is-armed, then .is-in / .is-crossed / .is-won) ── */
.payroll-section.is-armed .pr-team:not(.is-in) { opacity: 0; transform: translateY(18px); }
.payroll-section.is-armed .pr-team:not(.is-crossed) .pr-word { color: var(--pr-ink); transition-delay: 0s; }
.payroll-section.is-armed .pr-x { transition: clip-path .32s cubic-bezier(.6,0,.4,1); }
.payroll-section.is-armed .pr-x--2 { transition-delay: .2s; }
.payroll-section.is-armed .pr-team:not(.is-crossed) .pr-x--1 { clip-path: inset(-30% 110% -30% -10%); }
.payroll-section.is-armed .pr-team:not(.is-crossed) .pr-x--2 { clip-path: inset(-30% -10% -30% 110%); }
.payroll-section.is-armed:not(.is-won) .pr-new { opacity: .4; filter: saturate(.2); transform: scale(.97); }
.payroll-section.is-armed:not(.is-won) .pr-gets li { opacity: 0; transform: translateY(10px); }
.payroll-section.is-armed:not(.is-won) .pr-meter--ours i { width: 0 !important; }
.payroll-section.is-won .pr-price b { animation: prPop .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes prPop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.payroll-section.is-won .pr-gets li:nth-child(1) { transition-delay: .25s; }
.payroll-section.is-won .pr-gets li:nth-child(2) { transition-delay: .33s; }
.payroll-section.is-won .pr-gets li:nth-child(3) { transition-delay: .41s; }
.payroll-section.is-won .pr-gets li:nth-child(4) { transition-delay: .49s; }
.payroll-section.is-won .pr-gets li:nth-child(5) { transition-delay: .57s; }
.payroll-section.is-won .pr-gets li:nth-child(6) { transition-delay: .65s; }
.payroll-section.is-won .pr-gets li:nth-child(7) { transition-delay: .73s; }
.payroll-section.is-won .pr-gets li:nth-child(8) { transition-delay: .81s; }

@media (max-width: 1100px) {
    .pr-duel { grid-template-columns: 1fr; gap: 0; max-width: 720px; margin: 0 auto; }
    .pr-vs { justify-self: center; width: 96px; height: 96px; margin: -18px 0; z-index: 2; }
    .pr-vs span { width: 48px; height: 48px; font-size: 1.1rem; }
}
@media (max-width: 640px) {
    .payroll-section { padding: 64px 0 52px; }
    .pr-head { margin-bottom: 36px; }
    .pr-old, .pr-new { padding: 24px 20px 26px; border-radius: 22px; }
    .pr-gets { grid-template-columns: 1fr; }
    .pr-x { stroke-width: 5; }
    .pr-sketch--main { width: 480px; height: 480px; right: -170px; top: -130px; }
    .pr-sketch--echo { width: 260px; height: 260px; left: -110px; bottom: -100px; }
}
@media (prefers-reduced-motion: reduce) {
    .pr-vs-gear, .sk-ring, .sk-comet, .sk-orbit { animation: none !important; }
    .sk-comet { display: none; }
}