/* The marketing site's ONE stylesheet — the home page and /download/ (#550)
   both link it, so the two can never drift (#243). */
:root {
  --navy: #0D2A44; --navy-deep: #061D33; --ink: #0D2A44;
  --teal: #00C7AF; --teal-dark: #00A197; --teal-tint: #E2F5F1;
  --bg: #F3F8F8; --muted: #5C6B7A; --line: #E3EAEC;
}
* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.6 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       color: var(--ink); background: #fff; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 22px; }

/* Nav */
nav { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.92);
      backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; height: 60px; gap: 20px; }
.logo { display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--navy); }
.logo b { font-weight: 800; }
.logo > span { white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
        padding: 13px 26px; font-weight: 700; font-size: 15px; cursor: pointer; border: none;
        text-transform: uppercase; letter-spacing: .06em; }
.pill.teal { background: var(--teal); color: var(--navy-deep); }
.pill.teal:hover { background: var(--teal-dark); color: #fff; }
.pill.dark { background: var(--navy-deep); color: #fff; }
.pill.dark:hover { background: var(--navy); }
.pill.line { background: #fff; color: var(--navy); border: 1.5px solid #d7e0e6; }
.nav-in .pill { margin-left: auto; padding: 9px 18px; }
.nav-in .pill { white-space: nowrap; }
@media (max-width: 480px) { .nav-in .pill { padding: 8px 13px; font-size: 12.5px; letter-spacing: .03em; } }   /* #550: one line on a phone */

/* Hero */
header { padding: 72px 0 40px; }
.kicker { color: var(--teal-dark); font-weight: 800; font-size: 12.5px; letter-spacing: .14em; }
h1 { font-size: clamp(52px, 9vw, 96px); line-height: 1.0; letter-spacing: -.03em;
     color: var(--navy-deep); font-weight: 800; margin: 10px 0 4px; }
h1 .dot { color: var(--teal); }
.hero-slogan { font-size: clamp(20px, 3vw, 26px); font-weight: 700; color: var(--navy); }
.hero-sub { margin-top: 14px; max-width: 520px; font-size: 17.5px; color: var(--muted); }
.hero-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-checks { display: flex; gap: 22px; margin-top: 26px; flex-wrap: wrap;
               font-size: 14px; color: var(--navy); font-weight: 600; }
.hero-checks span::before { content: "✓  "; color: var(--teal-dark); font-weight: 800; }

/* App preview (the Today dashboard, as in the product) */
.shot { position: relative; margin: 48px auto 0; max-width: 880px; background: #f2f6f8;
        border: 1px solid var(--line); border-radius: 18px;
        box-shadow: 0 30px 70px rgba(15,36,56,.16); overflow: hidden; display: flex; }
.shot aside { width: 150px; flex: none; background: var(--navy); color: #c7d6e2;
              padding: 16px 0; font-size: 12.5px; }
.shot aside .logo { color: #fff; font-size: 13px; padding: 0 14px 12px; }
.s-item { padding: 7px 14px; display: flex; gap: 8px; }
.s-item.active { background: rgba(255,255,255,.12); color: #fff; border-radius: 0 999px 999px 0; margin-right: 10px; }
.shot main { flex: 1; padding: 20px 22px; text-align: left; }
.s-greet { font-weight: 800; font-size: 19px; color: var(--navy); }
.s-date { font-size: 11.5px; color: var(--muted); }
.s-brief { margin-top: 12px; background: #fff; border: 1px solid #dff0ec; border-radius: 12px; padding: 12px 14px; }
.s-brief .k { color: var(--teal-dark); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.s-brief h4 { font-size: 15px; color: var(--navy); margin-top: 3px; }
.s-stats { display: flex; gap: 16px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.s-stats b { display: block; font-size: 16px; color: var(--navy); }
.s-cols { display: flex; gap: 12px; margin-top: 12px; }
.s-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; flex: 1.4; }
.s-card h5 { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.s-task { display: flex; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid #f1f4f6; font-size: 12.5px; }
.s-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--teal); flex: none; }
.s-dot.done { background: var(--teal); }
.s-chip { margin-left: auto; font-size: 9.5px; border: 1px solid var(--teal); color: var(--teal-dark);
          border-radius: 999px; padding: 1px 7px; flex: none; }
.s-side { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.s-att { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 12px; }
.s-att b { color: var(--navy); font-size: 13px; }
.s-talk { position: absolute; right: 18px; bottom: 16px; background: var(--navy-deep); color: #fff;
          border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 700;
          box-shadow: 0 10px 26px rgba(15,36,56,.35); }
.s-talk::before { content: "🎙 "; }

/* Capture Clarify Complete */
section { padding: 76px 0; }
.center { text-align: center; }
h2 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -.02em; color: var(--navy-deep); line-height: 1.15; }
.lead { color: var(--muted); max-width: 520px; margin: 12px auto 0; }
.steps { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; text-align: left; }
.step .num { color: var(--teal-dark); font-weight: 800; font-size: 13px; letter-spacing: .1em; }
.step h3 { margin: 8px 0 6px; font-size: 19px; color: var(--navy); }
.step p { font-size: 14.5px; color: var(--muted); }

/* Tell it naturally demo */
.forms { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.demo { margin-top: 44px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
@media (max-width: 800px) { .demo { grid-template-columns: 1fr; } .demo-arrow { transform: rotate(90deg); margin: 0 auto; } }
.demo-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; text-align: left;
             box-shadow: 0 12px 32px rgba(15,36,56,.07); }
.demo-tag { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--navy); font-size: 14px; margin-bottom: 12px; }
.demo-tag i { font-style: normal; background: var(--teal); color: var(--navy-deep); width: 22px; height: 22px;
              border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.bubble { background: var(--bg); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.bubble.me { background: var(--teal-tint); margin-top: 10px; }
.mic-pill { margin: 14px auto 0; display: flex; width: fit-content; align-items: center; gap: 8px;
            background: var(--navy-deep); color: #fff; border-radius: 999px; padding: 9px 18px; font-size: 13.5px; font-weight: 700; }
.demo-arrow { font-size: 26px; color: var(--teal-dark); text-align: center; }
.d-task { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.d-task h4 { color: var(--navy); font-size: 15.5px; }
.d-meta { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.d-chip { font-size: 11px; background: var(--teal-tint); color: var(--teal-dark); font-weight: 700;
          border-radius: 999px; padding: 2px 10px; }
.d-chip.p-high { background: #fdeaea; color: #c0392b; }

/* Platforms (dark) */
.bridge { background: var(--canvas, #F3F8F8); }
.platforms { background: var(--navy-deep); color: #fff; }
.platforms h2 { color: #fff; }
.platforms .lead { color: #9fb4c4; }
.plat-checks { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 18px;
               font-size: 14px; color: #d7e6ef; font-weight: 600; }
.plat-checks span::before { content: "✓  "; color: var(--teal); font-weight: 800; }
.plats { margin-top: 42px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; text-align: left; }
.plat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 22px; }
.plat .p-ico { width: 42px; height: 42px; border-radius: 11px; background: rgba(23,208,177,.15);
               display: flex; align-items: center; justify-content: center; font-size: 20px; }
.plat h3 { margin: 12px 0 4px; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.plat p { font-size: 13.5px; color: #9fb4c4; }
.plat .go { display: inline-block; margin-top: 14px; color: var(--teal); font-weight: 700; font-size: 14px; }
.plat .go::after { content: " ↗"; }
.rec { font-size: 10px; background: var(--teal); color: var(--navy-deep); font-weight: 800;
       letter-spacing: .06em; border-radius: 999px; padding: 2px 9px; }
.soon { font-size: 10px; background: rgba(255,255,255,.14); color: #cfe0ea; font-weight: 800;
        letter-spacing: .06em; border-radius: 999px; padding: 2px 9px; }

/* #550 — /download/: the same dark platform cards, the visitor's own computer
   first and ringed in teal; what is not public yet says so, without an arrow. */
.dl-page { min-height: calc(100vh - 60px - 150px); }
.dl-page .plat h3 { flex-wrap: wrap; row-gap: 6px; }
.plat.mine { border: 1.5px solid var(--teal); background: rgba(23,208,177,.08); }
.mine-tag { font-size: 10px; border: 1px solid var(--teal); color: var(--teal); font-weight: 800;
            letter-spacing: .06em; border-radius: 999px; padding: 1px 8px; }
.plat .go.soon-go { color: #9fb4c4; font-weight: 600; }
.plat .go.soon-go::after { content: none; }
.dl-testers { margin: 28px auto 0; max-width: 560px; font-size: 13.5px; color: #9fb4c4; }
.dl-testers b { color: #d7e6ef; }

/* Closing + footer */
.closing h2 { max-width: 700px; margin: 0 auto; }
footer { border-top: 1px solid var(--line); padding: 30px 0 42px; text-align: center; font-size: 13.5px; color: var(--muted); }
footer .logo { justify-content: center; margin-bottom: 8px; font-size: 15px; }
/* #421 — Support. The third door: somebody who cannot sign in at all still
   has to be able to reach us, so this form posts straight to the API on
   app.ihavetask.com and needs no account. Same tokens as the rest of the
   site; nothing invented. */
.support { background: var(--bg); padding: 64px 0; }
.support-form { max-width: 620px; margin: 22px auto 0; display: flex;
                flex-direction: column; gap: 10px; text-align: left; }
.support-form label { font-size: 13px; font-weight: 700; color: var(--muted); }
.support-form input, .support-form textarea {
  font: inherit; font-size: 15px; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 14px; width: 100%;
}
.support-form textarea { resize: vertical; min-height: 120px; }
.support-form input:focus, .support-form textarea:focus { outline: none; border-color: var(--teal); }
.support-note { font-size: 13.5px; color: var(--muted); }
.support-said { font-size: 15px; font-weight: 700; color: var(--teal-dark); }
.support-said.bad { color: #c0392b; }