/* Site font: Inter, with system fonts as a fallback while it loads. */
/* !important because <body> carries Tailwind's font-sans class, whose injected rule would otherwise win. */
body, .font-sans { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; }

/* Dark theme. Activated by class="dark" on <html> (set in each page's <head>, toggled by js/site.js).
   Overrides the light Tailwind utilities used across the site so pages need no per-element dark: classes. */

html.dark { color-scheme: dark; }
html.dark body { background-color: #020617; color: #e2e8f0; }

/* Surfaces */
html.dark .bg-white { background-color: #0f172a !important; }
html.dark .bg-white\/90 { background-color: rgb(15 23 42 / 0.9) !important; }
html.dark .bg-slate-50 { background-color: #020617 !important; }
html.dark .bg-slate-100 { background-color: #1e293b !important; }
html.dark section.bg-slate-50 { background-color: #0b1120 !important; }
html.dark .bg-orange-50 { background-color: rgb(234 88 12 / 0.12) !important; }
html.dark .bg-orange-100 { background-color: rgb(234 88 12 / 0.2) !important; }
html.dark .bg-amber-50 { background-color: rgb(245 158 11 / 0.12) !important; }
html.dark .bg-emerald-50 { background-color: rgb(16 185 129 / 0.12) !important; }
html.dark .bg-indigo-50 { background-color: rgb(99 102 241 / 0.14) !important; }
html.dark .bg-purple-50 { background-color: rgb(168 85 247 / 0.14) !important; }
html.dark .bg-sky-50 { background-color: rgb(14 165 233 / 0.14) !important; }
html.dark .bg-rose-50 { background-color: rgb(244 63 94 / 0.14) !important; }
html.dark .bg-blue-50 { background-color: rgb(59 130 246 / 0.14) !important; }
html.dark .bg-teal-100, html.dark .bg-blue-100, html.dark .bg-emerald-100 { background-color: rgb(148 163 184 / 0.15) !important; }
html.dark .bg-yellow-200 { background-color: #854d0e !important; color: #fef9c3 !important; }
html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-white:hover { background-color: #1e293b !important; }
html.dark .hover\:bg-slate-100:hover { background-color: #334155 !important; }
html.dark .hover\:bg-orange-100:hover { background-color: rgb(234 88 12 / 0.25) !important; }
html.dark .bg-orange-100.blur-3xl { opacity: 0.15 !important; }

/* Text */
html.dark .text-slate-900 { color: #f1f5f9 !important; }
html.dark .text-slate-800, html.dark .text-slate-700 { color: #cbd5e1 !important; }
html.dark .text-slate-600 { color: #94a3b8 !important; }
html.dark .text-slate-500 { color: #8190a6 !important; }
html.dark .text-orange-700 { color: #fdba74 !important; }
html.dark .text-orange-600 { color: #fb923c !important; }
html.dark .text-amber-800, html.dark .text-amber-900 { color: #fcd34d !important; }
html.dark .text-emerald-700 { color: #6ee7b7 !important; }
html.dark .text-indigo-700 { color: #a5b4fc !important; }
html.dark .text-purple-700 { color: #d8b4fe !important; }
html.dark .text-sky-700 { color: #7dd3fc !important; }
html.dark .text-rose-700 { color: #fda4af !important; }
html.dark .text-blue-900 { color: #bfdbfe !important; }

/* Borders */
html.dark .border-slate-200, html.dark .border-slate-100 { border-color: #1e293b !important; }
html.dark .border-slate-300 { border-color: #334155 !important; }
html.dark .border-orange-200, html.dark .border-orange-100 { border-color: rgb(234 88 12 / 0.35) !important; }
html.dark .border-amber-200 { border-color: rgb(245 158 11 / 0.35) !important; }
html.dark .border-emerald-200 { border-color: rgb(16 185 129 / 0.35) !important; }
html.dark .border-indigo-200, html.dark .border-purple-200, html.dark .border-sky-200, html.dark .border-rose-200, html.dark .border-blue-100 { border-color: rgb(148 163 184 / 0.3) !important; }
html.dark .divide-slate-100 > * + * { border-color: #1e293b !important; }
html.dark .border-l-slate-100, html.dark ol.border-slate-100 { border-color: #1e293b !important; }

/* Coloured chips and highlights used on the feature pages */
html.dark .bg-red-100 { background-color: rgb(239 68 68 / 0.18) !important; }
html.dark .bg-amber-100 { background-color: rgb(245 158 11 / 0.18) !important; }
html.dark .bg-purple-100 { background-color: rgb(168 85 247 / 0.18) !important; }
html.dark .bg-slate-200 { background-color: #334155 !important; }
html.dark .text-red-700 { color: #fca5a5 !important; }
html.dark .text-amber-700 { color: #fcd34d !important; }
html.dark .text-purple-700 { color: #d8b4fe !important; }
html.dark .text-blue-800 { color: #93c5fd !important; }
html.dark .text-orange-800 { color: #fdba74 !important; }
html.dark .text-emerald-800 { color: #a7f3d0 !important; }
html.dark .border-red-200 { border-color: rgb(239 68 68 / 0.35) !important; }
html.dark .border-emerald-200 { border-color: rgb(16 185 129 / 0.35) !important; }

/* Form fields */
html.dark input, html.dark select, html.dark textarea { background-color: #0b1120 !important; color: #e2e8f0 !important; border-color: #334155 !important; }
html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; }

/* Keep solid brand buttons and already-dark sections as they are */
html.dark .bg-orange-600 { background-color: #ea580c !important; }
html.dark .bg-slate-900 { background-color: #1e293b !important; }
html.dark .bg-slate-950 { background-color: #000814 !important; }
html.dark .shadow-xl, html.dark .shadow-lg, html.dark .shadow-2xl { box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.7) !important; }

/* Product screenshots: each has a light and a dark version; show the one matching the current theme */
/* Paired crops share a frame height; the gap is filled with the app's own background (white / #0c0f19). */
.shot-frame { background-color: #ffffff; }
html.dark .shot-frame { background-color: #0c0f19 !important; }
.shot-light { display: block; }
.shot-dark { display: none; }
html.dark .shot-light { display: none; }
html.dark .shot-dark { display: block; }

/* "The problem" illustration on the home page (js/problem-art.js): one PowerTrail whose event cards start as a scattered
   pile — each tagged with where it's stuck today — and settle into date order on a timeline as the section scrolls into view.
   The cards are modelled on the app's event view. */
.problem-stage { position: relative; }
.pa-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px 48px; font-size: 13px; font-weight: 700; color: #9a3412; }
.pa-head svg { width: 16px; height: 16px; }
.pa-head > span { display: inline-flex; align-items: center; gap: 8px; }
/* Shown once the story has played: runs it again on its own. */
.pa-replay { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid #e2e8f0; border-radius: 999px;
  background: #fff; color: #475569; font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.pa-replay:hover { border-color: #fb923c; color: #c2410c; }
.pa-replay[hidden] { display: none; }
.pa-replay svg { width: 13px; height: 13px; }
html.dark .pa-replay { background: #0f172a; border-color: #334155; color: #cbd5e1; }
html.dark .pa-replay:hover { border-color: #ea580c; color: #fdba74; }
.pa-trail { position: relative; display: flex; flex-direction: column; gap: 14px; }
.he-spine { position: absolute; top: 10px; bottom: 10px; left: 18px; width: 2px; background: #fdba74; transform-origin: top; }
.he-item { position: relative; padding-left: 48px; }
.he-dot { position: absolute; left: 12px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--c, #fb923c);
  border: 3px solid #fff; box-shadow: 0 0 0 1px var(--cl, #fdba74); }
.he-dot.is-next { background: #fff; border-color: var(--c, #fb923c); box-shadow: none; }
/* (no will-change on the cards: it would trap a flying piece beneath the windows) */
[data-tgt], .pa-head, .he-spine { will-change: transform, opacity; }
.hero-event { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; background: #fff;
  border: 1px solid #e8edf3; border-left: 3px solid var(--cl, #fdba74); border-radius: 10px; padding: 14px 16px 16px;
  box-shadow: 0 18px 36px -24px rgb(15 23 42 / 0.3); width: 100%; max-width: 440px; font-size: 14px; line-height: 1.4; color: #334155; }
/* Where the paper is stuck today (WhatsApp, a folder, Excel, a diary); fades out as the card joins the trail. */
.he-src { position: absolute; top: -10px; right: 14px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  color: #fff; background: #334155; border-radius: 999px; padding: 3px 9px; box-shadow: 0 4px 10px rgb(15 23 42 / 0.2); }
.he-src svg { width: 12px; height: 12px; }
.he-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #64748b; }
.he-when { font-weight: 700; color: var(--c, #ea580c); }
.he-top svg { width: 14px; height: 14px; color: #94a3b8; }
.he-top svg.is-done { color: #16a34a; }
.he-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: #334155; border-radius: 5px; padding: 2px 7px; }
.he-title { font-size: 16px; font-weight: 600; color: #0f172a; }
.he-note { font-size: 13px; color: #64748b; margin-top: -2px; }
.he-file { display: flex; align-items: center; gap: 10px; margin-top: 4px; width: 100%; border: 1px solid #e2e8f0; border-radius: 8px; padding: 7px 10px; background: #f8fafc; }
.he-file b { display: block; font-size: 12.5px; font-weight: 600; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.he-file small { display: block; font-size: 11px; color: #94a3b8; }
.he-thumb { flex: none; width: 28px; height: 34px; border-radius: 4px; background: #fff; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; color: #94a3b8; }
.he-thumb svg { width: 15px; height: 15px; }
.he-remind { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; color: var(--c, #9a3412); background: var(--cbg, #fff7ed); border-radius: 6px; padding: 4px 8px; }
.he-remind svg { width: 13px; height: 13px; }
/* The mess the trail is made from: an inbox, a WhatsApp chat, a folder and a deadline sheet, overlapping and askew. */
.pa-sources { position: absolute; inset: 0; z-index: 20; pointer-events: none; } /* above the cards until it fades */
.pa-win { position: absolute; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; padding-bottom: 8px;
  box-shadow: 0 16px 34px -18px rgb(15 23 42 / 0.35); transform: rotate(var(--r)); font-size: 12px; color: #334155; }
/* Four places for the windows, whatever kind they are. */
.pa-s1 { left: 0; top: 0; width: 66%; }
.pa-s2 { right: 0; top: 13%; width: 52%; }
.pa-s3 { left: 3%; top: 47%; width: 58%; }
.pa-s4 { right: 0; top: 62%; width: 60%; }
.pa-chat { background: #f5f1eb; }
.pa-note { background: #fef9c3; }
.pa-bar.is-note { background: #fde68a; color: #713f12; border-color: #fcd34d; }
.pa-line { padding: 5px 10px; border-bottom: 1px dashed #fde68a; }
.pa-chip-chat { display: flex; width: max-content; max-width: 86%; margin: 5px 10px; background: #fff; }
.pa-bar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; font-weight: 700; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
.pa-bar.is-wa { background: #d9fdd3; color: #166534; }
.pa-bar.is-xl { background: #e3f1e8; color: #14532d; }
.pa-win svg { width: 13px; height: 13px; flex: none; }
.pa-mrow { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #f1f5f9; }
.pa-mrow b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-mrow span { flex: none; color: #64748b; }
.pa-win .is-old { opacity: 0.55; }
.pa-chip { display: inline-flex; align-items: center; gap: 5px; margin: 6px 10px 2px; padding: 4px 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; font-weight: 600; }
.pa-day { display: block; width: max-content; margin: 8px auto 4px; padding: 2px 8px; border-radius: 6px; background: #e2e8f0; font-size: 11px; }
.pa-bubble { width: max-content; max-width: 86%; margin: 5px 10px; padding: 6px 9px; border-radius: 8px; background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / 0.08); }
.pa-bubble.is-me { margin-left: auto; background: #d9fdd3; }
.pa-files { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 10px 0; }
.pa-doc { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 6px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-win table { width: 100%; border-collapse: collapse; }
.pa-win th, .pa-win td { border: 1px solid #e2e8f0; padding: 4px 8px; text-align: left; }
.pa-win th { background: #f8fafc; font-weight: 700; }
/* A piece flying from its window to its card passes over everything else. */
[data-tgt] { transform-origin: top left; }
[data-tgt].is-flying { position: relative; z-index: 30; }
html.dark .pa-win { background: #111a2e; border-color: #1e293b; color: #cbd5e1; box-shadow: 0 16px 34px -18px rgb(0 0 0 / 0.7); }
html.dark .pa-chat { background: #0f1b2a; }
html.dark .pa-bar { background: #1e293b; border-color: #1e293b; }
html.dark .pa-bar.is-wa, html.dark .pa-bar.is-xl { background: rgb(22 163 74 / 0.2); color: #86efac; }
html.dark .pa-mrow { border-color: #1e293b; }
html.dark .pa-chip, html.dark .pa-doc, html.dark .pa-bubble { background: #0f172a; border-color: #1e293b; }
html.dark .pa-bubble.is-me { background: rgb(22 163 74 / 0.25); }
html.dark .pa-day { background: #1e293b; }
html.dark .pa-win th, html.dark .pa-win td { border-color: #1e293b; }
html.dark .pa-win th { background: #0f172a; }
html.dark .pa-note { background: #1f1d12; }
html.dark .pa-bar.is-note { background: rgb(234 179 8 / 0.2); color: #fde68a; border-color: rgb(234 179 8 / 0.3); }
html.dark .pa-line { border-color: rgb(234 179 8 / 0.2); }
html.dark .pa-head { color: #fdba74; }
html.dark .he-spine { background: rgb(234 88 12 / 0.55); }
html.dark .he-dot { border-color: #0b1120; box-shadow: 0 0 0 1px var(--cd, rgb(234 88 12 / 0.5)); }
html.dark .he-dot.is-next { background: #0b1120; border-color: var(--c, #ea580c); box-shadow: none; }
html.dark .hero-event { background: #111a2e; border-color: #1e293b; border-left-color: var(--cd, rgb(234 88 12 / 0.5)); color: #cbd5e1; box-shadow: 0 18px 36px -24px rgb(0 0 0 / 0.6); }
html.dark .he-src { background: #475569; }
html.dark .he-title { color: #e2e8f0; }
html.dark .he-note, html.dark .he-top { color: #94a3b8; }
html.dark .he-when { color: var(--cl, #fdba74); }
html.dark .he-file { background: #0f172a; border-color: #1e293b; }
html.dark .he-file b { color: #cbd5e1; }
html.dark .he-thumb { background: #0b1120; border-color: #1e293b; }
html.dark .he-remind { background: var(--cdb, rgb(234 88 12 / 0.12)); color: var(--cl, #fdba74); }
html.dark .he-tag { background: #475569; }
/* Section separators: solid in the middle, fading out towards both screen edges. */
body > :is(section, header).border-slate-200 {
  border-image: linear-gradient(to right, transparent, #e2e8f0 25%, #e2e8f0 75%, transparent) 1; }
html.dark body > :is(section, header).border-slate-200 {
  border-image: linear-gradient(to right, transparent, #1e293b 25%, #1e293b 75%, transparent) 1; }

/* Desktop: the page margins are one even surface (white, or the hero's navy in dark mode) and the tinted bands fade
   into it towards the screen edges, so the page reads as one calm surface. */
@media (min-width: 1024px) {
  html:not(.dark) body.bg-slate-50 { background-color: #fff !important; }
  html.dark body.bg-slate-50 { background-color: #0f172a !important; }
  html:not(.dark) body > section.bg-slate-50 { background: linear-gradient(to right, transparent, #f8fafc 18%, #f8fafc 82%, transparent) !important; }
  html.dark body > section.bg-slate-50 { background: linear-gradient(to right, transparent, #0b1120 18%, #0b1120 82%, transparent) !important; }
}

/* Static hero: a soft warm wash from both sides, white in the middle behind the text,
   blending into the page at the bottom. */
body > header.hero-blend { background-image: linear-gradient(to bottom, transparent 55%, #fff),
  linear-gradient(to right, #ffedd5 0%, rgb(255 237 213 / 0) 32%, rgb(255 237 213 / 0) 68%, #ffedd5 100%); }
body > header.hero-blend > .blur-3xl { display: none; } /* the wash replaces the corner glow, which ended in a hard edge */
html.dark body > header.hero-blend { background-image: linear-gradient(to bottom, transparent 55%, #0f172a),
  linear-gradient(to right, rgb(234 88 12 / 0.14) 0%, rgb(234 88 12 / 0) 32%, rgb(234 88 12 / 0) 68%, rgb(234 88 12 / 0.14) 100%); }

/* Dark mode: the dark feature bands would melt into the dark page, so they get a lighter shade and hairline edges. */
html.dark body > section:is(.bg-slate-950, .bg-slate-900) { background-color: #16203a !important;
  border-top: 1px solid rgb(148 163 184 / 0.16); border-bottom: 1px solid rgb(148 163 184 / 0.16); }

/* Keyboard access: a "Skip to content" link that appears on the first Tab, and a clear focus ring on links, cards and buttons. */
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 100; background: #fff; color: #9a3412; font-weight: 700;
  padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgb(15 23 42 / 0.18); }
.skip-link:focus { left: 16px; }
#main:focus { outline: none; }
:focus-visible { outline: 2px solid #ea580c; outline-offset: 3px; }
a.rounded-2xl:focus-visible, a.rounded-3xl:focus-visible, a.rounded-xl:focus-visible { outline-offset: 2px; }
html.dark .skip-link { background: #1e293b; color: #fdba74; }

/* Solution pages: one large object on each side of the hero headline (no text), cropped by the screen edge or the bottom
   of the hero — so a visitor sees at a glance who the page is for. One palette everywhere, from the site's own orange
   theme. Wide screens only, where the objects sit clear of the text. */
.hero-motif { --col: 448px; position: absolute; inset: 0; z-index: 0; pointer-events: none; display: none; overflow: hidden; } /* --col: half the text column */
.hero-motif .mo { --mw: clamp(340px, 24vw, 460px); position: absolute; top: 46%; width: var(--mw); height: auto; transform: translateY(-38%); }
/* Each object ends at least 48px outside the text column and is cropped by the screen edge instead. */
/* Each object ends at least 48px outside the text column and is cropped by the screen edge instead. */
.hero-motif .mo-big { --mw: clamp(400px, 30vw, 560px); } /* a single object on one side can be larger */
.hero-motif .mo-l { left: calc(50% - var(--col) - 48px - var(--mw)); }
.hero-motif .mo-r { right: calc(50% - var(--col) - 48px - var(--mw)); }
.mo * { fill: none; }
/* Kept light so the artwork sets the scene without pulling the eye from the headline. */
.mo .ln { stroke: #fde2c6; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
html.dark .hero-motif .mo { opacity: 0.1; }
@media (min-width: 1280px) { .hero-motif { display: block; } }
/* Theme toggle icon swap */
.theme-icon-dark { display: none; }
html.dark .theme-icon-light { display: none; }
html.dark .theme-icon-dark { display: inline-block; }

/* Readable small text (WCAG AA 4.5:1) in light mode: orange-600 and slate-400 are too pale on white,
   so text uses orange-700 / slate-500. Inside dark sections the lighter shades read better, so they're restored there. */
html:not(.dark) .text-orange-600:not(svg) { color: #c2410c; }
html:not(.dark) .text-slate-400:not(svg) { color: #64748b; }
html:not(.dark) :is(.bg-slate-900, .bg-slate-950, .bg-teal-950, .bg-indigo-950) :is(.text-slate-400, .text-slate-500):not(svg),
html:not(.dark) :is(.bg-slate-900, .bg-slate-950, .bg-teal-950, .bg-indigo-950).text-slate-400 { color: #94a3b8; }
html:not(.dark) :is(.bg-slate-900, .bg-slate-950, .bg-teal-950, .bg-indigo-950) .text-orange-600:not(svg) { color: #fb923c; }
/* A white card inside a dark frame (the phone mock-up) is light again. */
html:not(.dark) :is(.bg-slate-900, .bg-slate-950) .bg-white .text-slate-400:not(svg) { color: #64748b; }
html:not(.dark) .text-emerald-600:not(svg) { color: #047857; }
html:not(.dark) .text-amber-600:not(svg) { color: #b45309; }
html:not(.dark) .text-sky-600:not(svg) { color: #0369a1; }

/* Orange buttons and badges: white text needs orange-700 to reach 4.5:1 (orange-600 gives 3.6). */
.bg-orange-600, html.dark .bg-orange-600 { background-color: #c2410c !important; }
.hover\:bg-orange-700:hover { background-color: #9a3412 !important; }