/* Odore specialists (/specialists), green version. Built on the inner-page kit (assets/page.css, tools/partials/KIT.md)
   and the homepage's product vocabulary (assets/home.css: team list, App frame, queue rows, approvals, report builder).
   Every product scene is aria-hidden with a vh caption beside it. Motion: the decided state is the markup;
   assets/specialists.js adds .pend (the state before) and .go (transitions on), then plays the change once in view. */

/* ---------- Shared bits ---------- */
.pg .ui .ag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--u-teal-w);color:var(--u-teal);font-size:12px;font-weight:500;white-space:nowrap;}
.pg .ui .tag .ico{width:12px;height:12px;margin:0 4px 0 -2px;color:currentColor;stroke-width:2;}
.pg .ui .tag{white-space:nowrap;}
.pg .sp-hdr > div:first-child{flex:1 1 auto;min-width:0;}
.pg .ui .h4{font-size:19px;line-height:26px;font-weight:600;letter-spacing:-0.02em;}
.pg .ui p{margin:0;}
.pg .sp-od{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px 0 6px;border-radius:999px;background:var(--u-teal-w);color:var(--green);font-size:12px;font-weight:500;white-space:nowrap;}
.pg .sp-od svg{width:11px;height:11px;fill:currentColor;}
.pg .sp-ag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--u-wash);color:var(--u-2);font-size:12px;font-weight:500;}
.pg .ui .av.od{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--u-teal-b);}
.pg .ui .nm{display:flex;align-items:center;gap:8px;min-width:0;}
.pg .sp-done{display:inline-flex;align-items:center;gap:6px;height:32px;color:var(--u-ok);font-size:12px;font-weight:500;white-space:nowrap;}
.pg .sp-done i{width:18px;height:18px;border-radius:50%;background:var(--u-ok);display:grid;place-items:center;flex:0 0 auto;}
.pg .sp-done svg{width:11px;height:11px;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.pg .sp-note{margin-top:24px;font-size:15px;color:var(--ink-2);}

/* Two states in one cell (before and decided), so the swap never moves the layout. Decided (.s1) shows by default. */
.pg .sp-sw{display:inline-grid;align-items:center;justify-items:start;}
.pg .sp-sw > *{grid-area:1 / 1;}
.pg .sp-sw > .s0{opacity:0;pointer-events:none;}
.pg .sp-sw.alt > .s0{opacity:1;pointer-events:auto;}
.pg .sp-sw.alt > .s1{opacity:0;transform:translateY(3px);}
.pg .go .sp-sw > *{transition:opacity .22s var(--ease-out),transform .22s var(--ease-out);}
.pg .ui [data-press]{transition:transform 140ms var(--ease-out);}
.pg .ui [data-press].pressing{transform:scale(.96);}

/* ---------- S1 Hero ---------- */
.pg .sp-hero-fig{display:flex;justify-content:flex-end;}
.pg .sp-team{--cols:32px minmax(0,1.5fr) minmax(0,1fr) minmax(0,.95fr);width:100%;max-width:620px;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-3);overflow:hidden;}
.pg .sp-th{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:16px 20px 14px;border-bottom:1px solid var(--u-line);}
.pg .sp-th .t{display:flex;flex-direction:column;}
.pg .sp-th b{font-size:15px;line-height:22px;}
.pg .sp-cols{display:grid;grid-template-columns:var(--cols);gap:12px;padding:12px 20px 6px;}
.pg .sp-cols > :first-child{grid-column:1 / 3;}
.pg .sp-m{display:grid;grid-template-columns:var(--cols);gap:12px;align-items:center;padding:11px 20px;}
.pg .sp-m + .sp-m{border-top:1px solid var(--u-line);}
.pg .sp-m .av{width:32px;height:32px;}
.pg .sp-m .t{display:flex;flex-direction:column;min-width:0;}
.pg .sp-m .w{min-width:0;color:var(--u-ink);}
.pg .sp-m .a{display:flex;flex-direction:column;}
.pg .sp-act{padding:12px 20px 16px;border-top:1px solid var(--u-line);background:var(--u-canvas);}
.pg .sp-a{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:start;margin-top:8px;}
.pg .sp-a .av{width:24px;height:24px;}
.pg .sp-a .tx p{color:var(--u-2);}
.pg .sp-a .tx p b{color:var(--u-ink);}
.pg .sp-a .sp-sw{margin-top:8px;}
.pg .sp-a > .sm{padding-top:2px;}
/* motion: the two Odore specialists join, their work lands, Priya approves */
.pg .sp-team.pend .sp-m.od,.pg .sp-team.pend .sp-act{opacity:0;transform:translateY(6px);}
.pg .sp-team.go .sp-m.od{transition:opacity .3s var(--ease-out) calc(var(--i,0) * 70ms),transform .3s var(--ease-out) calc(var(--i,0) * 70ms);}
.pg .sp-team.go .sp-act{transition:opacity .3s var(--ease-out) .26s,transform .3s var(--ease-out) .26s;}

/* ---------- S2 Three ways to work ---------- */
.pg .sp-wl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.pg .sp-w{display:flex;flex-direction:column;padding:32px 30px 28px;border-radius:var(--r-l);background:var(--tile);}
.pg .sp-w .n{font-size:14px;line-height:20px;font-weight:500;color:var(--green-2);font-variant-numeric:tabular-nums;}
.pg .sp-w h3{margin-top:28px;font-size:var(--fs-h3);line-height:1.3;letter-spacing:-0.02em;}
.pg .sp-w > p{margin-top:12px;margin-bottom:28px;color:var(--ink-2);}
.pg .sp-w .end{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);}
.pg .sp-w .end .cap{display:block;font-size:12px;line-height:16px;letter-spacing:.05em;text-transform:uppercase;font-weight:500;color:var(--green-2);}
.pg .sp-w .end p{margin-top:8px;color:var(--ink);font-weight:500;letter-spacing:-0.01em;}

/* ---------- S3 Who they are: role cards pick the screen ---------- */
.pg .sp-rg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:start;}
.pg .sp-rl{display:flex;flex-direction:column;gap:10px;}
.pg .sp-r{position:relative;padding:24px 26px;border-radius:var(--r-l);background:var(--canvas);transition:background-color .2s ease,box-shadow .2s ease,transform 140ms var(--ease-out);}
.pg .sp-r::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:3px;border-radius:0 3px 3px 0;background:var(--green-2);opacity:0;transform:scaleY(.4);transition:opacity .2s var(--ease-out),transform .24s var(--ease-out);}
.pg .sp-js .sp-r.on{background:#fff;box-shadow:0 0 0 1px rgba(20,32,27,.06),var(--sh-1);}
.pg .sp-js .sp-r.on::before{opacity:1;transform:none;}
.pg .sp-r h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:-0.02em;}
.pg .sp-r > p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--ink-2);}
.pg .sp-r .in{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:14px;font-size:14px;color:var(--ink);}
.pg .sp-r .in .cap{font-size:12px;line-height:16px;letter-spacing:.05em;text-transform:uppercase;font-weight:500;color:var(--ink-2);}
.pg .sp-r .in span:last-child{font-weight:500;}
.pg .sp-pick{display:none;}
.pg .sp-js .sp-pick{display:block;position:absolute;inset:0;width:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.pg .sp-js .sp-r:not(.on):active{transform:scale(.99);}
@media (hover:hover) and (pointer:fine){.pg .sp-js .sp-r:not(.on):hover{background:rgba(255,255,255,.55);}}
.pg .sp-phl{display:none;}
.pg .sp-stage{padding:32px;border-radius:var(--r-l);background:var(--canvas);}
.pg .sp-win{display:grid;background:#fff;}
.pg .sp-sc{grid-area:1 / 1;display:flex;flex-direction:column;min-width:0;opacity:0;visibility:hidden;}
.pg .sp-sc.on{opacity:1;visibility:visible;}
/* the outgoing screen leaves faster (.14s) than the new one arrives (.24s), so the two never sit on top of each other */
.pg .sp-win.go .sp-sc{transform:translateY(6px);transition:opacity .14s var(--ease-out),transform .14s var(--ease-out),visibility 0s linear .14s;}
.pg .sp-win.go .sp-sc.on{transform:none;transition:opacity .24s var(--ease-out),transform .24s var(--ease-out),visibility 0s linear 0s;}
.pg .sp-win .tb .me{width:28px;height:28px;border-radius:50%;object-fit:cover;padding:0;}
.pg .sp-win .tb .sp-me-od{background:var(--green);border-color:var(--green);}
.pg .sp-me-od svg{width:12px;height:12px;fill:#fff;}
.pg .sp-bd{display:flex;flex-direction:column;gap:14px;padding:22px 24px 24px;}
.pg .sp-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.pg .sp-hdr .h4{margin-top:2px;}
.pg .sp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px;}
/* (a) shortlist */
.pg .sp-cr{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:12px 14px;}
.pg .sp-cr + .sp-cr{border-top:1px solid var(--u-line);}
.pg .sp-cr .avt{width:32px;height:32px;background:#E9E2D6;}
.pg .sp-th2 .av{width:32px;height:32px;}
.pg .sp-cr .t{display:flex;flex-direction:column;min-width:0;}
.pg .sp-fit{display:flex;flex-direction:column;align-items:flex-end;}
.pg .sp-fit b{font-size:17px;line-height:20px;font-weight:600;color:var(--u-teal);}
.pg .sp-cr .nt{grid-column:2 / -1;display:flex;align-items:flex-start;gap:8px;padding:7px 10px;border-radius:8px;background:var(--u-wash);color:var(--u-2);font-size:12px;line-height:18px;}
.pg .sp-cr .nt img{width:18px;height:18px;border-radius:50%;object-fit:cover;flex:0 0 auto;}
.pg .sp-ft{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--u-line);background:var(--u-canvas);border-radius:0 0 7px 7px;}
.pg .sp-sc.pend .sp-cr{opacity:0;transform:translateY(6px);}
.pg .sp-sc.go .sp-cr{transition:opacity .28s var(--ease-out) calc(var(--i,0) * 55ms),transform .28s var(--ease-out) calc(var(--i,0) * 55ms);}
/* (b) WhatsApp thread */
.pg .sp-wa{display:grid;grid-template-columns:minmax(0,1fr) 196px;grid-template-rows:auto 1fr;gap:0;padding:0;}
.pg .sp-th2{grid-column:1;display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--u-line);}
.pg .sp-th2 .t{flex:1;display:flex;flex-direction:column;min-width:0;}
.pg .sp-thr{grid-column:1;display:flex;flex-direction:column;gap:12px;padding:18px;background:var(--u-canvas);}
.pg .sp-sys{align-self:center;padding:2px 10px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--u-line);}
.pg .sp-in2{align-self:flex-start;display:flex;align-items:flex-end;gap:10px;max-width:84%;padding:8px 12px;border-radius:14px 14px 14px 4px;background:#fff;box-shadow:0 0 0 1px var(--u-line);}
.pg .sp-in2 p,.pg .sp-out p{font-size:14px;}
.pg .sp-out{align-self:flex-end;max-width:88%;padding:10px 12px;border-radius:14px 14px 4px 14px;background:var(--u-teal-w);}
.pg .sp-out .by{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:12px;font-weight:500;color:var(--u-teal);}
.pg .sp-out .by .ico{width:13px;height:13px;color:currentColor;}
.pg .sp-out .by .sp-sw{margin-left:auto;padding-left:12px;justify-items:end;}
.pg .sp-out.sp-old{background:#fff;box-shadow:0 0 0 1px var(--u-line);}
.pg .sp-old .by{color:var(--u-2);}
.pg .sp-old .by img{width:16px;height:16px;border-radius:50%;object-fit:cover;}
.pg .sp-old .by .sm{margin-left:auto;padding-left:12px;}
.pg .sp-dec{align-self:flex-end;}
.pg .sp-dec .s0{display:flex;gap:8px;}
.pg .sp-pf{grid-column:2;grid-row:1 / 3;display:flex;flex-direction:column;gap:8px;padding:14px;border-left:1px solid var(--u-line);}
.pg .sp-pf .r{display:flex;flex-direction:column;padding:8px 10px;border-radius:8px;background:var(--u-wash);}
.pg .sp-pf .r.new{background:var(--u-teal-w);}
.pg .sp-pf .r.new .sm{color:var(--u-teal);}
.pg .sp-sc.pend :is(.sp-in2,.sp-out:not(.sp-old),.sp-thr > .sp-dec,.sp-pf .r.new){opacity:0;transform:translateY(6px);}
.pg .sp-sc.go :is(.sp-in2,.sp-out:not(.sp-old),.sp-thr > .sp-dec,.sp-pf .r.new){transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);}
/* (c) Today, a kit to approve */
.pg .sp-me{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 14px;}
.pg .sp-me .av{width:32px;height:32px;}
.pg .sp-me .t{display:flex;flex-direction:column;min-width:0;}
.pg .sp-me .w{color:var(--u-2);}
.pg .sp-q .qh{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--u-line);}
.pg .sp-ex{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:14px;background:#FFFCF7;box-shadow:inset 3px 0 0 var(--u-att-d);}
.pg .sp-q .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--u-wash);}
.pg .sp-ex .ic{background:var(--u-att-w);}
.pg .sp-ex .ic .ico{color:var(--u-att);}
.pg .sp-ex .t{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.pg .sp-trl{display:flex;align-items:center;gap:6px;margin-top:6px;}
.pg .sp-trl .ico{width:13px;height:13px;color:var(--u-3);}
.pg .sp-pr{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--u-teal);font-size:12px;font-weight:500;}
.pg .sp-pr .ico{width:13px;height:13px;color:currentColor;}
.pg .sp-ex .sp-dec{margin-top:12px;align-self:flex-start;}
.pg .sp-q .qr{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--u-line);}
.pg .sp-q .qr .t{display:flex;flex-direction:column;min-width:0;}
.pg .sp-sc.pend .sp-pr{opacity:0;transform:translateY(4px);}
.pg .sp-sc.go .sp-pr{transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);}
/* (d) report builder */
.pg .sp-hdr > .bt{flex:0 0 auto;}
.pg .sp-k3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.pg .sp-k3 > div{display:flex;flex-direction:column;padding:12px 14px;}
.pg .sp-k3 > div + div{border-left:1px solid var(--u-line);}
.pg .sp-k3 b{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-0.01em;}
.pg .sp-ch{padding:14px 16px 12px;}
.pg .sp-ch .chh{display:flex;align-items:center;justify-content:space-between;}
.pg .sp-ch .bars{display:flex;align-items:flex-end;gap:10px;height:88px;margin-top:14px;}
.pg .sp-ch .bars i{flex:1;height:var(--h);border-radius:4px 4px 2px 2px;background:var(--u-teal-b);transform-origin:50% 100%;}
.pg .sp-ch .bars i.last{background:var(--u-teal);}
.pg .sp-ch .bl{display:flex;gap:10px;margin-top:6px;}
.pg .sp-ch .bl span{flex:1;text-align:center;font-size:12px;line-height:16px;color:var(--u-3);}
.pg .sp-cmp{padding:12px 14px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--u-teal-b);}
.pg .sp-cmp .h{display:flex;align-items:center;gap:6px;}
.pg .sp-cmp .h .star{color:var(--u-teal);}
.pg .sp-cmp .h .sm{margin-left:auto;}
.pg .sp-cmp p{margin-top:6px;color:var(--u-2);}
.pg .sp-cmp p b{color:var(--u-ink);}
.pg .sp-cmp .act{display:flex;gap:8px;margin-top:10px;}
.pg .sp-nx{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:10px 14px;border-radius:8px;background:var(--u-wash);}
.pg .sp-nx .sm{margin-left:auto;}
.pg .sp-ch .bars i:nth-child(2){--b:1}.pg .sp-ch .bars i:nth-child(3){--b:2}.pg .sp-ch .bars i:nth-child(4){--b:3}.pg .sp-ch .bars i:nth-child(5){--b:4}.pg .sp-ch .bars i:nth-child(6){--b:5}.pg .sp-ch .bars i:nth-child(7){--b:6}
.pg .sp-sc.pend .sp-ch .bars i{transform:scaleY(.08);}
.pg .sp-sc.pend .sp-cmp{opacity:0;transform:translateY(6px);}
.pg .sp-sc.go .sp-ch .bars i{transition:transform .4s var(--ease-out) calc(var(--b,0) * 40ms);}
.pg .sp-sc.go .sp-cmp{transition:opacity .3s var(--ease-out) .36s,transform .3s var(--ease-out) .36s;}

/* ---------- S4 Inside your workspace ---------- */
.pg .sp-cg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start;}
.pg .sp-ul li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:18px;padding:22px 0;border-top:1px solid var(--line);}
.pg .sp-ul li:last-child{border-bottom:1px solid var(--line);}
.pg .sp-ul .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--tile);color:var(--green);}
.pg .sp-ul .ic .ico{width:18px;height:18px;}
.pg .sp-ul h3{font-size:18px;line-height:1.35;letter-spacing:-0.015em;}
.pg .sp-ul p{margin-top:4px;font-size:15.5px;color:var(--ink-2);}
.pg .sp-cl .lnk{margin-top:20px;}
.pg .sp-cs{padding:40px;}
.pg .sp-cw{width:100%;max-width:600px;display:grid;gap:14px;}
.pg .sp-cw .card{border:0;border-radius:var(--r-m);box-shadow:0 0 0 1px rgba(20,32,27,.06),var(--sh-2);overflow:hidden;}
.pg .sp-so .h,.pg .sp-log .h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:14px 16px 12px;border-bottom:1px solid var(--u-line);}
.pg .sp-so .h > div{display:flex;flex-direction:column;}
.pg .sp-so .h b,.pg .sp-log .h b{font-size:15px;line-height:22px;}
.pg .sp-so .stg{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--u-line);}
.pg .sp-so .stg .t{display:flex;flex-direction:column;}
.pg .sp-so .dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--u-ok-d);}
.pg .sp-so .dot .ico{width:12px;height:12px;color:#fff;stroke-width:2.4;}
.pg .sp-so .dot.att{background:#fff;box-shadow:inset 0 0 0 2px var(--u-att-d);}
.pg .sp-so .prop{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--u-canvas);}
.pg .sp-so .prop .t{display:flex;flex-direction:column;}
.pg .sp-so .prop .av{width:28px;height:28px;}
.pg .sp-so .dec{display:flex;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--u-line);}
.pg .sp-so .dec .s0{display:flex;gap:8px;}
.pg .sp-so .dec .sp-sw{justify-items:end;}
/* both decided statuses end on the same right edge (the stage 2 cell is sized by its longer "to decide" state) */
.pg .sp-so .stg > .sp-sw:last-child{justify-items:end;}
.pg .sp-log .lr{display:grid;grid-template-columns:40px 24px minmax(0,1fr);gap:10px;align-items:center;padding:10px 16px;background:#fff;}
.pg .sp-log .lr + .lr{border-top:1px solid var(--u-line);}
.pg .sp-log .lr .av{width:24px;height:24px;}
.pg .sp-log .lr p{color:var(--u-2);}
.pg .sp-log .lr p b{color:var(--u-ink);}
.pg .sp-log .lr.nw{background:var(--u-teal-w);}
.pg .sp-log .lr.nw .tm{color:var(--u-teal);font-weight:500;}
/* motion: Priya approves stage 2, and the decision lands at the top of the log */
.pg .sp-cw.pend .sp-log .lr.nw{opacity:0;transform:translateY(-6px);}
.pg .sp-cw.pend .sp-log .lr:not(.nw){transform:translateY(calc(var(--rh,45px) * -1));}
.pg .sp-cw.go .sp-log .lr{transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);}

/* ---------- S5 With your agencies (dark band) ---------- */
.pg .sp-who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.pg .sp-c{padding:28px 28px 16px;border-radius:var(--r-l);background:#182621;}
.pg .sp-c.od{background:var(--green-deep,#0C261E);}
.pg .sp-c .lab{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.pg .sp-c h3{font-size:20px;line-height:1.3;letter-spacing:-0.02em;}
.pg .sp-c .mk{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;font-size:15px;font-weight:600;}
.pg .sp-c .mk.br{background:radial-gradient(circle at 35% 30%,#EBCB9F,#C58A5B 75%);color:#3A2414;}
.pg .sp-c .mk.ag{background:#2A3833;color:#DDE6E1;}
.pg .sp-c .mk.od{background:#fff;}
.pg .sp-c .mk.od svg{width:16px;height:16px;fill:var(--green);}
.pg .sp-c li{display:flex;align-items:baseline;gap:12px;padding:13px 0;border-top:1px solid var(--edge-dk);color:var(--on-dark);}
.pg .sp-c li::before{content:"";width:5px;height:5px;border-radius:50%;background:#7FA796;flex:0 0 auto;transform:translateY(-3px);}
.pg .sp-c.od li::before{background:#CFE3D6;}
.pg .sp-agf{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-top:28px;}
.pg .sp-agf p{font-size:15px;color:var(--on-dark-2);}

/* ---------- S6 Launch to handover ---------- */
.pg main .pg-sec.dark + .pg-sec.sp-ho{padding-top:128px;}
.pg .sp-hg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;}
.pg .sp-tlw{grid-column:1 / -1;margin-bottom:48px;padding:40px;border-radius:var(--r-l);background:var(--tile);}
.pg .sp-tl{border:0;border-radius:var(--r-m);background:#fff;box-shadow:0 0 0 1px rgba(20,32,27,.06),var(--sh-2);overflow:hidden;}
.pg .sp-tl .h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:14px 20px 12px;border-bottom:1px solid var(--u-line);}
.pg .sp-tl .h > div{display:flex;flex-direction:column;}
.pg .sp-tl .h b{font-size:15px;line-height:22px;}
.pg .sp-tl .steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:22px 20px 24px;}
.pg .sp-tl .steps li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-right:12px;}
.pg .sp-tl .steps li::before{content:"";position:absolute;left:30px;right:8px;top:10px;height:2px;border-radius:2px;background:#9BCFB3;transform-origin:0 50%;}
.pg .sp-tl .steps li:last-child::before{display:none;}
.pg .sp-tl .dot{position:relative;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--u-ok-d);}
.pg .sp-tl .dot .ico{width:12px;height:12px;color:#fff;stroke-width:2.4;}
.pg .sp-tl .fin .dot{background:var(--u-dark);box-shadow:0 0 0 4px rgba(31,31,31,.1);}
.pg .sp-tl .steps b{font-size:14px;line-height:20px;}
.pg .sp-tl .who{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;}
.pg .sp-tl .who svg{width:11px;height:11px;fill:currentColor;}
.pg .sp-tl .who.od{background:var(--u-teal-w);color:var(--green);}
.pg .sp-tl .who.mix{background:var(--u-wash);color:var(--u-2);padding:0 9px;}
.pg .sp-tl .who.br{background:var(--u-dark);color:#fff;padding-left:3px;}
.pg .sp-tl .who.br img{width:16px;height:16px;border-radius:50%;object-fit:cover;}
.pg .sp-tl.pend .steps li > *{opacity:0;transform:translateY(6px);}
.pg .sp-tl.pend .steps li::before{transform:scaleX(0);}
.pg .sp-tl.go .steps li > *{transition:opacity .3s var(--ease-out) calc(var(--i,0) * 140ms),transform .3s var(--ease-out) calc(var(--i,0) * 140ms);}
.pg .sp-tl.go .steps li::before{transition:transform .32s var(--ease-in-out) calc(var(--i,0) * 140ms + 90ms);}
.pg .sp-hi{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;}
.pg .sp-hi li{padding-top:24px;border-top:1px solid var(--line);}
.pg .sp-hi .n{font-size:14px;line-height:20px;font-weight:500;color:var(--green-2);font-variant-numeric:tabular-nums;}
.pg .sp-hi h3{margin-top:16px;font-size:20px;line-height:1.3;letter-spacing:-0.02em;}
.pg .sp-hi p{margin-top:8px;color:var(--ink-2);}
.pg .sp-after{grid-column:1 / 3;align-self:center;margin-top:48px;font-size:20px;line-height:1.45;letter-spacing:-0.015em;color:var(--ink);max-width:30em;text-wrap:pretty;}
.pg .sp-story{grid-column:1 / -1;justify-self:start;margin-top:40px;}

/* ---------- S7 How to start ---------- */
.pg .sp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.pg .sp-steps li{display:flex;flex-direction:column;gap:40px;padding:28px 28px 32px;border-radius:var(--r-l);background:var(--canvas);}
.pg .sp-steps .n{font-size:14px;line-height:20px;font-weight:500;color:var(--green-2);font-variant-numeric:tabular-nums;}
.pg .sp-steps p{font-size:20px;line-height:1.35;letter-spacing:-0.02em;font-weight:500;color:var(--ink);text-wrap:wrap;max-width:none;}
.pg .sp-st .sp-note{margin-top:20px;}
.pg .sp-ful{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:40px;padding:22px 28px;border-radius:var(--r-m);background:var(--canvas);}
.pg .sp-ful .cap{display:block;font-size:12px;line-height:16px;letter-spacing:.05em;text-transform:uppercase;font-weight:500;color:var(--green-2);}
.pg .sp-ful p{margin-top:4px;color:var(--ink-2);}
.pg .sp-ful p b{color:var(--ink);font-weight:500;}
.pg .sp-ful .lnk{flex:0 0 auto;}

/* ---------- S8 CTA ---------- */
.pg .sp-cta .card > *{position:relative;z-index:1;}
.pg .sp-cta .card > .mark{position:absolute;z-index:0;right:-60px;top:-80px;width:360px;height:auto;opacity:.07;pointer-events:none;}

/* ---------- Medium widths ---------- */
@media (min-width:1100px) and (max-width:1279px){
  .pg .sp-win .tb .nv:not(.on) .l{display:none;}
  .pg .sp-wa{grid-template-columns:minmax(0,1fr) 168px;}
}
@media (min-width:1100px){
  /* S2: the three tiles share row lines, so every "How it ends" hairline sits at one height */
  .pg .sp-wl{grid-template-rows:auto auto 1fr auto;row-gap:0;}
  .pg .sp-w{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;}
  .pg .sp-w .end{margin-top:0;align-self:start;}
  .pg .sp-stage{position:sticky;top:calc(var(--bar) + 24px + env(safe-area-inset-top, 0px));}
}
@media (max-width:1099px){
  .pg .sp-hero-fig{justify-content:flex-start;}
  .pg .sp-wl{grid-template-columns:1fr;}
  .pg .sp-w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);grid-template-areas:"n end" "h end" "p end";column-gap:40px;align-content:start;}
  .pg .sp-w .n{grid-area:n;}
  .pg .sp-w h3{grid-area:h;margin-top:14px;}
  .pg .sp-w > p{grid-area:p;margin-bottom:0;}
  .pg .sp-w .end{grid-area:end;align-self:end;margin-top:0;}
  .pg .sp-rg{grid-template-columns:1fr;}
  .pg .sp-rl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .pg .sp-stage{padding:28px;}
  .pg .sp-cg{grid-template-columns:1fr;gap:40px;}
  .pg .sp-cs{padding:28px;}
  .pg .sp-tlw{padding:28px;}
  .pg .sp-hi{grid-template-columns:1fr;gap:0;}
  .pg .sp-hi li{display:grid;grid-template-columns:48px minmax(0,1fr);padding:22px 0;}
  .pg .sp-hi .n{grid-row:span 2;padding-top:3px;}
  .pg .sp-hi h3{margin-top:0;}
  .pg .sp-after{grid-column:1 / -1;margin-top:24px;}
  .pg .sp-story{grid-column:1 / -1;margin-top:24px;}
  .pg .sp-steps p{font-size:18px;}
}

/* ---------- Tablets ---------- */
/* S4: the four rows in two columns, so the section is not the tallest on the page at 768 */
@media (min-width:760px) and (max-width:1099px){
  .pg .sp-ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;}
  .pg .sp-ul li:nth-last-child(2){border-bottom:1px solid var(--line);}
}

/* ---------- Phones ---------- */
@media (max-width:759px){
  .pg .sp-hide-sm{display:none;}
  /* hero: the team list at full width, "Working on" under each name, Access hidden */
  .pg .sp-th{padding:12px 14px 10px;}
  .pg .sp-cols,.pg .sp-m .sp-acc{display:none;}
  .pg .sp-m{grid-template-columns:32px minmax(0,1fr);grid-template-areas:"av t" "av w";row-gap:2px;column-gap:12px;padding:10px 14px;}
  .pg .sp-m .av{grid-area:av;align-self:start;margin-top:2px;}
  .pg .sp-m .t{grid-area:t;}
  .pg .sp-m .w{grid-area:w;font-size:12px;line-height:16px;color:var(--u-2);}
  .pg .sp-act{padding:10px 14px 12px;}
  .pg .sp-a{grid-template-columns:24px minmax(0,1fr);}
  .pg .sp-a > .sm{display:none;}
  /* three ways: stacked, How it ends stays on each card */
  .pg .sp-wl{gap:10px;}
  .pg .sp-w{display:flex;padding:20px 18px 18px;border-radius:var(--r-m);}
  .pg :is(.sp-w,.sp-r,.sp-steps li,.sp-hi li,.sp-ul li,.sp-story) p{text-wrap:wrap;}
  .pg .sp-phl{display:block;margin:0 0 10px;font-size:13px;line-height:20px;color:var(--ink-2);}
  .pg .sp-w h3{margin-top:10px;}
  .pg .sp-w > p{margin:6px 0 16px;font-size:15.5px;}
  .pg .sp-w .end{padding-top:14px;}
  .pg .sp-w .end p{margin-top:6px;}
  /* roles: a sideways row of four cards; one screen (the WhatsApp thread) beneath */
  .pg .sp-rl{display:flex;flex-direction:row;gap:10px;}
  .pg .sp-who{display:flex;gap:10px;margin-top:28px;}
  .pg .pg-sec.dark .pg-count{color:var(--on-dark-2);}
  .pg .sp-r{padding:22px 20px;border-radius:var(--r-m);background:#fff;box-shadow:0 0 0 1px rgba(20,32,27,.06);}
  .pg .sp-r::before,.pg .sp-js .sp-pick{display:none;}
  .pg .sp-js .sp-r.on{box-shadow:0 0 0 1px rgba(20,32,27,.06);}
  .pg .sp-stage{margin-top:20px;padding:0;background:none;border-radius:0;}
  .pg .sp-sc{display:none;}
  .pg .sp-sc.on{display:flex;}
  .pg .sp-win.go .sp-sc.on{transition:opacity .24s var(--ease-out),visibility 0s linear 0s;transform:none;}
  .pg .sp-win .tb{padding:0 10px;}
  .pg .sp-win .tb .nv{padding:0 8px;}
  .pg .sp-win .tb .nv:not(.on) .l{display:none;}
  .pg .sp-wa{grid-template-columns:1fr;}
  .pg .sp-pf{display:none;}
  /* the other three screens, now that the row picks them on phones: header stacked, compact figures */
  .pg .sp-bd{padding:16px 14px 18px;}
  .pg .sp-hdr{flex-direction:column;gap:10px;}
  .pg .sp-hdr .sp-meta .tag + .tag{margin-right:4px;}
  .pg .sp-me{grid-template-columns:32px minmax(0,1fr) auto;}
  .pg .sp-me .w{display:none;}
  .pg .sp-k3 > div{padding:10px;}
  .pg .sp-k3 .cap{font-size:10px;letter-spacing:.04em;}
  .pg .sp-k3 b{font-size:18px;line-height:26px;}
  .pg .sp-nx .sm{margin-left:0;}
  .pg .sp-thr{padding:14px;}
  .pg .sp-th2{padding:12px 14px;}
  .pg .sp-out{max-width:94%;}
  /* workspace: four short rows; the audit log with three rows, no sign-off panel */
  .pg .sp-ul li{grid-template-columns:32px minmax(0,1fr);gap:14px;padding:18px 0;}
  .pg .sp-ul .ic{width:32px;height:32px;border-radius:8px;}
  .pg .sp-ul .ic .ico{width:16px;height:16px;}
  .pg .sp-ul h3{font-size:17px;}
  .pg .sp-ul p{font-size:15px;}
  .pg .sp-cg{gap:28px;}
  .pg .sp-cs{padding:0;}
  .pg .sp-so,.pg .sp-log .lr.sp-x{display:none;}
  .pg .sp-log .lr{grid-template-columns:36px 24px minmax(0,1fr);padding:10px 14px;}
  /* agencies: a sideways row */
  .pg .sp-c{padding:22px 20px 10px;border-radius:var(--r-m);}
  .pg .sp-agf{flex-direction:column;align-items:flex-start;gap:4px;margin-top:20px;}
  /* handover: items, the after-handover line, the story, then the timeline as a vertical list */
  .pg main .pg-sec.dark + .pg-sec.sp-ho{padding-top:64px;}
  .pg .sp-hg{display:flex;flex-direction:column;}
  .pg .sp-hi li{grid-template-columns:36px minmax(0,1fr);padding:18px 0;}
  .pg .sp-hi h3{font-size:18px;}
  .pg .sp-hi p{font-size:15px;margin-top:4px;}
  .pg .sp-after{margin-top:12px;padding-top:18px;border-top:1px solid var(--line);font-size:16px;}
  .pg .sp-story{margin-top:16px;}
  .pg .sp-after,.pg .sp-story{align-self:stretch;}
  .pg .sp-tlw{order:9;margin:24px 0 0;padding:0;background:none;border-radius:0;}
  .pg .sp-tl .h{padding:12px 14px 10px;}
  .pg .sp-tl .steps{grid-template-columns:1fr;padding:6px 14px 8px;}
  .pg .sp-tl .steps li{flex-direction:row;align-items:center;gap:12px;padding:10px 0;}
  .pg .sp-tl .steps li::before{left:10px;right:auto;top:calc(50% + 15px);width:2px;height:calc(100% - 30px);transform-origin:50% 0;}
  .pg .sp-tl .steps b{flex:1;}
  .pg .sp-tl.pend .steps li::before{transform:scaleY(0);}
  /* how to start */
  .pg .sp-steps{grid-template-columns:1fr;gap:10px;}
  .pg .sp-steps li{flex-direction:row;align-items:baseline;gap:16px;padding:18px 20px;border-radius:var(--r-m);}
  .pg .sp-steps p{font-size:17px;}
  .pg .sp-ful{flex-direction:column;align-items:flex-start;gap:8px;margin-top:28px;padding:20px;}
  /* CTA */
  .pg .sp-cta .acts{flex-direction:column;align-items:flex-start;gap:8px;}
  .pg .sp-cta .card > .mark{width:240px;right:-70px;top:-60px;}
}
.pg .sp-sc > .sp-bd{flex:1 1 auto;}