/* ==========================================================================
   MORNING METRICS — DESIGN TOKENS
   The brand system. Every surface in every deliverable reads from this file.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. COLOR — light (default)
   -------------------------------------------------------------------------- */
:root{
  --bg:#FFFFFF;
  --bg2:#FAFAFC;
  --card:#FFFFFF;
  --c2:#F4F2FE;
  --ink:#151320;
  --txt:#6B6878;
  --mut:#8B8798;
  --fnt:#A9A5B8;
  --bd:#E7E5EE;
  --bd2:#F0EEF5;
  --nav:#3E3B4D;
  --chrome:#FBFAFD;
  --pill:#F3F1F8;
  --grn:#16A34A;
  --band:#151320;
  --tile:#F7F6FA;
  --tilebd:#EFEDF4;
  /* Section bands. --wash is the hero gradient's own top tint, so a tinted
     section reads as the same family rather than a different colour. */
  --wash:#F6F5FB;
  --wash2:#F1EEFC;
  --ov:255,255,255;
  /* Tint at the top, resolving to the page background at the bottom, so a hero
     never steps to a different colour where the next section begins. */
  --hero:linear-gradient(180deg,#F6F5FB,#FFFFFF);
  --link:#5B4FE9;

  /* Brand constants — identical in both themes */
  --purple:#5B4FE9;
  --purple-hover:#4438D6;
  --purple-lt:#7C74F0;
  --purple-2:#A855F7;
  --purple-soft:#A79FF5;
  --pink:#EC4899;
  --amber:#F59E0B;
  --lime:#B5DB17;
  --inkc:#151320;

  --sunrise:linear-gradient(90deg,#F59E0B,#EC4899,#5B4FE9);
  --sun-fill:linear-gradient(180deg,#FFD08A 0%,#F59E0B 26%,#EC4899 64%,#A855F7 100%);

  /* Semantic pairs — background / text */
  --signal-bg:#FEF3E2;   --signal-tx:#B45309;
  --fix-bg:#FDECF3;      --fix-tx:#BE185D;
  --good-bg:#EEF7E6;     --good-tx:#3F7A1F;
  --growth-bg:#F4F2FE;   --growth-tx:#5B4FE9;
  --danger-tx:#DC2626;   --danger-bd:#FCA5A5;
  --absent:#C9C5D6;
  --spend:#CBC7DB;

  /* Elevation — ink-tinted, never pure black in light mode */
  --sh-hero:0 40px 90px rgba(21,19,32,.2);
  --sh-float:0 24px 60px rgba(21,19,32,.22);
  --sh-auth:0 30px 70px rgba(21,19,32,.12);
  --sh-modal:0 40px 90px rgba(0,0,0,.35);
  --sh-drop:0 16px 44px rgba(21,19,32,.18);
  --sh-kpi:0 14px 40px rgba(21,19,32,.08);
  --sh-dark:0 50px 100px rgba(0,0,0,.5);

  /* Motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-data:cubic-bezier(.2,.8,.2,1);

  /* Type */
  --f-display:"Outfit","Segoe UI",system-ui,sans-serif;
  --f-body:"Manrope","Segoe UI",system-ui,sans-serif;

  color-scheme:light;
}

/* --------------------------------------------------------------------------
   2. COLOR — dark
   -------------------------------------------------------------------------- */
[data-theme="dark"]{
  --bg:#131120;
  --bg2:#191627;
  --card:#1D1A2B;
  --c2:#2B2840;
  --ink:#FFFFFF;
  --txt:#B7B2C7;
  --mut:#8B8798;
  --fnt:#6F6B80;
  --bd:rgba(255,255,255,.12);
  --bd2:rgba(255,255,255,.07);
  --nav:#C5C1D4;
  --chrome:#232032;
  --pill:#2B2840;
  --grn:#4ADE80;
  --band:#1D1A2B;
  --tile:#1D1A2B;
  --tilebd:#2B2840;
  --wash:#191627;
  --wash2:#201C33;
  --ov:19,17,32;
  --hero:linear-gradient(180deg,#191627,#131120);
  --link:#A79FF5;

  --sunrise:linear-gradient(90deg,#F59E0B,#EC4899,#7C74F0);

  --signal-bg:#3A2B14;   --signal-tx:#FAB828;
  --fix-bg:#3A1E2C;      --fix-tx:#F9A8D4;
  --good-bg:#26331A;     --good-tx:#B5DB17;
  --growth-bg:#2B2840;   --growth-tx:#A79FF5;
  --danger-tx:#F87171;   --danger-bd:#7F1D1D;
  --absent:#5A5670;
  --spend:#4A4660;

  --sh-hero:0 40px 90px rgba(0,0,0,.5);
  --sh-float:0 24px 60px rgba(0,0,0,.5);
  --sh-auth:0 30px 70px rgba(0,0,0,.45);
  --sh-drop:0 16px 44px rgba(0,0,0,.5);
  --sh-kpi:0 14px 40px rgba(0,0,0,.3);

  color-scheme:dark;
}

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* The off-canvas drawer is position:fixed, so its containing block is the
     viewport — clipping it has to happen here, not on body. `clip` rather than
     `hidden` so this never becomes a scroll container and breaks position:sticky. */
  overflow-x:clip;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip, not hidden: an off-canvas drawer must not widen the document, but
     `hidden` would make body a scroll container and break position:sticky. */
  overflow-x:clip;
}
h1,h2,h3,h4,h5,h6{font-family:var(--f-display);margin:0;font-weight:700;color:var(--ink)}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
img,svg{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--bd2);margin:0}

/* Numbers never jitter */
.num,[data-count],.kpi-v,.stat-v{font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
::selection{background:rgba(91,79,233,.18)}

/* --------------------------------------------------------------------------
   4. THE MARK — sunrise semicircle (always 2:1)
   -------------------------------------------------------------------------- */
.mm-mark{display:block;width:30px;height:15px;border-radius:15px 15px 0 0;background:var(--sunrise);flex:none}
.mm-mark.sm{width:22px;height:11px;border-radius:11px 11px 0 0}
.mm-mark.ft{width:26px;height:13px;border-radius:13px 13px 0 0}
.mm-mark.lg{width:44px;height:22px;border-radius:22px 22px 0 0}
.mm-mark.xl{width:64px;height:32px;border-radius:32px 32px 0 0}

.mm-wordmark{font-family:var(--f-display);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--ink);line-height:1}
.mm-logo{display:inline-flex;align-items:flex-end;gap:9px}

/* Animated sun variant — disc over horizon */
.mm-sun{position:relative;width:56px;height:36px;overflow:hidden;flex:none}
.mm-sun i{
  position:absolute;left:50%;bottom:6px;width:34px;height:34px;margin-left:-17px;
  border-radius:50%;background:var(--sun-fill);
  box-shadow:0 -2px 14px rgba(236,72,153,.35);
  transition:filter .9s ease;
}
.mm-sun b{position:absolute;left:0;right:0;bottom:5px;height:2px;background:linear-gradient(90deg,transparent,var(--bd),transparent)}
.mm-sun.thinking i{filter:hue-rotate(-25deg) saturate(1.35)}
.mm-sun.writing i{filter:hue-rotate(20deg) brightness(1.12)}
.mm-sun.sm{width:34px;height:22px}
.mm-sun.sm i{width:20px;height:20px;margin-left:-10px;bottom:4px}
@keyframes mmRise{0%,100%{transform:translateY(8%)}50%{transform:translateY(0)}}
@media (prefers-reduced-motion:no-preference){
  .mm-sun i{animation:mmRise 5s ease-in-out infinite}
}

/* --------------------------------------------------------------------------
   5. SIGNATURE EFFECTS
   -------------------------------------------------------------------------- */
.ribbon{height:3px;background:var(--sunrise)}
.ribbon-a{height:3px;background:linear-gradient(90deg,#F59E0B,#EC4899)}
.ribbon-b{height:3px;background:linear-gradient(90deg,#EC4899,#5B4FE9)}
.hairline-r{height:2px;background:linear-gradient(90deg,transparent,#5B4FE9)}
.hairline-l{height:2px;background:linear-gradient(90deg,#5B4FE9,transparent)}

.glow{
  position:absolute;display:block;pointer-events:none;z-index:0;
  width:1100px;height:520px;
  background:radial-gradient(closest-side,rgba(91,79,233,.14),rgba(236,72,153,.05) 60%,transparent);
}
.glow-warm{background:radial-gradient(closest-side,rgba(245,158,11,.16),rgba(236,72,153,.1) 45%,rgba(91,79,233,.06) 70%,transparent)}
.stripe{background:repeating-linear-gradient(-45deg,var(--bg2),var(--bg2) 14px,var(--c2) 14px,var(--c2) 28px)}

/* Ribbon shimmer on hover */
.has-sweep > .ribbon{background-size:200% 100%}
@media (prefers-reduced-motion:no-preference){
  .has-sweep > .ribbon{transition:background-position .6s var(--ease)}
  .has-sweep:hover > .ribbon{background-position:100% 0}
}

/* Animated conic border — max ONE per page */
@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.conic{position:relative;isolation:isolate}
.conic::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--angle),transparent 78%,#F59E0B,#EC4899,#5B4FE9);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;z-index:2;
}
@keyframes mmSpin{to{--angle:360deg}}
@media (prefers-reduced-motion:no-preference){
  .conic::before{animation:mmSpin 6s linear infinite}
}

/* Pointer spotlight */
.spot{position:relative}
.spot::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(91,79,233,.07),transparent);
}
[data-theme="dark"] .spot::after{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(167,159,245,.09),transparent)}
.spot:hover::after{opacity:1}

/* --------------------------------------------------------------------------
   6. SCROLL REVEAL
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
  .rv.in-view{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* --------------------------------------------------------------------------
   7. SHARED PRIMITIVES
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-body);font-weight:700;font-size:15px;line-height:1;
  border-radius:10px;padding:14px 26px;
  transition:transform .16s var(--ease),background .16s,border-color .16s,box-shadow .16s,color .16s;
  cursor:pointer;white-space:nowrap;text-align:center;
}
.btn:active{transform:scale(.98)}
.btn-p{background:var(--purple);color:#fff}
.btn-p:hover{background:var(--purple-hover)}
.btn-s{background:var(--card);color:var(--ink);border:2px solid var(--bd);padding:12px 24px}
.btn-s:hover{border-color:var(--purple)}
.on-dark .btn-s{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.on-dark .btn-s:hover{border-color:rgba(255,255,255,.45)}
.btn-t{border:1px solid var(--bd);border-radius:9px;font-weight:700;font-size:12px;padding:8px 14px;color:var(--ink);background:var(--card)}
.btn-t:hover{border-color:var(--purple);color:var(--link)}
.btn-d{border:2px solid var(--danger-bd);color:var(--danger-tx);background:transparent;border-radius:10px;font-weight:700;font-size:14px;padding:11px 20px}
.btn-d:hover{background:var(--fix-bg)}
.btn-lg{padding:16px 30px;font-size:17px}
.btn-sm{padding:9px 16px;font-size:13px;border-radius:9px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn[disabled]:active{transform:none}

.tlink{font-weight:700;font-family:var(--f-body);color:var(--link);display:inline-flex;align-items:center;gap:5px}
.tlink .ar{transition:transform .2s var(--ease);display:inline-block}
.tlink:hover .ar{transform:translateX(3px)}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;line-height:1.5;white-space:nowrap;
}
.p-signal{background:var(--signal-bg);color:var(--signal-tx)}
.p-fix{background:var(--fix-bg);color:var(--fix-tx)}
.p-good{background:var(--good-bg);color:var(--good-tx)}
.p-growth{background:var(--growth-bg);color:var(--growth-tx)}
.p-mut{background:var(--pill);color:var(--mut)}
.p-ink{background:var(--inkc);color:#fff}
.p-lime{background:var(--lime);color:#151320}
.p-out{border:1px solid var(--bd);color:var(--mut)}
.p-dash{border:1.5px dashed var(--bd);color:var(--mut)}

.eyebrow{font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink)}
.on-dark .eyebrow{color:#FAB828}
.micro{font-family:var(--f-body);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.fnote{font-weight:500;font-size:13px;color:var(--mut)}

.inp{
  width:100%;background:var(--bg2);border:1px solid var(--bd);border-radius:10px;
  padding:12px 15px;font-family:var(--f-body);font-weight:600;font-size:14px;color:var(--ink);
  transition:border-color .16s,box-shadow .16s;
}
.inp::placeholder{color:var(--fnt);font-weight:500}
.inp:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(91,79,233,.14)}
.inp.bad{border-color:var(--danger-bd)}
.lbl{display:block;font-weight:600;font-size:12.5px;color:var(--nav);margin-bottom:7px}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}

.tgl{position:relative;display:block;width:34px;height:20px;border-radius:999px;background:var(--bd);transition:background .15s;flex:none;cursor:pointer}
.tgl i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tgl[aria-checked="true"],.tgl.on{background:var(--purple)}
.tgl[aria-checked="true"] i,.tgl.on i{left:16px}

.seg{display:inline-flex;border:1px solid var(--bd);border-radius:11px;padding:3px;gap:2px;background:var(--card)}
.seg button{font-weight:700;font-size:12.5px;padding:7px 14px;border-radius:8px;color:var(--mut);transition:background .16s,color .16s;font-family:var(--f-body)}
.seg button[aria-pressed="true"]{background:var(--purple);color:#fff}
.seg.round,.seg.round button{border-radius:999px}
.seg.ink button[aria-pressed="true"]{background:var(--inkc);color:#fff}

.dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
.d-good{background:var(--lime)}
.d-warn{background:var(--amber)}
.d-fix{background:var(--pink)}
.d-mut{background:var(--absent)}
.d-grn{background:var(--grn)}

/* Layout primitives — shared by the marketing site and the app.
   These live here, not in marketing.css, because app.html does not load marketing.css. */
.row{display:flex;align-items:center;gap:8px}
.row-w{display:flex;flex-wrap:wrap;gap:6px}
.strip{
  border:1px solid var(--bd2);border-radius:12px;padding:13px 16px;
  font-weight:600;font-size:13px;line-height:1.6;color:var(--txt);background:var(--card);
}
.strip a{color:var(--link);font-weight:700}
.card-tint{background:var(--c2);border-color:transparent}

.ichip{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  color:#fff;font-family:var(--f-display);font-weight:700;font-size:15px;flex:none;overflow:hidden;
}
.ichip.sm{width:28px;height:28px;border-radius:8px;font-size:12px}
.ichip.lg{width:52px;height:52px;border-radius:14px;font-size:20px}

.legend{display:flex;flex-wrap:wrap;gap:14px}
.legend div{display:flex;align-items:center;gap:6px;font-weight:600;font-size:11.5px;color:var(--txt)}
.legend i{width:10px;height:10px;border-radius:3px;display:block;flex:none}

/* Icons — one uniform stroke set. Never mix in a glyph font. */
.ic{flex:none;display:block}

/* Brand marks sit on a light tile in both themes so dark logos stay legible. */
.ichip.brand{background:var(--tile);border:1px solid var(--tilebd);color:var(--ink);padding:0}
[data-theme="dark"] .ichip.brand{background:rgba(255,255,255,.94);border-color:transparent}
.ichip.brand svg{display:block}

.caret{transition:transform .2s var(--ease);display:inline-block}
.open > .caret{transform:rotate(180deg)}

.theme-tgl{display:inline-flex;border:1px solid var(--bd);border-radius:999px;padding:3px;background:var(--card)}
.theme-tgl button{width:28px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:12px;color:var(--mut);transition:background .16s,color .16s}
.theme-tgl button[aria-pressed="true"]{background:var(--c2);color:var(--link)}

@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.pop-in{animation:pop .28s var(--ease)}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);display:inline-block;flex:none}
/* Static sibling of .live-dot. The product is a daily batch, not a stream —
   only genuinely in-progress states (the first sync) are allowed to pulse. */
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--grn);display:inline-block;flex:none}
@media (prefers-reduced-motion:no-preference){.live-dot{animation:pulse 1.8s ease-in-out infinite}}

/* Accordion */
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.acc-body > div{overflow:hidden}
.acc.open .acc-body{grid-template-rows:1fr}

/* Cross-document transitions — pure enhancement */
@view-transition{navigation:auto}