/* the family's pages in the old website (owner 2026-11-03): light mode is clean and simple - flat colours, no
   gradients; the "who joins whom" grid in one colour. Dark mode is unchanged. */
:root:not([data-theme=dark]) .hero:is(.day,.dusk,.night){background:#fff!important}
:root:not([data-theme=dark]) :is(.s,.soft,.sec-in,.ab-hero,.ih,.pgrp,.tg-days,.pk3,.byp2,.tg-pick,.tg-all,.ba4s,.bss,.band-blue,.jband){background:#fff!important;background-image:none!important}
:root:not([data-theme=dark]) .pgrp+.pgrp{border-top:1px solid #e7ebf3}
:root:not([data-theme=dark]) :is(.gpic,.g6x .gpic,.ltown .gpic,.stp3-pic,.hlx-stage,.tg-res,.pk-res,.stc-c .stc-cv){background:#f5f7fb!important;background-image:none!important}
:root:not([data-theme=dark]) :is(.pgrp .gpic.pgrp-pic,.pr-hero .gpic.pr-town){background:none!important}
:root:not([data-theme=dark]) .cta2{background:#1f4fd6!important;background-image:none!important}
:root:not([data-theme=dark]) .cta2::before{display:none}
:root:not([data-theme=dark]) :is(.gi,.app,.pchips a i,.pc-with a i,.byc-i,.tg-ps i,.gj-i i,.st-how b,.jm-dot){background-image:none!important}
:root:not([data-theme=dark]) :is(.gi,.app){background:var(--c,#2f63e6)!important;box-shadow:none!important}
:root:not([data-theme=dark]) .gjump3 a::before,:root:not([data-theme=dark]) .stp3-bar,:root:not([data-theme=dark]) .aw3s .bar{background:#2f63e6!important}
:root:not([data-theme=dark]) h1 em,:root:not([data-theme=dark]) .hc h1 em{background:none!important;-webkit-text-fill-color:#2563eb!important;color:#2563eb!important}
:root:not([data-theme=dark]) .pk-pts li::before{background:none!important;-webkit-text-fill-color:#2563eb;color:#2563eb}
:root:not([data-theme=dark]) .w4-now,:root:not([data-theme=dark]) .bs-now{background:#1f4fd6!important}
:root:not([data-theme=dark]) .sky2{display:none}
/* who joins whom: one quiet colour, both themes */
.jm-dot{background:#3778f5!important;box-shadow:none!important;width:14px;height:14px}
.jm-dot:hover,.jm-dot:focus-visible{background:#1d4fd8!important}
[data-theme=dark] .jm-dot{background:#7aa8ff!important}
:root:not([data-theme=dark]) .nav.nav-fix.stuck{background:rgba(255,255,255,.72)!important;backdrop-filter:saturate(1.8) blur(22px)!important;-webkit-backdrop-filter:saturate(1.8) blur(22px)!important;box-shadow:0 1px 0 #e7ebf3,0 10px 30px rgba(15,25,50,.06)!important}
/* pick two, calmer: a normal-sized sentence, plain white pickers */
.pk-say{font-size:clamp(18px,1.9vw,24px)!important;gap:10px 12px}
.pk-pick{padding:6px 10px!important;border-radius:14px!important;border-width:1px!important;box-shadow:none!important}
.pk-pick .pk-ic{width:30px!important;height:30px!important}
.pk-pick .pk-ic svg,.pk-pick .pk-ic img{width:30px;height:30px}
.pk-pick select{font-size:17px!important}
/* the day's steps (owner 2026-11-03: "don't cramp things"): three to a row, room to read */
.tg-steps{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
.tg-steps li{padding:22px 24px!important}
.tg-steps li:nth-child(3n)::after,.tg-steps li:last-child::after{display:none!important}
.tg-steps b{font-size:17px!important}.tg-steps p{font-size:15px!important;line-height:1.55!important}
@media (max-width:900px){.tg-steps{grid-template-columns:1fr!important}}
/* about: six titled principles, three to a row */
.prin6{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.prin6 .rc h3{margin:12px 0 6px;font:700 18px/1.3 Sora,Inter,sans-serif;color:var(--ink)}
.prin6 .rc p{margin:0;color:var(--ink2);font-size:15px;line-height:1.6}
.ab-sec{margin:18px 0 0;font-weight:600}
@media (max-width:900px){.prin6{grid-template-columns:1fr!important}}
/* about: three above, two wider below - no empty slot */
.prin6{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.prin6 .rc{grid-column:span 2}.prin6 .rc:nth-child(4),.prin6 .rc:nth-child(5){grid-column:span 3}
.prin6 .ic-app svg{width:52px;height:52px}
@media (max-width:900px){.prin6{grid-template-columns:1fr!important}.prin6 .rc{grid-column:auto!important}}
/* about, round 3 (owner 2026-11-03 "still ugly"): the numbers as an open band, the principles as a calm list beside
   their heading - no boxes */
.v2 .nums4,.nums4{border:0!important;box-shadow:none!important;background:none!important;border-top:1px solid var(--ln)!important;border-bottom:1px solid var(--ln)!important;border-radius:0!important;padding:8px 0!important;margin-bottom:72px}
.nums4 .sb{border:0!important;padding:28px 8px!important}
.nums4 .sb b{font:800 54px/1 Sora,Inter,sans-serif!important;letter-spacing:-.04em;color:var(--ink)!important;-webkit-text-fill-color:currentColor}
.nums4 .sb span{display:block;margin-top:10px;font-size:15px;color:var(--ink2)}
.ab2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.ab2-h{position:sticky;top:110px}
.ab2-h h2{margin:10px 0 18px;font:800 clamp(28px,3vw,38px)/1.15 Sora,Inter,sans-serif;letter-spacing:-.03em;color:var(--ink)}
.ab2-sec{font-weight:600}
.ab2-l{list-style:none;margin:0;padding:0}
.ab2-l li{display:grid;grid-template-columns:56px 1fr;gap:22px;padding:26px 0;border-top:1px solid var(--ln)}
.ab2-l li:first-child{border-top:0;padding-top:4px}
.ab2-ic svg{width:52px;height:52px;overflow:visible}
.ab2-l h3{margin:2px 0 8px;font:700 20px/1.3 Sora,Inter,sans-serif;letter-spacing:-.015em;color:var(--ink)}
.ab2-l p{margin:0;color:var(--ink2);font-size:16px;line-height:1.65;max-width:620px}
@media (max-width:900px){.ab2{grid-template-columns:1fr;gap:24px}.ab2-h{position:static}.nums4 .sb b{font-size:40px!important}}
/* line-art icons in the town's style (About, Security) */
.lic{width:48px!important;height:48px!important;display:block;color:#2f63e6;--lic-fill:rgba(55,120,245,.07)}
[data-theme=dark] .lic{color:#9db8ff;--lic-fill:rgba(255,255,255,.04)}
/* apps: one card per role, two to a row, no phone (owner 2026-11-03) */
.ap4s{padding:64px 0 32px}
.ap4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ap4c{display:flex;flex-direction:column;gap:16px;padding:26px 28px;border-radius:22px;background:var(--sf);border:1px solid var(--ln);box-shadow:var(--card);transition:transform .25s,box-shadow .25s}
.ap4c:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(15,25,50,.08)}
.ap4c header{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--ln)}
.ap4-n{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#2f63e6;color:#fff;font:700 13px "IBM Plex Mono",monospace}
.ap4c h3{margin:0;font:700 19px/1.25 Sora,Inter,sans-serif;letter-spacing:-.015em;color:var(--ink)}
.ap4c small{display:block;margin-top:3px;font:600 10.5px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.ap4c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ap4c li{display:flex;gap:11px;align-items:flex-start;color:var(--ink2);font-size:15px;line-height:1.5}
.ap4c li i{flex:none;width:22px;height:22px;border-radius:99px;display:grid;place-items:center;background:color-mix(in srgb,#2f63e6 12%,transparent);color:#2f63e6;margin-top:1px}
[data-theme=dark] .ap4c li i{color:#9db8ff}
@media (max-width:820px){.ap4{grid-template-columns:1fr}}
/* who it's for (owner 2026-11-03 "needs a lot of improvement") */
.seg-c{justify-content:center;margin:0 auto 26px;display:flex;flex-wrap:wrap;gap:6px}
.mg2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:26px}
.mg2c{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:22px;background:var(--sf);border:1px solid var(--ln);box-shadow:var(--card);color:inherit;transition:transform .25s,box-shadow .25s}
a.mg2c:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(15,25,50,.08);text-decoration:none}
.mg2c b{font:700 18px/1.3 Sora,Inter,sans-serif;color:var(--ink)}
.mg2d{color:var(--ink2);font-size:14.5px;line-height:1.55}
.hs-go2{margin-top:auto;padding-top:6px;font-weight:600;font-size:14px;color:#2f63e6}
.hs-go2 i{font-style:normal;display:inline-block;transition:transform .2s}a.mg2c:hover .hs-go2 i{transform:translateX(4px)}
[data-theme=dark] .hs-go2{color:#9db8ff}
/* apps role cards, round 2: all four side by side, a tinted head with a line icon, rows with hairlines */
.ap4{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
.ap4c{padding:0!important;overflow:hidden;gap:0!important}
.ap4c header{display:block!important;padding:22px 22px 18px!important;background:#f4f7fd;border-bottom:1px solid var(--ln)!important;position:relative}
[data-theme=dark] .ap4c header{background:rgba(255,255,255,.03)}
.ap4-ic .lic{width:40px!important;height:40px!important;margin-bottom:12px}
.ap4-n2{position:absolute;right:20px;top:22px;font:600 11px "IBM Plex Mono",monospace;color:var(--mut)}
.ap4c h3{font-size:18px!important}
.ap4c ul{gap:0!important;padding:6px 22px 8px}
.ap4c li{padding:10px 0;border-top:1px solid var(--ln);font-size:14.5px!important}
.ap4c li:first-child{border-top:0}
.ap4c .ap4-f{margin-top:auto;padding:12px 22px 16px;font:600 10.5px "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);border-top:1px dashed var(--ln)}
@media (max-width:1100px){.ap4{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:640px){.ap4{grid-template-columns:1fr!important}}
.mg2{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important}
/* Apps role cards: 3 across when 3, 5, 6 or 9 cards, so no row is left with one or two (HRMS has 6) */
@media (min-width:1100px){.ap4.ap4-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:900px){.secg3 .rc:last-child{grid-column:auto!important}}
/* product Apps / Security: the heading starts where Features, Plans and the store start (owner 2026-11-03) */
.k-product.pg-inner main>.ab-hero{padding-top:152px!important}
/* readability (2026-11-04): the Apps role cards' sub-line a shade darker */
.ap4c header small{color:#56627f}
html[data-theme=dark] .ap4c header small{color:#b9c4e4}
:is(a,button,summary,select,input,textarea,[tabindex]):focus-visible{outline:2.5px solid #2f63e6!important;outline-offset:3px!important;border-radius:8px}
html[data-theme=dark] :is(a,button,summary,select,input,textarea,[tabindex]):focus-visible{outline-color:#9fb8ff!important}