/* light / dark (owner 2026-11-03): the button, and the few things the generated light.css cannot know */
.mode{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;cursor:pointer;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;margin-right:6px;flex:none}
.mode .m-sun{display:none}
html[data-theme=dark] .mode .m-moon{display:none}html[data-theme=dark] .mode .m-sun{display:block}
html[data-theme=light] .mode{border-color:#dfe4ee;background:#fff;color:#0f1932}
html[data-theme=light] body{background:#fff}
/* light: the hero's last line in one solid blue (no gradient), its paragraph in plain ink */
html[data-theme=light] [data-hero] .c18{background:none;-webkit-text-fill-color:#2563eb;color:#2563eb}
html[data-theme=light] [data-hero][data-sky-now] .c19,html[data-theme=light] [data-hero] .c19{color:#3d4a66}
/* light: the blue app panel keeps white words (its phone stays white with dark words) */
html[data-theme=light] .c32{background:#2f6be6}
html[data-theme=light] .c32 .c33{color:rgba(255,255,255,.8)}
html[data-theme=light] .c32 .c34,html[data-theme=light] .c32 .c35{color:#fff}
html[data-theme=light] .c36{box-shadow:0 0 0 7px #1b3aa8;color:#0f1932}
/* the white logo image is for dark; light shows the same word mark as text (never a recoloured image) */
.lg-txt{display:none}
html[data-theme=light] .lg-img{display:none}
html[data-theme=light] .lg-txt{display:inline-flex;color:#0f1932}
.lg-nm{font-weight:400;margin-left:6px}
/* the closing card in the new site's blue (owner 2026-11-03: "I like the blue we had in the new website, colour only") */
.c80{background:none!important;padding:0!important}
.c81{background:linear-gradient(120deg,#1b3aa8,#3778f5 55%,#6a46d8)!important;box-shadow:0 30px 60px -24px rgba(27,58,168,.45)}
html[data-theme=light] .c81{background:#2f63e6!important}
.c81 .c82{color:#fff!important}.c81 .c83{color:rgba(255,255,255,.88)!important}
.c81 .c85{background:#fff!important;color:#1b3aa8!important}
.c81 .c86{color:#fff!important;border-color:rgba(255,255,255,.45)!important;background:transparent!important}
/* a day across the family (owner 2026-11-03 "fix the bugs"): every step readable, one dot style - pale ahead, blue
   done, blue with a ring now */
.st{opacity:1!important}
.st .st-dot{background:rgba(55,120,245,.18)!important;color:#7f9cff!important;box-shadow:none!important;transform:none!important}
.st.done .st-dot{background:#3778f5!important;color:#fff!important}
.st.on .st-dot{background:#3778f5!important;color:#fff!important;box-shadow:0 0 0 6px rgba(55,120,245,.22)!important;transform:scale(1.08)!important}
html[data-theme=light] .st .st-dot{background:#e8eefc!important;color:#2f63e6!important}
html[data-theme=light] .st.done .st-dot,html[data-theme=light] .st.on .st-dot{background:#2f63e6!important;color:#fff!important}
html[data-theme=light] .st-fill{background:#2f63e6!important}
/* dark mode: the rules / good-to-know section is dark like the rest (it was drawn white) */
html[data-theme=dark] .c58{background:#0b1638;color:#eef3ff}
html[data-theme=dark] .c58 .c64,html[data-theme=dark] .c58 .c67{color:#b3c0d3}
html[data-theme=dark] .c65{background:#0f1f47}
html[data-theme=dark] .c69{border-top-color:rgba(255,255,255,.09)}
html[data-theme=dark] .c58 .h4:hover{background:rgba(255,255,255,.05);box-shadow:none}
/* products page: each card in its product's own colour (owner 2026-11-03 "cards are not colourful") */
.gcard .gc-scene{background:color-mix(in srgb,var(--c,#3778f5) 14%,#fff)!important;border-bottom:3px solid var(--c,#3778f5)}
html[data-theme=dark] .gcard .gc-scene{background:color-mix(in srgb,var(--c,#3778f5) 22%,#0b1638)!important}
.gcard:hover{border-color:color-mix(in srgb,var(--c,#3778f5) 50%,transparent)!important}
html[data-theme=light] .gcard:hover{background:#fff!important}
.gcard .gc-scene svg{filter:none}
/* light mode: the product hero scenes as blue line art on pale fills (owner 2026-11-03), like the town drawings */
html[data-theme=light] [data-hero] svg [stroke^="rgba(232,238,255,.38"]{stroke:rgba(47,99,230,.45)}
html[data-theme=light] [data-hero] svg [stroke^="rgba(232,238,255,.8"],html[data-theme=light] [data-hero] svg [stroke="#e6ebf7"]{stroke:#2f63e6}
html[data-theme=light] [data-hero] svg [fill="#2347ae"]{fill:#f2f6fe;stroke:#2f63e6;stroke-width:1.6}
html[data-theme=light] [data-hero] svg circle[fill="#2347ae"]{fill:#e3ecfd}
html[data-theme=light] [data-hero] svg [fill^="rgba(127,156,255"]{fill:rgba(55,120,245,.1)}
html[data-theme=light] [data-hero] svg text[fill^="rgba(232,238,255"],html[data-theme=light] [data-hero] svg text[fill="#e6ebf7"]{fill:#2f63e6}
html[data-theme=light] [data-hero] svg [fill="#c9d6ff"]{fill:#dbe6fd}
html[data-theme=light] [data-hero] svg path[stroke^="rgba(232,238,255,.38"]{stroke:rgba(47,99,230,.22)}
html[data-theme=light] body,html[data-theme=light] main,html[data-theme=light] [data-hero],html[data-theme=light] .c1,html[data-theme=light] .c24{background:#fff!important}
/* home highlights: across the whole row, cards in a grid (it sat in one narrow column) */
.c24>.hm-sp,.hm-sp{grid-column:1/-1!important;width:100%}
.hm-sp .fx-band-in{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px}
@media (max-width:980px){.hm-sp .fx-band-in{grid-template-columns:1fr 1fr!important}}
@media (max-width:600px){.hm-sp .fx-band-in{grid-template-columns:1fr!important}}
html[data-theme=light] .c58,html[data-theme=light] .v2-foot footer,html[data-theme=light] .v2-foot{background:#fff!important}
/* highlights panel in the closing card's blue (owner 2026-11-03), white cards inside */
.hm-sp.fx-band{background:linear-gradient(120deg,#1b3aa8,#3778f5 55%,#6a46d8)!important;border:0!important;box-shadow:0 30px 60px -28px rgba(27,58,168,.45)}
html[data-theme=light] .hm-sp.fx-band{background:#2f63e6!important}
.hm-sp .fx-band-h{color:#fff!important}
.hm-sp .fx-sp{background:#fff!important;border:0!important;color:#0f1932!important;transition:transform .25s,box-shadow .25s}
.hm-sp .fx-sp .ft-n{color:#0f1932!important}.hm-sp .fx-sp .ft-d{color:#4c5a72!important}
.hm-sp .fx-sp:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,20,70,.25)}
/* the rule items ("Each sees their own"...): a visible hover - lift, soft panel, shadow */
.c63{cursor:default}
html[data-theme=light] .c63:hover,html[data-theme=light] .h4.c63:hover{background:#f4f7fd!important;box-shadow:0 12px 28px rgba(15,25,50,.08)!important;transform:translateY(-3px)}
html[data-theme=dark] .c63:hover{background:rgba(255,255,255,.05)!important;box-shadow:0 12px 28px rgba(0,0,0,.3)!important;transform:translateY(-3px)}
/* features page (owner 2026-11-03): the highlights panel lines up with the page and wears the blue; the areas get
   room, a count pill and cards that lift */
.pg>.fx-band{max-width:1152px!important;margin:0 auto 40px!important;padding:30px 32px!important;border-radius:26px!important}
.pg>.c107{gap:48px}
.c112.fx-area{padding:34px 34px 30px!important;border-radius:26px!important}
html[data-theme=light] .c112.fx-area{background:#fff!important;border:1px solid #e6eaf2!important;box-shadow:0 1px 2px rgba(15,25,50,.04)}
.c116{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.c117{margin:0!important}
.fx-cnt{padding:4px 10px;border-radius:99px;background:rgba(55,120,245,.12);letter-spacing:.06em!important}
.c119{gap:12px!important}
.c120.fx-it{padding:16px 18px!important;border-radius:16px!important;transition:transform .2s,box-shadow .2s,border-color .2s}
html[data-theme=light] .c120.fx-it{background:#f7f9fd!important;border:1px solid #e9edf5!important}
.c120.fx-it:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,25,50,.08);border-color:rgba(55,120,245,.35)!important;text-decoration:none}
html[data-theme=light] .c120.fx-it:hover{background:#fff!important}
html[data-theme=dark] .c120.fx-it:hover{box-shadow:0 12px 26px rgba(0,0,0,.35)}
.c120.fx-it .ft-n{font-weight:700}
.c108 .toc{padding-top:8px!important;padding-bottom:8px!important}
.fx-area .c114,.fx-area .c116{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:14px}.fx-area .fx-cnt{margin:0!important;align-self:center}
/* highlights panels: aligned with the page, and the last row stretches so there is no empty slot */
.c24>.hm-sp{margin:32px 0 0!important;max-width:none!important}
.hm-sp .fx-band-in{display:flex!important;flex-wrap:wrap;gap:12px}
.hm-sp .fx-band-in>.fx-sp{flex:1 1 calc(25% - 12px);min-width:220px}
.fx-sel .ss-pop{right:0;left:auto}
/* weather on the light skies */
.wx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
[data-hero],.v2 .hero{isolation:isolate}
.wx-cl{position:absolute;left:var(--x);top:var(--y);width:150px;height:46px;border-radius:40px;background:#fff;border:1.6px solid rgba(47,99,230,.28);opacity:.9;animation:wxdrift 60s linear infinite;animation-delay:var(--d)}
.wx-cl::before,.wx-cl::after{content:"";position:absolute;background:#fff;border:1.6px solid rgba(47,99,230,.28);border-bottom:0;border-radius:50% 50% 0 0}
.wx-cl::before{width:62px;height:40px;left:24px;top:-24px}.wx-cl::after{width:46px;height:30px;left:74px;top:-16px}
.wx-rain .wx-cl{background:#eef2f8;border-color:rgba(60,80,120,.3)}.wx-rain .wx-cl::before,.wx-rain .wx-cl::after{background:#eef2f8;border-color:rgba(60,80,120,.3)}
.wx b{position:absolute;top:-10%;left:var(--x);width:1.4px;height:22px;background:linear-gradient(transparent,rgba(47,99,230,.45));animation:wxrain var(--t) linear infinite;animation-delay:var(--d)}
@keyframes wxrain{to{transform:translate(-14px,120vh)}}
@keyframes wxdrift{from{transform:translateX(-30vw)}to{transform:translateX(40vw)}}
html[data-theme=light] .wx-cloudy [id=psun],html[data-theme=light] .wx-rain [id=psun],html[data-theme=light] .wx-cloudy #sun,html[data-theme=light] .wx-rain #sun{opacity:.25}
/* highlights cards (owner 2026-11-03: "the white is too bright"): frosted on the blue, like the place tiles */
.hm-sp .fx-sp{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.22)!important}
.hm-sp .fx-sp .ft-n{color:#fff!important}.hm-sp .fx-sp .ft-d{color:rgba(255,255,255,.82)!important}
.hm-sp .fx-sp:hover{background:rgba(255,255,255,.2)!important;box-shadow:0 14px 30px rgba(10,20,70,.25)}
/* cloud or rain: the sun fades behind it */
.wx-rain svg [stroke="#ffd36b"],.wx-rain svg [fill="#ffd36b"],.wx-rain svg [fill^="rgba(255,211,107"],.wx-cloudy svg [stroke="#ffd36b"],.wx-cloudy svg [fill="#ffd36b"],.wx-cloudy svg [fill^="rgba(255,211,107"]{opacity:.18;transition:opacity 1s}
.wx-rain .sun,.wx-cloudy .sun{opacity:.2!important}
/* highlights, round 3: a head row with a line and a link; numbered cards of even height with "How it works" */
.hm-sp.fx-band{padding:34px 36px 36px!important}
.hs-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.hs-head .fx-band-h{font-size:26px!important}
.hs-sub{color:rgba(255,255,255,.78);font-size:15px}
.hs-all{margin-left:auto;color:#fff!important;font-weight:600;font-size:14.5px;opacity:.9}.hs-all:hover{opacity:1;text-decoration:none}
.hm-sp .fx-sp{display:flex!important;flex-direction:column;gap:8px!important;padding:20px 20px 18px!important;border-radius:18px!important;min-height:178px}
.hs-n{font:600 11px "IBM Plex Mono",monospace;letter-spacing:.12em;color:rgba(255,255,255,.6)}
.hm-sp .fx-sp .ft-n{font-size:16px!important;line-height:1.3}
.hm-sp .fx-sp .ft-d{font-size:13.5px!important;line-height:1.5}
.hs-go{margin-top:auto;padding-top:6px;font-weight:600;font-size:13px;color:#fff;opacity:.75;transition:opacity .2s}
.hs-go i{font-style:normal;display:inline-block;transition:transform .2s}
.hm-sp .fx-sp:hover .hs-go{opacity:1}.hm-sp .fx-sp:hover .hs-go i{transform:translateX(4px)}
/* the header lives inside the hero (.c1 isolates its own layers): lift the hero's layer so the fixed header stays
   above everything that scrolls under it (owner 2026-11-03: step dots showed over the menu) */
.pg>.c1{position:relative;z-index:60}
/* highlights readability */
.hm-sp .fx-sp{background:rgba(10,30,120,.22)!important;border-color:rgba(255,255,255,.18)!important}
.hm-sp .fx-sp:hover{background:rgba(10,30,120,.32)!important}
.hm-sp .fx-sp .ft-n{font-size:16.5px!important;font-weight:700!important}
.hm-sp .fx-sp .ft-d{color:rgba(255,255,255,.93)!important;font-size:14.5px!important;line-height:1.55!important}
.hs-n{color:rgba(255,255,255,.75)!important}.hs-go{opacity:.95!important}.hs-sub{color:rgba(255,255,255,.9)!important}
/* features: "On this page" readable - dark words, the current area in a blue pill */
html[data-theme=light] .c108 .toc{color:#3d4a66!important;font-size:15px}
html[data-theme=light] .c108 .toc .c110{color:#8a94a8!important}
.c108 .toc{border-radius:10px;margin-left:-1px;padding-left:12px!important;padding-right:10px!important;transition:background .2s,color .2s}
.c108 .toc:hover{text-decoration:none}
html[data-theme=light] .c108 .toc:hover{background:#f2f5fb;color:#0f1932!important}
html[data-theme=light] .c108 .toc.on{background:#eaf1ff;color:#1d4fd8!important;font-weight:600}
html[data-theme=light] .c108 .toc.on .c110{color:#1d4fd8!important}
html[data-theme=dark] .c108 .toc{color:#c6d2ea!important}html[data-theme=dark] .c108 .toc.on{background:rgba(55,120,245,.18);color:#fff!important}
/* feature cards: even, calmer text - full lines instead of ragged ones, a little larger, an arrow on hover */
.c120.fx-it .ft-d{text-wrap:pretty!important;font-size:14.5px!important;line-height:1.6!important;max-width:none!important}
html[data-theme=light] .c120.fx-it .ft-d{color:#3d4a66!important}
.c120.fx-it .ft-n{font-size:15.5px!important;margin-bottom:4px}
.c120.fx-it{position:relative;padding:18px 20px 18px!important}
.c120.fx-it::after{content:"→";position:absolute;right:16px;top:16px;color:#2f63e6;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
.c120.fx-it:hover::after{opacity:1;transform:none}
.c120.fx-it .ft-n{padding-right:20px}
/* who it's for (old design, improved): questions as an open list that folds, other audiences, one call to action */
.pg>.wq{max-width:1152px;margin:0 auto;padding:56px 0 0}
.wq-h{font:700 26px/1.2 Sora,Inter,sans-serif;letter-spacing:-.02em;margin:0 0 18px}
.wq-l{border-top:1px solid rgba(127,156,255,.2)}
.wq-i{border-bottom:1px solid rgba(127,156,255,.2)}
.wq-i summary{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 4px;cursor:pointer;list-style:none;font:600 18px/1.35 Sora,Inter,sans-serif}
.wq-i summary::-webkit-details-marker{display:none}
.wq-i summary i{flex:none;width:28px;height:28px;border-radius:99px;border:1px solid rgba(127,156,255,.4);position:relative}
.wq-i summary i::before,.wq-i summary i::after{content:"";position:absolute;left:8px;right:8px;top:13px;height:1.6px;background:currentColor}
.wq-i summary i::after{transform:rotate(90deg);transition:transform .2s}.wq-i[open] summary i::after{transform:rotate(0)}
.wq-i p{margin:0 4px 22px;max-width:760px;font-size:16px;line-height:1.65;opacity:.85}
.wo-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.wo-l a{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:16px;border:1px solid rgba(127,156,255,.22);color:inherit;transition:transform .2s,border-color .2s}
.wo-l a:hover{transform:translateY(-2px);border-color:rgba(55,120,245,.6);text-decoration:none}
.wo-l b{font:700 16px Sora,Inter,sans-serif}.wo-l small{opacity:.7;font-size:13.5px}
.wcta{display:flex!important;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:56px auto 96px!important;padding:26px 30px!important;border-radius:20px;background:rgba(55,120,245,.1);font:600 18px Sora,Inter,sans-serif}
html[data-theme=light] .wq-i summary,html[data-theme=light] .wq-h,html[data-theme=light] .wo-l b{color:#0f1932}
html[data-theme=light] .wq-i p,html[data-theme=light] .wo-l small{color:#3d4a66;opacity:1}
html[data-theme=light] .wcta{background:#f2f6fe;color:#0f1932}
@media (max-width:900px){.pg>.wq{padding:40px 20px 0}}
/* light: the small scenes (who it's for) as line art too; the blue card's label readable */
html[data-theme=light] .scene-mini svg [stroke^="rgba(232,238,255,.38"]{stroke:rgba(47,99,230,.45)}
html[data-theme=light] .scene-mini svg [stroke^="rgba(232,238,255,.8"],html[data-theme=light] .scene-mini svg [stroke="#e6ebf7"]{stroke:#2f63e6}
html[data-theme=light] .scene-mini svg [fill="#2347ae"]{fill:#f2f6fe;stroke:#2f63e6;stroke-width:1.6}
html[data-theme=light] .scene-mini svg circle[fill="#2347ae"]{fill:#e3ecfd}
html[data-theme=light] .scene-mini svg [fill^="rgba(127,156,255"]{fill:rgba(55,120,245,.1)}
html[data-theme=light] .scene-mini svg text[fill^="rgba(232,238,255"],html[data-theme=light] .scene-mini svg text[fill="#e6ebf7"]{fill:#2f63e6}
html[data-theme=light] .scene-mini svg [fill="#c9d6ff"]{fill:#dbe6fd}
.c133 .c33{color:rgba(255,255,255,.85)!important}
/* lights on in the product scenes: lit windows (scenes.js) glow at night */
html[data-theme=dark] [data-hero] svg rect.lit,html[data-theme=dark] .scene-mini svg rect.lit{filter:drop-shadow(0 0 5px rgba(255,209,102,.75))}
html[data-theme=light] [data-hero] svg rect.lit,html[data-theme=light] .scene-mini svg rect.lit{fill:#ffd166!important;stroke:#e9b440!important}
html[data-theme=dark] [data-hero] svg rect[fill="#2347ae"]{fill:#2b4fc0}
/* headings with a blue second half, centred (owner 2026-11-03: "boring") */
.c105 .hl{color:#2563eb}
html[data-theme=dark] .c105 .hl{background:linear-gradient(100deg,#5fd3ff,#a9c6ff 50%,#c9b3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-head{text-align:center;align-items:center}
.fx-head .c106{margin-left:auto;margin-right:auto;max-width:640px}
/* the features search stays under the header while the page scrolls */
.pg>.fx-stick{position:sticky;top:72px;z-index:40;max-width:none;padding:12px max(64px,calc((100% - 1152px) / 2));background:color-mix(in srgb,#fff 86%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px)}
html[data-theme=dark] .pg>.fx-stick{background:color-mix(in srgb,#081431 86%,transparent)}
.fx-stick .fx-bar{margin:0}
/* the blue "With SmartMy ..." card: white words and white-outlined tags in both modes */
.c133 .c134{color:#fff!important}
.c133 .c135 a,.c133 .c135 span,.c133 .c136{color:#fff!important;background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.3)!important}
.c133 .c135 a:hover{background:rgba(255,255,255,.24)!important;text-decoration:none}
.c108{top:150px!important}.fx-area{scroll-margin-top:150px}
/* the blue card text a size down (owner 2026-11-03: "text too big") */
.c133 .c134{font-size:19px!important;line-height:1.5!important;font-weight:500!important}
@media (max-width:900px){.c133 .c134{font-size:17px!important}}
/* features: the highlighted ones carry the blue mark, not grey (owner 2026-11-03) */
.c120.fx-it.fx-hl{border-left:3px solid #2f63e6!important;box-shadow:inset 3px 0 0 #2f63e6}
html[data-theme=light] .c120.fx-it.fx-hl{background:#f2f6ff!important;border-color:#dbe6ff!important;border-left-color:#2f63e6!important}
html[data-theme=dark] .c120.fx-it.fx-hl{background:rgba(55,120,245,.12)!important;border-left-color:#7aa8ff!important}
.c120.fx-it.fx-hl .ft-n::after{content:"Highlight";margin-left:8px;padding:2px 8px;border-radius:99px;background:#2f63e6;color:#fff;font:600 10px "IBM Plex Mono",monospace;letter-spacing:.06em;vertical-align:2px}
.c120.fx-it.fx-hl,html[data-theme=light] .c120.fx-it.fx-hl,html[data-theme=dark] .c120.fx-it.fx-hl{box-shadow:none!important}.c120.fx-it.fx-hl:hover{box-shadow:0 12px 26px rgba(15,25,50,.08)!important}
/* "On this page", round 2: darker words, clear current item (solid blue), plain hover */
html[data-theme=light] .c108 .toc{color:#1f2a44!important;font-weight:500;font-size:15.5px;line-height:1.4}
html[data-theme=light] .c108 .toc .c110{color:#6b7690!important}
html[data-theme=light] .c108 .toc:hover{background:#f1f3f8!important;color:#0f1932!important}
.c108 .toc.on,html[data-theme=light] .c108 .toc.on,html[data-theme=dark] .c108 .toc.on{background:#2f63e6!important;color:#fff!important;font-weight:600;border-left-color:transparent!important}
.c108 .toc.on .c110,html[data-theme=light] .c108 .toc.on .c110{color:rgba(255,255,255,.8)!important}
html[data-theme=dark] .c108 .toc{color:#d6def0!important}html[data-theme=dark] .c108 .toc:hover{background:rgba(255,255,255,.06)}
.c109{font-size:12px!important;color:#2f63e6!important;padding-left:12px}
/* no underlines on links (owner rule) */
.v2-foot a,.v2-foot a:hover,footer a,footer a:hover,.cp a,.cp2 a{text-decoration:none!important}
.pg>.c80{max-width:1152px;margin:64px auto 80px!important}
/* weather in dark mode (owner 2026-11-03): dark clouds over the night sky, pale rain, fewer stars */
html[data-theme=dark] .wx-cl,html[data-theme=dark] .wx-cl::before,html[data-theme=dark] .wx-cl::after{background:#1a2550;border-color:rgba(170,190,255,.22)}
html[data-theme=dark] .wx-rain .wx-cl,html[data-theme=dark] .wx-rain .wx-cl::before,html[data-theme=dark] .wx-rain .wx-cl::after{background:#161d3a;border-color:rgba(170,190,255,.16)}
html[data-theme=dark] .wx b{background:linear-gradient(transparent,rgba(190,210,255,.45))}
html[data-theme=dark] .wx-cloudy #stars,html[data-theme=dark] .wx-rain #stars,html[data-theme=dark] .wx-cloudy .stars,html[data-theme=dark] .wx-rain .stars{opacity:.25;transition:opacity 1s}
html[data-theme=dark] .wx-cloudy #moon,html[data-theme=dark] .wx-rain #moon{opacity:.4!important}
/* the weather line: a small pill at the foot of the hero */
[data-hero],.v2 .hero{position:relative}
.wx-line{position:absolute;right:24px;bottom:18px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font:500 12.5px/1.2 Inter,system-ui,sans-serif;color:#3d4a66;background:rgba(255,255,255,.72);border:1px solid rgba(47,99,230,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
html[data-theme=dark] .wx-line{color:#c9d4f5;background:rgba(14,22,52,.6);border-color:rgba(170,190,255,.18)}
.wx-line i{width:14px;height:14px;flex:none;border-radius:50%;background:#ffd166}
.wx-l-cloudy i,.wx-l-rain i{border-radius:8px;height:9px;background:#b9c6e4}
.wx-l-rain i{box-shadow:3px 6px 0 -3.5px #6f8fe0,8px 6px 0 -3.5px #6f8fe0}
@media (max-width:720px){.wx-line{right:12px;bottom:10px;font-size:11.5px}}
/* weather, stronger (owner 2026-11-03: "very subtle"): more and bigger clouds, a dimmer sky for rain, heavier rain */
.wx-cl{width:220px;height:66px;border-radius:60px;transform-origin:left top;scale:var(--s,1);opacity:1;animation-duration:90s}
.wx-cl::before{width:92px;height:62px;left:34px;top:-38px}.wx-cl::after{width:70px;height:46px;left:110px;top:-26px}
.wx-cloudy .wx-cl,.wx-cloudy .wx-cl::before,.wx-cloudy .wx-cl::after{background:#f2f5fb;border-color:rgba(47,99,230,.32)}
.wx-rain .wx-cl,.wx-rain .wx-cl::before,.wx-rain .wx-cl::after{background:#d9e0ec;border-color:rgba(60,80,120,.38)}
.wx-cloudy .wx{background:linear-gradient(rgba(150,170,205,.10),transparent 70%)}
.wx-rain .wx{background:linear-gradient(rgba(70,90,130,.20),rgba(70,90,130,.06) 75%,transparent)}
.wx b{width:2px;height:var(--h,24px);background:linear-gradient(transparent,rgba(47,99,230,.75));border-radius:2px}
html[data-theme=dark] .wx-cloudy .wx-cl,html[data-theme=dark] .wx-cloudy .wx-cl::before,html[data-theme=dark] .wx-cloudy .wx-cl::after{background:#24305f;border-color:rgba(170,190,255,.3)}
html[data-theme=dark] .wx-rain .wx-cl,html[data-theme=dark] .wx-rain .wx-cl::before,html[data-theme=dark] .wx-rain .wx-cl::after{background:#1d2447;border-color:rgba(170,190,255,.22)}
html[data-theme=dark] .wx-rain .wx{background:linear-gradient(rgba(5,10,30,.35),transparent 80%)}
html[data-theme=dark] .wx b{background:linear-gradient(transparent,rgba(200,215,255,.7))}
html[data-theme=dark] .wx-cloudy #stars,html[data-theme=dark] .wx-rain #stars,html[data-theme=dark] .wx-cloudy .stars,html[data-theme=dark] .wx-rain .stars{opacity:.1}
/* the weather layer spans the whole screen width, not only the hero's column */
.wx{left:50%;right:auto;width:100vw;transform:translateX(-50%)}
/* the rainbow: soft bands behind the words, fading in once the rain has started */
.wx-bow{position:absolute;left:52%;top:4%;width:min(760px,70vw);height:min(360px,34vw);fill:none;stroke-width:9;opacity:0;animation:wxbow 3s ease 1.2s forwards}
html[data-theme=dark] .wx-bow{display:none}
@keyframes wxbow{to{opacity:.38}}
/* clouds drift only a little, so they stay at the sides; the layer fades out at its foot instead of ending in an edge */
@keyframes wxdrift2{from{transform:translateX(-4vw)}to{transform:translateX(4vw)}}
.wx-cl{animation:wxdrift2 24s ease-in-out infinite alternate;animation-delay:var(--d)}
.wx{-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
/* the hero's children are capped at 1280px; the weather layer is not (owner's 1920px screen showed a box) */
.wx{max-width:none!important;margin:0!important;left:0!important;right:0!important;width:auto!important;transform:none!important}
.wx-bow{left:auto;right:2%;top:6%;width:min(620px,40vw);height:min(310px,20vw)}
/* with weather on, the scene's own outline clouds and birds go: the weather draws its clouds at the sides, and
   nothing crosses the words (owner 2026-11-03) */
.wx-rain .sc-cl,.wx-cloudy .sc-cl,.wx-rain .sc-bird,.wx-cloudy .sc-bird{display:none}
/* the rainbow, again: on the left beside the words, opposite the sun, its feet behind the clouds */
.wx-bow{left:1.5%;right:auto;top:12%;width:min(440px,24vw);height:min(220px,12vw);z-index:0}
.wx-cl{z-index:1}
.wx-bow{width:min(440px,20vw);height:min(220px,10vw);top:13%}
/* snow (owner 2026-11-03): flakes drifting down, pale clouds, the sun faint behind them */
.wx s{position:absolute;top:-4%;left:var(--x);width:var(--z);height:var(--z);border-radius:50%;background:#fff;border:1px solid rgba(47,99,230,.35);box-shadow:0 0 4px rgba(47,99,230,.2);animation:wxsnow var(--t) linear infinite;animation-delay:var(--d)}
@keyframes wxsnow{0%{transform:translate(0,0)}50%{transform:translate(var(--w),55vh)}100%{transform:translate(calc(var(--w) * -.4),110vh)}}
.wx-snow .wx-cl,.wx-snow .wx-cl::before,.wx-snow .wx-cl::after{background:#f7f9fd;border-color:rgba(47,99,230,.3)}
.wx-snow .wx{background:linear-gradient(rgba(170,190,225,.14),transparent 75%)}
html[data-theme=light] .wx-snow [id=psun],html[data-theme=light] .wx-snow #sun,.wx-snow .sun{opacity:.25!important}
.wx-snow svg [stroke="#ffd36b"],.wx-snow svg [fill="#ffd36b"],.wx-snow svg [fill^="rgba(255,211,107"]{opacity:.18}
.wx-snow .sc-cl,.wx-snow .sc-bird{display:none}
html[data-theme=dark] .wx s{background:#eef3ff;border-color:rgba(255,255,255,.5);box-shadow:0 0 6px rgba(220,230,255,.5)}
html[data-theme=dark] .wx-snow .wx-cl,html[data-theme=dark] .wx-snow .wx-cl::before,html[data-theme=dark] .wx-snow .wx-cl::after{background:#2a3566;border-color:rgba(190,205,255,.3)}
html[data-theme=dark] .wx-snow #stars,html[data-theme=dark] .wx-snow .stars{opacity:.15}
.wx-l-snow i{border-radius:50%;width:10px;height:10px;background:#fff;border:1.5px solid #8fa7e6}
/* rainbow over the town (sky.js places it); light-mode snowflakes stronger */
.wx-bow{z-index:0;stroke-width:7}
.wx s{background:#e8eeff;border:1.5px solid rgba(47,99,230,.5);box-shadow:0 0 6px rgba(47,99,230,.25)}
/* snow comes with a full overcast: no sun at all (owner 2026-11-03); rain keeps a faint sun, it makes the rainbow */
.wx-snow [id=psun],.wx-snow #sun,.wx-snow .sun{opacity:0!important}
.wx-snow svg [stroke="#ffd36b"],.wx-snow svg [fill="#ffd36b"],.wx-snow svg [fill^="rgba(255,211,107"]{opacity:0!important}
.wx b{opacity:.75}
/* the rainbow lives in the scene drawing (scenes.js .sc-bow): shown in light-mode rain only, fading in */
.sc-bow{display:none}
html[data-theme=light] .wx-rain .sc-bow{display:inline;opacity:0;animation:wxbow2 3s ease 1s forwards}
@keyframes wxbow2{to{opacity:.4}}
html[data-theme=light] .wx-rain .sc-bow{animation:wxbow2 2.5s ease 4s forwards}
@keyframes wxbow2{to{opacity:.45}}
html[data-theme=light] .wx-rain .sc-bow{animation:none}
/* phones (owner 2026-11-03: "mobile view is a mess"): the hero's town sits in the space under the buttons, not on the words */
@media (max-width:700px){
  html body .c1>.c2{top:auto!important;bottom:0!important;height:240px!important}
  .c1>.c2>svg[viewBox="0 0 800 420"]{top:0!important;height:100%!important}
  .c1>.c2>svg[viewBox="0 0 800 300"]{display:none!important}
}
@media (max-width:700px){
  .hm-sp{padding:24px 14px 26px!important;margin-left:-6px!important;margin-right:-6px!important}
  .pg>.c24,.pg>.c58,.pg>.c72{padding-top:44px!important;padding-bottom:44px!important}
  .pg>.c80{margin-top:40px!important;margin-bottom:56px!important}
}
/* contact form card in light mode: white like the rest of light mode, so its labels and choices read (owner 2026-11-03) */
html[data-theme=light] .formcard{background:#fff!important;color:#0f1932;border:1px solid #e3e8f4;box-shadow:0 18px 48px rgba(16,40,110,.08)}
html[data-theme=light] .formcard h2,html[data-theme=light] .formcard h3,html[data-theme=light] .formcard label{color:#0f1932}
html[data-theme=light] .formcard .topics label{border:1px solid #d5ddf0;color:#24304f}
html[data-theme=light] .formcard .topics input:checked+label{color:#fff}
html[data-theme=light] .formcard input:not([type=radio]):not([type=checkbox]),html[data-theme=light] .formcard textarea,html[data-theme=light] .formcard select{background:#f6f8fd!important;border:1px solid #dbe2f2!important;color:#0f1932!important}
html[data-theme=light] .formcard p,html[data-theme=light] .formcard small{color:#5a6785}
/* plans table on phones: a narrow feature column so the plans show at once; the rest scrolls sideways */
@media (max-width:700px){
  .pl-t{min-width:0;width:auto;font-size:12.5px}
  .pl-t .pl-f{width:46vw;min-width:46vw;max-width:46vw;padding:10px 10px}
  .pl-t th,.pl-t td{padding:10px 8px}
  .pl-t td{min-width:84px;font-size:12px}
  .pl-t thead th{font-size:10px;letter-spacing:.08em}
  .pl-wrap::before{content:"Swipe to see every plan →";display:block;padding:8px 12px;font:500 11.5px/1.3 Inter,system-ui,sans-serif;color:#6b7896;position:sticky;left:0}
}
/* Features search bar on tablets and phones: search on its own row, the filters side by side under it, compact,
   and solid enough that the blue Highlights do not tint it (owner 2026-11-03) */
@media (max-width:900px){
  .pg>.fx-stick{padding:10px 16px;background:color-mix(in srgb,#fff 95%,transparent)}
  html[data-theme=dark] .pg>.fx-stick{background:color-mix(in srgb,#081431 95%,transparent)}
  .fx-stick .fx-bar:not([hidden]){display:flex!important;flex-wrap:wrap;gap:8px}
  .fx-stick .fx-q{flex:1 1 100%;width:auto!important;max-width:none!important}
  .fx-stick .fx-sel{flex:1 1 0;width:auto!important;min-width:0!important;max-width:none!important}
  .fx-stick .fx-sel .ss,.fx-stick .fx-sel .ss>*:first-child{width:100%!important;min-width:0!important}
  .fx-stick .fx-q input,.fx-stick .fx-sel select,.fx-stick .fx-sel .ss-btn{height:40px;font-size:14px}
  .fx-stick .fx-n{flex:1 1 100%}
  .fx-stick .fx-n:empty{display:none}
}
.pl-none .c20{justify-content:flex-start;margin-top:28px}
/* Features search bar: right under the header (no strip of the blue panel between), solid, and its dropdowns
   fill their boxes (owner 2026-11-03) */
.pg>.fx-stick{top:64px!important;background:#fff!important;box-shadow:0 8px 18px -12px rgba(16,40,110,.25)}
html[data-theme=dark] .pg>.fx-stick{background:#081431!important}
.fx-stick .fx-sel .ss-btn{width:100%!important;min-width:0!important;max-width:100%}
/* Features search bar floats (owner 2026-11-03: "floating instead of a line"): no full-width band, a glass card */
.pg>.fx-stick{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none;padding-top:10px!important;padding-bottom:10px!important}
.fx-stick .fx-bar{pointer-events:auto;max-width:980px;margin:0 auto!important;padding:8px;border-radius:18px;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);border:1px solid rgba(47,99,230,.12);box-shadow:0 14px 34px -10px rgba(16,40,110,.28)}
html[data-theme=dark] .fx-stick .fx-bar{background:rgba(12,24,62,.78);border-color:rgba(170,190,255,.16);box-shadow:0 14px 34px -10px rgba(0,0,0,.6)}
@media (max-width:900px){.pg>.fx-stick{background:transparent!important;padding:8px 12px!important}}
.pl-gst{font-size:13px;font-weight:500;margin-left:6px;opacity:.7}.pl-from{font-size:13px;font-weight:500;opacity:.75}.pl-ask{margin:2px 0 8px}
/* ---- Plans page, restyled like Features / Who it's for (owner 2026-11-03: "plan page ugly") ---- */
.pl-head{text-align:center;margin-left:auto;margin-right:auto}
.pl-head .c106{margin-left:auto;margin-right:auto}
.pl-sec{max-width:1152px;margin:0 auto;padding:8px 24px 40px}
.pl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:8px 0 18px;align-items:stretch}
.pl-cards.pl-n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pl-cards.pl-n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin-left:auto;margin-right:auto}
.pl-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 24px 24px;border-radius:22px;background:#fff;border:1px solid #e3e8f4;box-shadow:0 10px 30px -18px rgba(16,40,110,.35);transition:transform .2s,box-shadow .2s}
.pl-card:hover{transform:translateY(-3px);box-shadow:0 22px 44px -20px rgba(16,40,110,.4)}
.pl-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pl-name{font:600 22px/1.2 Sora,system-ui,sans-serif;color:#0f1932;letter-spacing:-.01em}
.pl-badge{font:500 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:#fff;color:#2f63e6}
.pl-price{font:600 26px/1.15 Sora,system-ui,sans-serif;color:#0f1932}
.pl-price.pl-ask{font-size:15px;font-weight:500;color:#5a6785;font-family:Inter,system-ui,sans-serif}
.pl-sub{font-size:13px;color:#6b7896;margin-top:-4px}
.pl-line{font-size:14.5px;line-height:1.6;color:#3d4a66;margin:2px 0 0;flex:1}
.pl-line b{color:#0f1932;font-weight:600}
.pl-k{font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#2f63e6;padding-top:12px;border-top:1px solid #edf0f7}
.pl-cta{display:block;text-align:center;margin-top:6px;padding:12px 16px;border-radius:12px;font-weight:600;font-size:14.5px;background:#eef3ff;color:#2f63e6;text-decoration:none!important;transition:background .2s}
.pl-cta:hover{background:#dfe8ff}
/* the recommended plan: the solid blue of the Highlights panel */
.pl-card.pl-pick{background:#2f63e6;border-color:#2f63e6;box-shadow:0 26px 50px -22px rgba(47,99,230,.65)}
.pl-pick .pl-name,.pl-pick .pl-price,.pl-pick .pl-line b{color:#fff}
.pl-pick .pl-line,.pl-pick .pl-sub,.pl-pick .pl-price.pl-ask{color:rgba(255,255,255,.86)}
.pl-pick .pl-k{color:#fff;border-top-color:rgba(255,255,255,.22)}
.pl-pick .pl-cta{background:#fff;color:#2f63e6}.pl-pick .pl-cta:hover{background:#eef3ff}
.pl-terms{text-align:center;max-width:760px;margin:0 auto 34px;font-size:13.5px;color:#6b7896}
/* the comparison */
.pl-wrap{border-radius:22px;border:1px solid #e3e8f4;background:#fff;box-shadow:0 10px 30px -18px rgba(16,40,110,.3)}
.pl-t thead th{background:#fff;color:#2f63e6}
.pl-t .pl-f{background:#fff;color:#24304f;border-right:1px solid #eef1f8;font-size:14px}
.pl-t td{color:#24304f}
.pl-t th,.pl-t td{border-bottom:1px solid #eef1f8}
.pl-t tbody tr:not(.pl-area):hover th,.pl-t tbody tr:not(.pl-area):hover td{background:#f7f9fe}
.pl-area th,.pl-area td{background:#f3f6fd!important;padding-top:18px!important;padding-bottom:10px!important}
.pl-area .pl-f{font:600 15px/1.3 Sora,system-ui,sans-serif;color:#0f1932!important}
.pl-an{font:500 10px/1.2 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#7d8bb0!important;vertical-align:bottom!important}
.pl-fl{color:#24304f!important;text-decoration:none!important}.pl-fl:hover{color:#2f63e6!important}
.pl-y{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#2f63e6;vertical-align:middle}
.pl-y+.pl-v{margin-left:6px}
.pl-n{color:#b8c1d8}
/* dark mode */
html[data-theme=dark] .pl-card{background:#0f1c46;border-color:rgba(170,190,255,.14);box-shadow:none}
html[data-theme=dark] .pl-name,html[data-theme=dark] .pl-price,html[data-theme=dark] .pl-line b{color:#fff}
html[data-theme=dark] .pl-line,html[data-theme=dark] .pl-sub,html[data-theme=dark] .pl-price.pl-ask{color:#b9c4e4}
html[data-theme=dark] .pl-k{border-top-color:rgba(170,190,255,.14);color:#8fb0ff}
html[data-theme=dark] .pl-cta{background:rgba(127,156,255,.14);color:#cfdaff}
html[data-theme=dark] .pl-card.pl-pick{background:#2f63e6;border-color:#2f63e6}
html[data-theme=dark] .pl-pick .pl-cta{background:#fff;color:#2f63e6}
html[data-theme=dark] .pl-wrap{background:#0b1538;border-color:rgba(170,190,255,.12);box-shadow:none}
html[data-theme=dark] .pl-t thead th,html[data-theme=dark] .pl-t .pl-f{background:#0b1538;color:#dfe5f3}
html[data-theme=dark] .pl-t thead th{color:#9fb8ff}
html[data-theme=dark] .pl-t td{color:#cfd7ea}
html[data-theme=dark] .pl-t th,html[data-theme=dark] .pl-t td{border-bottom-color:rgba(255,255,255,.06)}
html[data-theme=dark] .pl-area th,html[data-theme=dark] .pl-area td{background:#131f52!important}
html[data-theme=dark] .pl-area .pl-f{color:#fff!important}
html[data-theme=dark] .pl-fl{color:#dfe5f3!important}
html[data-theme=dark] .pl-t tbody tr:not(.pl-area):hover th,html[data-theme=dark] .pl-t tbody tr:not(.pl-area):hover td{background:#101d4a}
@media (max-width:900px){.pl-cards,.pl-cards.pl-n4{grid-template-columns:1fr}.pl-sec{padding:4px 16px 32px}}
/* Plans in light mode: beat light.css's older rules */
.pl-name{text-transform:none!important;font-family:Sora,system-ui,sans-serif!important;font-size:22px!important;letter-spacing:-.01em!important}
html[data-theme=light] .pl-card{border:1px solid #e3e8f4}
html[data-theme=light] .pl-name{color:#0f1932}
html[data-theme=light] .pl-line{color:#3d4a66;border-top:0}
html[data-theme=light] .pl-sub{color:#6b7896}
html[data-theme=light] .pl-price{color:#0f1932}
html[data-theme=light] .pl-price.pl-ask{color:#5a6785}
html[data-theme=light] .pl-badge{background:#fff;color:#2f63e6}
html[data-theme=light] .pl-card.pl-pick{background:#2f63e6;border-color:#2f63e6;box-shadow:0 26px 50px -22px rgba(47,99,230,.65)}
html[data-theme=light] .pl-pick .pl-name,html[data-theme=light] .pl-pick .pl-price,html[data-theme=light] .pl-pick .pl-line b{color:#fff}
html[data-theme=light] .pl-pick .pl-line,html[data-theme=light] .pl-pick .pl-sub,html[data-theme=light] .pl-pick .pl-price.pl-ask{color:rgba(255,255,255,.86)}
html[data-theme=light] .pl-y{background:#2f63e6}
html[data-theme=light] .pl-n{color:#b8c1d8}
html[data-theme=light] .pl-terms{color:#6b7896}
html[data-theme=light] .pl-wrap{border:1px solid #e3e8f4}
html[data-theme=light] .pl-t thead th{color:#2f63e6}
html[data-theme=light] .pl-area th,html[data-theme=light] .pl-area td,html[data-theme=light] .pl-area .pl-f{background:#f3f6fd!important;color:#0f1932}
html[data-theme=light] .pl-area .pl-an{color:#7d8bb0!important}
html[data-theme=light] .pl-t .pl-f{color:#24304f;border-right:1px solid #eef1f8}
/* the comparison table, prettier (owner 2026-11-03) */
.pl-t th,.pl-t td{padding:14px 16px}
.pl-t thead th{vertical-align:bottom;padding-top:20px;padding-bottom:16px}
.pl-t thead .pl-f{font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;color:#7d8bb0!important}
.pl-pn{display:block;font:600 16px/1.2 Sora,system-ui,sans-serif;letter-spacing:-.01em;text-transform:none;color:#0f1932}
.pl-rtag{display:inline-block;margin-top:6px;font:500 9.5px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;padding:4px 7px;border-radius:999px;background:#2f63e6;color:#fff}
html[data-theme=light] .pl-t thead th.pl-ph{color:#0f1932}
.pl-t .pl-rec{background:#f2f6ff!important}
.pl-t thead .pl-rec{border-radius:14px 14px 0 0}
.pl-area .pl-rec{background:#e8efff!important}
.pl-area .pl-f{position:relative;padding-left:26px!important}
.pl-area .pl-f::before{content:"";position:absolute;left:14px;top:19px;bottom:12px;width:3px;border-radius:3px;background:#2f63e6}
.pl-chip{display:inline-block;padding:4px 10px;border-radius:999px;background:#f1f4fb;color:#24304f;font-size:12.5px;line-height:1.35}
.pl-rec .pl-chip{background:#fff}
.pl-n{font-weight:600}
html[data-theme=dark] .pl-pn{color:#fff}
html[data-theme=dark] .pl-t .pl-rec{background:rgba(47,99,230,.12)!important}
html[data-theme=dark] .pl-area .pl-rec{background:rgba(47,99,230,.22)!important}
html[data-theme=dark] .pl-chip{background:rgba(255,255,255,.07);color:#dfe5f3}
html[data-theme=dark] .pl-rec .pl-chip{background:rgba(255,255,255,.1)}
@media (max-width:700px){.pl-pn{font-size:14px}.pl-area .pl-f{padding-left:22px!important}.pl-area .pl-f::before{left:10px}.pl-chip{padding:3px 8px;font-size:11.5px}}
html[data-theme=light] .pl-t thead .pl-pn{color:#0f1932!important}html[data-theme=light] .pl-t thead .pl-rec .pl-pn{color:#2f63e6!important}.pl-v:not(.pl-chip){font-size:12.5px;color:inherit}
.pl-t thead th.pl-ph{vertical-align:top!important}
/* feature page in light mode (owner 2026-11-03: "ugly, what's this colours"): the At a glance card white, the
   section links a floating glass bar like the Features search, no grey */
html[data-theme=light] .fp-glance{background:#fff!important;border:1px solid #e3e8f4!important;box-shadow:0 14px 36px -18px rgba(16,40,110,.3);color:#24304f}
html[data-theme=light] .fp-glance dl>div{border-top-color:#edf0f7!important}
html[data-theme=light] .fp-glance dt{color:#7d8bb0!important}
html[data-theme=light] .fp-glance dd,html[data-theme=light] .fp-glance dd a{color:#24304f!important}
html[data-theme=light] .fp-glance .fp-k{color:#2f63e6}
.fp-toc{top:64px!important;z-index:40!important;background:transparent!important;border-bottom:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;justify-content:center;padding-top:10px!important;padding-bottom:10px!important;pointer-events:none}
.fp-toc a{pointer-events:auto;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
html[data-theme=light] .fp-toc a{background:rgba(255,255,255,.88);color:#24304f;border:1px solid #e0e6f3;box-shadow:0 6px 16px -10px rgba(16,40,110,.35)}
html[data-theme=light] .fp-toc a:hover{color:#2f63e6;border-color:#2f63e6}
html[data-theme=dark] .fp-toc a{background:rgba(12,24,62,.82)}
@media (max-width:900px){.fp-toc{justify-content:flex-start}}
/* feature page layout (owner 2026-11-03: "make the layout better"): centred hero with the town, then the sections
   beside a sidebar that stays in view (At a glance + On this page) */
.fp-top2{text-align:center}
.fp-top2 .fp-center{max-width:820px;margin:0 auto}
.fp-top2 .fp-crumbs,.fp-top2 .fp-plans,.fp-top2 .fp-acts{justify-content:center}
.fp-top2 .c106{margin-left:auto;margin-right:auto}
.fp-top2 .fp-status{display:inline-block;text-align:left}
.fp-layout{max-width:1216px;margin:0 auto;padding:0 32px 64px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.fp-layout>.fp{grid-column:1;grid-row:1;padding:0!important;max-width:none}
.fp-side{grid-column:2;grid-row:1;position:sticky;top:84px;display:flex;flex-direction:column;gap:16px}
.fp-side .fp-glance{padding:20px}
.fp-side .fp-glance dl>div{grid-template-columns:82px minmax(0,1fr)}
.fp-toc2{display:flex;flex-direction:column;gap:2px;padding:18px 16px;border-radius:20px;background:#fff;border:1px solid #e3e8f4}
.fp-toc2 .fp-k{margin:0 0 8px 8px}
.fp-toc2 a{padding:8px 10px;border-radius:10px;font-size:14px;color:#3d4a66;text-decoration:none!important;border-left:2px solid transparent}
.fp-toc2 a:hover{background:#f3f6fd;color:#2f63e6}
.fp-toc2 a.on{background:#eef3ff;color:#2f63e6;font-weight:600}
html[data-theme=dark] .fp-toc2{background:#0f1c46;border-color:rgba(170,190,255,.14)}
html[data-theme=dark] .fp-toc2 a{color:#b7c1da}
html[data-theme=dark] .fp-toc2 a:hover,html[data-theme=dark] .fp-toc2 a.on{background:rgba(127,156,255,.12);color:#fff}
.fp-toc-m{display:none!important}
.fp-sec{scroll-margin-top:84px}
@media (max-width:1000px){
  .fp-layout{grid-template-columns:1fr;padding:0 16px 48px}
  .fp-side{grid-column:1;grid-row:2;position:static}
  .fp-toc2{display:none}
  .fp-toc-m{display:flex!important}
}
/* feature page fixes (owner 2026-11-03) */
/* the questions' open / close mark: a plus that turns into a minus (the stylesheet had a "2" by mistake) */
.fp-q>summary::after{content:"+"!important;font-family:Inter,system-ui,sans-serif!important;font-weight:400;font-size:22px;line-height:1;transition:transform .2s}
.fp-q[open]>summary::after{content:"\2212"!important}
/* buttons keep white text on hover */
.c124:hover,.c124:focus-visible,.c21:hover,.c85:hover{color:#fff!important;filter:brightness(1.08)}
/* related feature cards: normal cards, dark text, a soft hover */
.fp-card,.fp-card *{text-decoration:none!important}
html[data-theme=light] .fp-card{background:#fff;border:1px solid #e3e8f4;box-shadow:0 10px 26px -18px rgba(16,40,110,.3);transition:transform .2s,box-shadow .2s,border-color .2s}
html[data-theme=light] .fp-card .fp-rn{color:#0f1932!important}
html[data-theme=light] .fp-card>span:last-child{color:#5a6785!important}
html[data-theme=light] .fp-card .fp-k{color:#2f63e6!important}
html[data-theme=light] .fp-card:hover{border-color:#cfdaf5;transform:translateY(-3px);box-shadow:0 20px 40px -20px rgba(16,40,110,.38)}
html[data-theme=dark] .fp-card .fp-rn{color:#fff}
html[data-theme=dark] .fp-card:hover{border-color:rgba(127,156,255,.4);transform:translateY(-3px)}
.fp-side{max-height:calc(100vh - 100px);overflow-y:auto;scrollbar-width:none;padding-bottom:4px}.fp-side::-webkit-scrollbar{display:none}
/* "Who uses it" / "Works with": a plain list with a person mark, not boxes that look clickable (owner 2026-11-03) */
.fp-roles{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:0}
.fp-role{position:relative;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:14px 0 14px 40px!important;border-top:1px solid #edf0f7!important;display:flex;flex-direction:column;gap:2px}
.fp-role::before{content:"";position:absolute;left:0;top:16px;width:26px;height:26px;border-radius:50%;background:#eef3ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f63e6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20c.6-3.6 3.4-5.6 7-5.6s6.4 2 7 5.6'/%3E%3C/svg%3E") center/16px no-repeat}
#fp-with .fp-role::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f63e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E")}
.fp-role .fp-rn{font-weight:600}
html[data-theme=dark] .fp-role{border-top-color:rgba(255,255,255,.08)!important}
html[data-theme=dark] .fp-role::before{background-color:rgba(127,156,255,.14)}
@media (max-width:700px){.fp-roles{grid-template-columns:1fr}}
/* "Everything it does": groups flow in two newspaper columns, no holes beside a short group (owner 2026-11-03) */
.fp-groups{display:block!important;column-count:2;column-gap:40px}
.fp-group{break-inside:avoid;-webkit-column-break-inside:avoid;display:block;margin:0 0 6px;padding:14px 0 10px!important}
.fp-cols{display:block!important;column-count:2;column-gap:40px}
.fp-cols>div{break-inside:avoid;margin:0 0 20px}
html[data-theme=light] .fp-group{border-top:1px solid #edf0f7}
html[data-theme=light] .fp-group h3{color:#0f1932}
@media (max-width:760px){.fp-groups,.fp-cols{column-count:1}}
/* At a glance, improved (owner 2026-11-03): label above value, chips for lists, a status badge, limits one per line */
.fp-glance2{gap:0!important;padding:20px 20px 8px!important}
.fp-glance2 .fp-k{margin-bottom:6px}
.fg-row{display:flex;flex-direction:column;gap:7px;padding:12px 0;border-top:1px solid #edf0f7}
.fg-row:first-of-type{border-top:0}
.fg-l{font:500 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#7d8bb0}
.fg-status{flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px}
.fg-status .fg-l{width:100%}
.fg-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600}
.fg-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.fg-ok{background:#e9f8ef;color:#1f8a4c}.fg-wait{background:#fff5e0;color:#a86a00}
.fg-plan{padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600;background:#eef3ff;color:#2f63e6}
.fg-chips{display:flex;flex-wrap:wrap;gap:6px}
.fg-chips span{padding:4px 10px;border-radius:999px;font-size:12.5px;line-height:1.3;background:#f3f5fa;color:#24304f;border:1px solid #e6eaf3}
.fg-lim{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.fg-lim li{position:relative;padding-left:14px;font-size:13px;line-height:1.45;color:#3d4a66}
.fg-lim li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:#2f63e6}
html[data-theme=dark] .fg-row{border-top-color:rgba(255,255,255,.08)}
html[data-theme=dark] .fg-chips span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#dfe5f3}
html[data-theme=dark] .fg-lim li{color:#c7d0ea}
html[data-theme=dark] .fg-ok{background:rgba(52,199,120,.14);color:#6ee7a0}
html[data-theme=dark] .fg-wait{background:rgba(255,190,80,.14);color:#ffd27a}
html[data-theme=dark] .fg-plan{background:rgba(127,156,255,.16);color:#cfdaff}
/* columns stay even: a long group may continue in the next column between its points, never inside one */
.fp-group{break-inside:auto!important;-webkit-column-break-inside:auto!important}
.fp-group li{break-inside:avoid;-webkit-column-break-inside:avoid}
.fp-group summary,.fp-group h3{break-after:avoid;-webkit-column-break-after:avoid}
/* Why it matters: white heading on the blue */
.fp-why .fp-h,html[data-theme=light] .fp-why .fp-h,html[data-theme=light] .fp-why h2{color:#fff!important}
/* feature sections in light mode: a visible edge and a soft shadow, like the other cards (owner 2026-11-03) */
html[data-theme=light] .fp-sec:not(.fp-why){background:#fff;border:1px solid #e3e8f4!important;box-shadow:0 12px 32px -20px rgba(16,40,110,.28)}
/* How it works: the numbers joined by a thin line */
.fp-steps{position:relative}
.fp-steps li{position:relative}
.fp-steps li:not(:last-child)::after{content:"";position:absolute;left:12px;top:30px;bottom:-10px;width:2px;background:#dbe5fb;border-radius:2px}
html[data-theme=dark] .fp-steps li:not(:last-child)::after{background:rgba(127,156,255,.22)}
/* product hero fills the first screen, the town grows into the space under the words (owner 2026-11-03) */
@media (min-width:701px){
  html body .pg>.c1:has(>.c2[data-scene]){min-height:max(100vh,760px);box-sizing:border-box}
  html body .pg>.c1>.c2[data-scene]{top:0!important;bottom:0!important;height:auto!important}
  html body .pg>.c1>.c2[data-scene]>svg[viewBox="0 0 800 420"]{top:auto!important;bottom:0!important;height:max(340px,calc(100vh - 340px))!important}
}
/* legal pages (owner 2026-11-03: "sort this"): a centred reading column, a contents card, clean tables */
.inner-prose.legal{max-width:900px!important;margin:0 auto;padding:0 32px 96px!important;font-size:16.5px;line-height:1.7}
.legal-toc{list-style:none;margin:6px 0 10px;padding:18px 22px;border-radius:18px;background:#fff;border:1px solid #e3e8f4;box-shadow:0 10px 28px -20px rgba(16,40,110,.3);columns:2;column-gap:28px;counter-reset:lt}
.legal-toc li{counter-increment:lt;break-inside:avoid;padding:4px 0;font-size:14.5px}
.legal-toc li::before{content:counter(lt) ".";display:inline-block;width:24px;color:#7d8bb0;font-variant-numeric:tabular-nums}
.legal-toc a{text-decoration:none!important}
.inner-prose.legal h2{scroll-margin-top:84px;padding-top:18px;border-top:1px solid #edf0f7;margin-top:22px}
.inner-prose .legal-table,.inner-prose.legal table{width:100%}
.inner-prose.legal table{min-width:620px;border-collapse:separate!important;border-spacing:0;border:1px solid #e3e8f4;border-radius:16px;overflow:hidden;font-size:14px}
.inner-prose.legal th,.inner-prose.legal td{border:0!important;border-bottom:1px solid #edf0f7!important;padding:12px 14px!important}
.inner-prose.legal tr:last-child td{border-bottom:0!important}
.inner-prose.legal thead th{background:#f3f6fd!important;color:#0f1932!important;font:600 12px/1.3 Inter,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.inner-prose.legal td:first-child{font-weight:600;color:#0f1932;white-space:nowrap}
.inner-prose.legal td:first-child a{text-decoration:none!important}
.inner-prose.legal tbody tr:nth-child(even) td{background:#fafbfe}
.inner-prose.legal td:nth-child(2){min-width:150px;color:#3d4a66}
html[data-theme=dark] .legal-toc{background:#0f1c46;border-color:rgba(170,190,255,.14);box-shadow:none}
html[data-theme=dark] .inner-prose.legal h2{border-top-color:rgba(255,255,255,.08)}
html[data-theme=dark] .inner-prose.legal table{border-color:rgba(170,190,255,.14)}
html[data-theme=dark] .inner-prose.legal th,html[data-theme=dark] .inner-prose.legal td{border-bottom-color:rgba(255,255,255,.07)!important}
html[data-theme=dark] .inner-prose.legal thead th{background:#131f52!important;color:#fff!important}
html[data-theme=dark] .inner-prose.legal td:first-child{color:#fff}
html[data-theme=dark] .inner-prose.legal tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)}
html[data-theme=dark] .inner-prose.legal td:nth-child(2){color:#c7d0ea}
.pg>.c104:has(+.inner-prose.legal){max-width:900px;margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px;box-sizing:border-box}
@media (max-width:700px){.inner-prose.legal{padding:0 16px 64px!important}.legal-toc{columns:1}.pg>.c104:has(+.inner-prose.legal){padding-left:16px;padding-right:16px}}
.legal-toc li::before{content:none!important}.legal-toc{list-style:none!important}.legal-toc li{list-style:none!important}
/* course store: the grid and the empty note line up with the page column (owner 2026-11-03) */
.pg .st-grid{max-width:1152px;margin:0 auto;padding:0 24px 64px!important;box-sizing:border-box}
.pg .st-empty{max-width:1104px;margin:0 auto 64px!important;box-sizing:border-box;text-align:center}
html[data-theme=light] .st-card{background:#fff;border:1px solid #e3e8f4;box-shadow:0 10px 28px -18px rgba(16,40,110,.3)}
/* course store centred like the other pages; Learn's hero drawing centred under the words (owner 2026-11-03) */
.st-head2{text-align:center;margin-left:auto;margin-right:auto}
.st-head2 .c106{margin-left:auto;margin-right:auto}
.pg .st-bar{justify-content:center;max-width:1152px;margin-left:auto!important;margin-right:auto!important;flex-wrap:wrap}
.c2[data-scene="Learn"]>svg[viewBox="0 0 800 420"]>*{transform:translateX(-60px)}
.pg .st-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important}
.nf-head{text-align:center;margin-left:auto;margin-right:auto}.nf-head .c106{margin-left:auto;margin-right:auto}.nf-head .c20{justify-content:center;margin-top:26px}.nf-town{margin-bottom:24px}
.ch-head{text-align:center;align-items:center}.ch-head .c54{margin-left:auto;margin-right:auto}
.nf-head{padding-bottom:120px!important;min-height:52vh;box-sizing:border-box}.ch-head{max-width:none!important;width:100%;margin-left:auto!important;margin-right:auto!important}.ch-head .c54{max-width:640px}
/* Campus chooser (owner 2026-11-03: "need to improve it"): cards right under the heading, each with its own building
   in the town line-art, a real button, the product-colour shadow on hover */
.pg-brand .nf-head{padding-bottom:28px!important;min-height:0!important}
#choose{padding-top:8px!important}
.ch-head{display:none!important}
.ch-card{display:flex!important;flex-direction:column;border-radius:24px!important;overflow:hidden;background:#fff;border:1px solid #e3e8f4!important;box-shadow:0 14px 34px -22px rgba(16,40,110,.35);transition:transform .25s,box-shadow .25s}
.ch-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -22px color-mix(in srgb,var(--c) 55%,transparent)}
.ch-card .gc-town{display:block;height:190px;background:#f5f8ff;border-bottom:1px solid #edf0f7}
.ch-card .gc-town .gc-pic{display:block;width:100%;height:100%}
.ch-card .gc-body{padding:24px 26px 26px!important;display:flex;flex-direction:column;gap:8px;flex:1}
.ch-go{align-self:flex-start;margin-top:auto;padding:11px 18px;border-radius:12px;background:#2f63e6;color:#fff;font-weight:600;font-size:14.5px;transition:filter .2s}
.ch-card:hover .ch-go{filter:brightness(1.08)}
.ch-url{font:500 11.5px/1 'IBM Plex Mono',monospace;color:#7d8bb0;margin-top:2px}
html[data-theme=dark] .ch-card{background:#0f1c46;border-color:rgba(170,190,255,.14)!important;box-shadow:none}
html[data-theme=dark] .ch-card .gc-town{background:#0c1740;border-bottom-color:rgba(255,255,255,.06)}
/* chooser pictures: full card width, height from the drawing, no band under the ground */
.ch-card .gc-town{height:auto!important;border-bottom:0!important;padding:18px 0 0;overflow:visible}
.ch-card .gc-town .gc-pic,.ch-card .gc-town .gc-pic svg{display:block;width:100%!important;height:auto!important;max-height:none!important}
.ch-card .gc-body{border-top:1px solid #edf0f7}
html[data-theme=dark] .ch-card .gc-body{border-top-color:rgba(255,255,255,.06)}
.ch-card .gc-town{aspect-ratio:2.1/1}
.ch-card .gc-town .gc-pic,.ch-card .gc-town .gc-pic svg{height:100%!important}
/* course page (owner 2026-11-03: "can we improve it?"): centred hero, lessons as joined steps, a sidebar that stays */
.sc-head{text-align:center;margin-left:auto;margin-right:auto}
.sc-head .c106{margin-left:auto;margin-right:auto}
.sc-head .st-crumbs,.sc-head .st-facts{justify-content:center;display:flex;flex-wrap:wrap;gap:6px}
.sc-acts{justify-content:center;margin-top:24px}
.pg .st-course{max-width:1152px;margin:0 auto;padding:8px 24px 56px!important;box-sizing:border-box;align-items:start}
html[data-theme=light] .st-panel{background:#fff;border:1px solid #e3e8f4;box-shadow:0 12px 32px -20px rgba(16,40,110,.28)}
html[data-theme=light] .st-panel h2{color:#0f1932}
.sc-side{position:sticky;top:84px}
.st-lessons li{position:relative;align-items:center!important;padding:14px 0 14px 44px!important}
.st-lessons li::before{content:counter(l)!important;position:absolute;left:0;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:#2f63e6;color:#fff!important;font:700 13px/28px Sora,system-ui,sans-serif!important;text-align:center;min-width:0!important}
.st-lessons li:not(:last-child)::after{content:"";position:absolute;left:13px;top:calc(50% + 16px);height:calc(100% - 32px);width:2px;background:#dbe5fb;transform:translateY(0)}
.st-lessons li{border-top:0!important}
html[data-theme=light] .st-lessons .t{color:#0f1932}
.st-lessons .m{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#7d8bb0}
.sc-kind{padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:#eef3ff;color:#2f63e6}
.sc-quiz{background:#fff2e0;color:#b26a00}
.sc-video{background:#f1ecff;color:#6a46d8}
html[data-theme=dark] .sc-kind{background:rgba(127,156,255,.16);color:#cfdaff}
html[data-theme=dark] .sc-quiz{background:rgba(255,190,80,.14);color:#ffd27a}
html[data-theme=dark] .st-lessons li:not(:last-child)::after{background:rgba(127,156,255,.22)}
.st-steps{counter-reset:s;list-style:none;padding:0!important;margin:0 0 18px!important;display:flex;flex-direction:column;gap:12px}
.st-steps li{counter-increment:s;position:relative;padding-left:38px;line-height:1.55}
.st-steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:#eef3ff;color:#2f63e6;font:700 12px/24px Sora,system-ui,sans-serif;text-align:center}
html[data-theme=dark] .st-steps li::before{background:rgba(127,156,255,.16);color:#cfdaff}
.sc-more{display:flex;flex-direction:column;gap:8px}
.sc-mc{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:14px;border:1px solid #e6eaf3;text-decoration:none!important;transition:border-color .2s,transform .2s}
.sc-mc:hover{border-color:#2f63e6;transform:translateY(-2px)}
.sc-mn{font-weight:600;font-size:14px;color:#0f1932}
.sc-mm{font-size:12px;color:#7d8bb0}
html[data-theme=dark] .sc-mc{border-color:rgba(170,190,255,.14)}
html[data-theme=dark] .sc-mn{color:#fff}
@media (max-width:900px){.pg .st-course{grid-template-columns:1fr!important}.sc-side{position:static}}
.pg .st-course{padding:0 0 56px!important}.pg>.sc-acts{margin:4px auto 40px!important;display:flex}.sc-head{padding-bottom:12px!important}@media (max-width:1200px){.pg .st-course{padding:0 24px 48px!important}}
@media (max-width:700px){.pg>.sc-acts{padding:0 16px;box-sizing:border-box}}
/* ---- readability (WCAG AA 4.5:1 for small text), 2026-11-04 pass: the same look, a shade darker where it fell short ---- */
/* primary buttons: #2f63e6 carries white text at 5:1 (#3778f5 was 4.1) */
.c21,.c124,.c169,.st-cta,.c85,html[data-theme] .c21,html[data-theme] .c124,html[data-theme] .c169,html[data-theme] .st-cta{background:#2f63e6!important}
.st-chip.on,.topics input:checked+label{background:#2f63e6!important;color:#fff!important}
/* small grey labels on white */
html[data-theme=light] :is(.fg-l,.pl-an,.sc-mm,.ch-url,.gn,.jss-n,.pl-t thead .pl-f,.fp-glance dt,.fg-chips span){color:#56627f!important}
html[data-theme=light] :is(.pl-terms,.pl-sub,.pl-price.pl-ask){color:#4f5b78!important}
html[data-theme=light] .cp,html[data-theme=light] .cp span,html[data-theme=light] footer .cp *{color:#56627f}
html[data-theme=light] .st-tag.free,html[data-theme=light] .fg-ok{color:#17663a!important}
html[data-theme=light] .ft-tag.ft-with{color:#3f4d8a!important}
html[data-theme=light] .sc-quiz{color:#8a5200!important}
/* dark mode links and lines that sat too close to the navy */
html[data-theme=dark] .pl-pick .pl-line,html[data-theme=dark] .pl-pick .pl-sub{color:#fff!important}
html[data-theme=dark] :is(.formcard a,.frm a,.sec-more,.c50){color:#a9c1ff}
html[data-theme=dark] .pl-terms{color:#c3cdea!important}
/* product-coloured small text (Together, the joins slideshow): the product's colour, darkened enough to read */
html[data-theme=light] .v2 :is(.tg-steps small,.pa,.pb2){color:color-mix(in srgb,var(--c,var(--a,#2f63e6)) 62%,#0f1932)!important}
html[data-theme=light] .v2 .pb2{color:color-mix(in srgb,var(--b,#2f63e6) 62%,#0f1932)!important}
html[data-theme=dark] .v2 :is(.tg-steps small,.pa,.pb2){filter:brightness(1.35)}
html[data-theme=light] .v2 [role=tab][aria-selected=false],html[data-theme=light] .v2 button[role=tab]{color:#3d4a66}
/* contact form card in dark mode: navy like the other dark cards (it was white) */
html[data-theme=dark] .formcard{background:#0f1c46!important;border:1px solid rgba(170,190,255,.16);color:#dfe5f3;box-shadow:none}
html[data-theme=dark] .formcard :is(h2,h3,label){color:#e6ebf7!important}
html[data-theme=dark] .formcard .topics label{border:1px solid rgba(170,190,255,.22);color:#dfe5f3!important;background:transparent}
html[data-theme=dark] .formcard .topics input:checked+label{background:#2f63e6!important;border-color:#2f63e6;color:#fff!important}
html[data-theme=dark] .formcard :is(input:not([type=radio]):not([type=checkbox]),textarea,select){background:rgba(255,255,255,.05)!important;border:1px solid rgba(170,190,255,.2)!important;color:#fff!important}
html[data-theme=dark] .formcard :is(p,small){color:#b9c4e4!important}
html[data-theme=dark] .formcard a{color:#a9c1ff!important}
/* the place and story pickers: unselected choices in a readable grey */
html[data-theme=light] .v2 :is(button[aria-pressed=false],button.tab:not([aria-selected=true]),.tab:not(.on)){color:#3d4a66!important}
html[data-theme=light] .v2 select:invalid,html[data-theme=light] .v2 .ss-btn{color:#3d4a66}
html[data-theme=light] .formcard .topics input:not(:checked)+label{color:#24304f!important;border-color:#d5ddf0!important}
html[data-theme=light] :is(.story-tabs,.ptabs) .tab:not(.on){color:#3d4a66!important}
html[data-theme=light] .v2 .tg-pick button:not([aria-pressed=true]),html[data-theme=light] .v2 [data-k][aria-pressed=false]{color:#3d4a66!important}
/* the place menu stays on a phone's screen when opened */
@media (max-width:600px){.v2 .pmenu{width:min(92vw,380px)!important;max-width:92vw!important;box-sizing:border-box}}
/* more readability: hero tag cards, plan tags, the footer line, pickers, the draft banner */
html[data-theme=light] .ft-tag.ft-all{color:#17663a!important}
html[data-theme=light] .v2 footer .cp,html[data-theme=light] .v2 footer .cp *:not(a){color:#56627f!important}
html[data-theme=light] .form-alert{color:#7a4f00!important}
html[data-theme=light] .gj-place{color:#2449c7!important}
html[data-theme=light] .v2 :is(.tg,.tg-pick,.pk,.pk-pick,.tgx) button:not([aria-pressed=true]):not(.on){color:#3d4a66!important}
html[data-theme=dark] .v2 .tg-steps small{filter:brightness(1.6)}
html[data-theme=light] .v2 .tg-tabs button:not([aria-selected=true]){color:#3d4a66!important}
/* keyboard users see where they are: one clear focus ring everywhere (mouse clicks show none) */
: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}
/* open / close marks: drawn in a font that has the minus sign (the heading font shows a "2" for it) */
:is(.fp-group,.fp-q,details)>summary::after{font-family:Inter,system-ui,sans-serif!important}
.fp-group>summary::after{content:"+"!important}.fp-group[open]>summary::after{content:"\2212"!important}
/* ---- phone pass from the owner's iPhone (2026-11-04) ---- */
/* the blue boxes (closing call to action, Highlights) keep a margin from the screen edge */
@media (max-width:760px){
  .pg>.c80,.pg>.fx-band{margin-left:14px!important;margin-right:14px!important;width:auto!important;box-sizing:border-box}
}
/* the recommended plan's "Priced to your size" in white on its blue card */
html[data-theme] .pl-pick .pl-price.pl-ask{color:rgba(255,255,255,.88)!important}
/* dark header: no white glass edge along its top */
html[data-theme=dark] .pnav.stuck{box-shadow:0 10px 30px -22px rgba(0,0,0,.6)!important}
/* feature page "on this page" chips on phones: every chip in view (wrapped, no sideways scroll),
   on a solid bar so the page does not show through, and the current section marked */
@media (max-width:1000px){
  .fp-toc.fp-toc-m{flex-wrap:wrap;justify-content:center!important;overflow:visible;gap:6px;padding:8px 12px!important;pointer-events:auto;
    background:rgba(255,255,255,.97)!important;border-bottom:1px solid #e3e8f4!important;margin-bottom:18px}
  html[data-theme=dark] .fp-toc.fp-toc-m{background:rgba(9,17,52,.97)!important;border-bottom-color:rgba(255,255,255,.08)!important}
  .fp-toc.fp-toc-m a{font-size:12.5px;padding:5px 11px;box-shadow:none!important;backdrop-filter:none;-webkit-backdrop-filter:none}
  .fp-toc.fp-toc-m a.on{background:#2f63e6!important;border-color:#2f63e6!important;color:#fff!important}
  .fp-sec{scroll-margin-top:160px}
}
/* plan comparison on phones: the group rows stay pinned with the feature names, no white line in dark mode */
@media (max-width:760px){.pl-t .pl-area .pl-f{position:sticky!important;left:0;z-index:2}}
html[data-theme=dark] .pl-t .pl-f{border-right-color:rgba(255,255,255,.08)!important}
/* legal pages: the contents card has room inside; a table without headings shows no empty heading row;
   on phones the first column stays in view while the rest scrolls */
.inner-prose.legal .legal-toc{padding:18px 22px!important}
.inner-prose.legal thead:not(:has(th:not(:empty))){display:none}
.inner-prose.legal table{overflow:clip!important}
@media (max-width:700px){
  .inner-prose.legal table{min-width:560px}
  .inner-prose.legal table:not(:has(:is(th,td):nth-child(3))){min-width:0}
  .inner-prose.legal :is(td,th):first-child{position:sticky;left:0;z-index:1;background:#fff!important;white-space:normal!important;min-width:112px;max-width:132px;box-shadow:1px 0 0 #e3e8f4}
  .inner-prose.legal thead th:first-child{background:#f3f6fd!important}
  .inner-prose.legal tbody tr:nth-child(even) td:first-child{background:#fafbfe!important}
  html[data-theme=dark] .inner-prose.legal :is(td,th):first-child{background:#0b1538!important;box-shadow:1px 0 0 rgba(255,255,255,.08)}
  html[data-theme=dark] .inner-prose.legal thead th:first-child{background:#131f52!important}
  html[data-theme=dark] .inner-prose.legal tbody tr:nth-child(even) td:first-child{background:#0d1a40!important}
}
/* Together: the chosen day is clearly marked */
.v2 .tg-tabs button[aria-selected=true],html[data-theme] .v2 .tg-tabs button[aria-selected=true]{background:#2f63e6!important;color:#fff!important;box-shadow:0 6px 16px -8px rgba(47,99,230,.6)}
@media (max-width:600px){.v2 .tg-tabs{border-radius:24px}}
@media (max-width:760px){.pg>.fx-band.hm-sp{padding:26px 16px 20px!important}}
/* legal tables of three or more columns on phones: each row a card, each cell under its column's name, nothing to swipe */
@media (max-width:700px){
  .inner-prose .legal-table.wide{overflow:visible}
  .inner-prose.legal .wide table{min-width:0!important;display:block;border:0!important;border-radius:0;overflow:visible!important}
  .inner-prose.legal .wide thead{display:none}
  .inner-prose.legal .wide tbody{display:flex;flex-direction:column;gap:12px}
  .inner-prose.legal .wide tr{display:block;border:1px solid #e3e8f4;border-radius:16px;padding:14px 16px;background:#fff}
  .inner-prose.legal .wide :is(td,td:first-child){display:block;position:static!important;min-width:0!important;max-width:none!important;white-space:normal!important;box-shadow:none!important;background:none!important;border:0!important;padding:0!important}
  .inner-prose.legal .wide td+td{margin-top:10px}
  .inner-prose.legal .wide td:first-child{font-size:16px}
  .inner-prose.legal .wide td+td::before{content:attr(data-l);display:block;margin-bottom:2px;font:600 11px/1.3 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#56627f}
  .inner-prose.legal .wide td[data-l=""]::before{content:none}
  html[data-theme=dark] .inner-prose.legal .wide tr{background:#0f1c46;border-color:rgba(170,190,255,.14)}
  html[data-theme=dark] .inner-prose.legal .wide td+td::before{color:#9fb0d8}
}
@media (max-width:700px){html[data-theme] .inner-prose.legal .wide tbody tr td,html[data-theme] .inner-prose.legal .wide tbody tr:nth-child(even) td:first-child{background:none!important}}
/* dark header on every site (family site uses .nav): no white edge, a faint bottom line */
html[data-theme=dark] :is(.nav,.pnav).stuck{box-shadow:0 10px 30px -22px rgba(0,0,0,.6)!important;border-top:0!important;border-bottom-color:rgba(255,255,255,.08)!important}
/* "The same rules" rows on phones: the blue lines line up with the heading instead of touching the screen edge */
@media (max-width:760px){.c63{margin-left:0!important;margin-right:0!important}}
html[data-theme=dark] :is(.v2,.pg-inner,body) :is(.nav.nav-solid.stuck,.nav.nav-fix.stuck,.nav.stuck,.pnav.stuck){box-shadow:0 10px 30px -22px rgba(0,0,0,.6)!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
/* legal tables: the first column wraps (some first cells are whole sentences), so every column fits the page */
@media (min-width:701px){.inner-prose.legal td:first-child{white-space:normal!important;min-width:140px;max-width:300px;width:26%}}
/* inner pages: the hero's colour runs up behind the header, so the header is see-through at the top of the page
   (light and dark) and turns to glass only once the page scrolls (owner 2026-11-04) */
body:has(main.pg>.v2-head+.c104){padding-top:0!important}
main.pg>.v2-head+.c104{padding-top:152px!important}
@media (max-width:900px){main.pg>.v2-head+.c104{padding-top:120px!important}}
/* at the top of the page the header has no background, line or shadow; .stuck (scrolled) brings the glass */
html[data-theme] :is(.v2,.pg-inner,body) :is(.pnav,.nav.nav-solid,.nav.nav-fix):not(.stuck){background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* the same for Contact, Who it's for, Products and Together: no page padding above, the hero takes the header's height */
body:has(main.pg>.v2-head+:is(.c157,.c125,.v2-prod,.v2-together)){padding-top:0!important}
main.pg>.v2-head+.c157{padding-top:152px!important}
main.pg>.v2-head+.c125{padding-top:136px!important}
main.pg>.v2-head+:is(.v2-prod,.v2-together) .ab-hero:first-child{padding-top:144px!important}
@media (max-width:900px){main.pg>.v2-head+.c157{padding-top:120px!important}main.pg>.v2-head+.c125{padding-top:112px!important}}
/* Together, "Pick two" on phones and narrow windows: each label over its own full-width chooser, centred; the heading
   keeps a margin from the screen edge (owner 2026-11-04) */
@media (max-width:760px){
  .v2 .tg-sh{padding-left:18px;padding-right:18px;box-sizing:border-box}
  .v2 .pk-say{display:flex!important;flex-direction:column!important;align-items:center!important;gap:8px!important;padding:0 18px;box-sizing:border-box}
  .v2 .pk-say .pk-pick{width:min(100%,380px)!important;margin:0!important;box-sizing:border-box}
  .v2 .pk-say .pk-w{margin:6px 0 0!important;text-align:center}
}