/* Maplelirium — shared styles. Brand: TaskingU navy (#1F3F8C) + maple red. */
@font-face { font-family:"Bricolage Grotesque"; src:url("fonts/bricolage.woff2") format("woff2"); font-weight:200 800; font-display:swap; }
@font-face { font-family:"Inter"; src:url("fonts/inter.woff2") format("woff2"); font-weight:100 900; font-display:swap; }

:root {
  --navy-950:#0B1A3A;
  --navy-900:#122A63;
  --navy:#1F3F8C;          /* shared with TaskingU */
  --navy-100:#E6ECF8;
  --red:#D93A2B;
  --red-700:#B82E21;
  --ink:#101B33;
  --paper:#FFFFFF;
  --wash:#F4F6FB;
  --mist:#55637D;
  --line:#E1E7F1;
  --ok:#1C7C4D;
  --ok-bg:#E5F4EC;
  --dev:#8A5A00;
  --dev-bg:#FCF1DC;

  --maxw:1120px;
  --gutter:clamp(16px,5vw,64px);
  --header:68px;

  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header) + 12px); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; }
a { color:var(--navy); text-underline-offset:3px; }
a:hover { color:var(--navy-950); }
:focus-visible { outline:3px solid var(--red); outline-offset:3px; border-radius:4px; }
.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.skip { position:absolute; left:-9999px; top:8px; background:var(--navy); color:#fff; padding:8px 14px; border-radius:6px; z-index:100; }
.skip:focus { left:8px; color:#fff; }
.eyebrow { font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--red); margin:0; }

/* header */
.topbar { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.3) blur(8px); -webkit-backdrop-filter:saturate(1.3) blur(8px); border-bottom:1px solid var(--line); }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; height:var(--header); }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--navy-950);
  font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.01em; }
.brand:hover { color:var(--navy-950); }
.brand img { width:32px; height:32px; display:block; }
.nav { display:flex; align-items:center; gap:clamp(12px,3vw,28px); font-size:15px; }
.nav a { text-decoration:none; color:var(--navy-950); font-weight:500; }
.nav a:hover { color:var(--navy); text-decoration:underline; }
.nav a.cta { color:#fff; background:var(--red); padding:8px 16px; border-radius:100px; font-weight:600; }
.nav a.cta:hover { background:var(--red-700); color:#fff; text-decoration:none; }
@media (max-width:480px){ .brand span { display:none; } .nav { gap:14px; font-size:14px; } .nav a.cta { padding:7px 13px; } }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; cursor:pointer;
  font:600 15px/1 var(--font-body); padding:14px 22px; border-radius:100px; border:1px solid transparent;
  transition:background .18s,border-color .18s,color .18s; }
.btn-primary { background:var(--red); color:#fff; }
.btn-primary:hover { background:var(--red-700); color:#fff; }
.btn-light { background:#fff; color:var(--navy-950); }
.btn-light:hover { background:var(--navy-100); color:var(--navy-950); }
.btn-ghost { border-color:rgba(255,255,255,.45); color:#fff; background:transparent; }
.btn-ghost:hover { border-color:#fff; color:#fff; }
.btn-outline { border-color:var(--line); color:var(--navy-950); background:#fff; }
.btn-outline:hover { border-color:var(--navy); color:var(--navy); }

/* hero */
.hero { position:relative; overflow:hidden; background:var(--navy-950); color:#fff;
  /* fill the first screen below the sticky header, like the original landing page */
  min-height:calc(100vh - var(--header)); min-height:calc(100svh - var(--header));
  display:flex; flex-direction:column; justify-content:center; }
.hero > .wrap { width:100%; }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 60% at 85% 15%, rgba(217,58,43,.28), transparent 60%),
             radial-gradient(45% 60% at 10% 95%, rgba(31,63,140,.55), transparent 60%); }
.hero-inner { position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;
  padding-block:clamp(56px,10vw,112px); }
.hero .eyebrow { color:#FF8A7E; }
.hero h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(38px,6.4vw,76px); line-height:1.02;
  letter-spacing:-.03em; margin:14px 0 0; max-width:15ch; }
.hero h1 em { font-style:normal; color:var(--red); }
.hero .lede { margin:22px 0 0; max-width:50ch; font-size:clamp(17px,2vw,20px); color:#D5DDF0; }
.hero-actions { margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }
.hero-mark img { width:min(300px,70vw); height:auto; display:block; margin-inline:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.35)); }
@media (max-width:820px){ .hero-inner{ grid-template-columns:1fr; } .hero-mark{ order:-1; } .hero-mark img{ width:120px; margin:0; } }

/* sections */
.section { padding-block:clamp(56px,9vw,104px); }
.section-head { max-width:62ch; margin-bottom:clamp(28px,4vw,44px); }
.section-head h2, .page h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4.4vw,42px);
  letter-spacing:-.025em; line-height:1.08; margin:8px 0 0; color:var(--navy-950); }
.section-head p { margin:14px 0 0; color:var(--mist); }

/* app cards */
.apps { display:grid; grid-template-columns:1.35fr 1fr; gap:20px; }
.apps .side { display:grid; gap:20px; }
@media (max-width:860px){ .apps{ grid-template-columns:1fr; } }
.card { position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px; display:flex; flex-direction:column; }
.card.feature { background:linear-gradient(180deg,#fff, var(--wash)); border-color:#CFD9EE; }
.card-top { display:flex; align-items:center; gap:14px; }
.card-top img { width:56px; height:56px; object-fit:contain; flex:none; }
.card.feature .card-top img { width:72px; height:72px; }
.card h3 { font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-.015em; margin:0; color:var(--navy-950); line-height:1.1; }
.status { display:inline-block; margin-top:6px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 10px; border-radius:100px; }
.status.live { color:var(--ok); background:var(--ok-bg); }
.status.dev { color:var(--dev); background:var(--dev-bg); }
.card p { margin:16px 0 0; color:var(--ink); }
.card .small { font-size:15px; color:var(--mist); margin-top:12px; }
.card .actions { margin-top:auto; padding-top:22px; display:flex; flex-wrap:wrap; gap:10px; }
.card.quiet p { color:var(--mist); }

/* about */
.about { background:var(--wash); border-block:1px solid var(--line); }
.about-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,6vw,72px); align-items:start; }
@media (max-width:780px){ .about-grid{ grid-template-columns:1fr; } }
.about-lead { font-family:var(--font-display); font-weight:500; font-size:clamp(21px,3vw,28px); line-height:1.28;
  letter-spacing:-.012em; color:var(--navy-950); margin:12px 0 0; }
.about p { margin:0 0 14px; }
.facts { list-style:none; margin:0; padding:0; background:#fff; border:1px solid var(--line); border-radius:16px; }
.facts li { display:flex; justify-content:space-between; gap:16px; padding:14px 20px; border-top:1px solid var(--line); font-size:15px; }
.facts li:first-child { border-top:0; }
.facts .k { color:var(--mist); }
.facts .v { text-align:right; color:var(--navy-950); font-weight:600; }

/* contact */
.contact { background:var(--navy-950); color:#fff; }
.contact-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.contact .eyebrow { color:#FF8A7E; }
.contact h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4.6vw,46px); letter-spacing:-.025em;
  line-height:1.06; margin:10px 0 0; }
.contact .email { display:inline-block; margin-top:12px; font-size:clamp(18px,2.4vw,24px); font-weight:600; color:#fff;
  text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:5px; word-break:break-all; }
.contact .email:hover { color:#FFD6D1; }
.contact .note { margin:10px 0 0; color:#B9C4DE; font-size:15px; }
.contact-actions { display:flex; flex-wrap:wrap; gap:12px; }
.copied { min-height:1.4em; margin:10px 0 0; color:#9FE0BE; font-size:14px; }

/* footer */
footer { background:var(--navy-900); color:#C9D3EA; padding-block:40px; font-size:14px; }
.footer-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; }
.footer-brand { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:17px; color:#fff; }
.footer-brand img { width:26px; height:26px; }
.footer-links { display:flex; flex-wrap:wrap; gap:10px 24px; }
.footer-links a { color:#DCE3F3; text-decoration:none; }
.footer-links a:hover { color:#fff; text-decoration:underline; }
.footer-meta { margin-top:24px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); color:#A9B6D4; font-size:13px; }

/* text pages (privacy, legal) */
.page { padding-block:clamp(40px,7vw,80px); }
.page .wrap { max-width:780px; }
.page .updated { color:var(--mist); font-size:15px; margin:10px 0 0; }
.page h2 { font-family:var(--font-display); font-size:22px; letter-spacing:-.01em; color:var(--navy-950); margin:36px 0 8px; }
.page p, .page li { color:var(--ink); }
.page ul { padding-left:1.2em; }
.page .back { display:inline-block; margin-top:36px; }