/* The public side of Pro On The Way Lite.
 *
 * Same palette as the app, deliberately: somebody who taps through the demo and
 * then signs up should not feel like they have arrived somewhere else. The one
 * difference is scale — a marketing page is read at arm's length on a laptop as
 * often as on a phone, so the type is larger and the layout is allowed to
 * breathe.
 */
:root {
  --bg:        #f6f7fb;
  --surface:   #ffffff;
  --surface-2: #eef1f7;
  --border:    #dfe4ee;
  --text:      #17202e;
  --text-2:    #47536a;
  --muted:     #7b869b;
  --accent:    #3f5efb;
  --accent-2:  #eaeeff;
  /* The brand lime, and a deepened version of it for text: #8dc63f
     on a near-white page fails contrast for anything but a graphic. */
  --brand:     #8dc63f;
  --brand-ink: #5f8f22;
  --good:      #12996b;
  --good-2:    #e3f6ee;
  --warn:      #c47a08;
  --warn-2:    #fdf1dc;
  --bad:       #d6453c;
  --bad-2:     #fdeceb;
  --shadow:    0 1px 2px rgba(23,32,46,.06), 0 8px 26px rgba(23,32,46,.07);
  --shadow-lg: 0 30px 70px rgba(23,32,46,.18);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 720px; }

/* ------------------------------------------------------------------ header */
.nav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(12px);
       background: rgba(246,247,251,.86); border-bottom: 1px solid transparent;
       transition: border-color .2s; }
.nav.stuck { border-bottom-color: var(--border); }
.nav .wrap { display: flex; align-items: center; gap: 16px; height: 66px; }
/* The wordmark: logo-nav.svg, the real artwork, on a transparent ground with
   its ink recoloured for a light page.

   Both of the old objections to putting the logo up here are answered rather
   than argued with. "Looked like a sticker somebody had put on a light page" —
   there is no tile any more, so there is nothing to look stuck on. "Its LITE
   line collapsed into grey smudges" — LITE is 21px in a 146-tall box instead of
   17px in a 176-tall one, so it survives at bar height.

   Vector, so it stays crisp at every step down below.

   The .pin / .brand rules below are the old live-text wordmark. Still used by
   admin.html, whose qualifier is "Admin" rather than the "Lite" drawn into the
   artwork. */
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none;
        color: var(--text); min-width: 0; }
/* The mark and its qualifier stack, because that is how the artwork is drawn.
   LITE stays live text rather than being baked into the PNG: it is the element
   that went to grey mush at bar height last time, and as text it is crisp at
   every size and recolours with the page. */
.logo.mark { flex-direction: column; align-items: center; gap: 1px; }
.logo.mark img { height: 44px; width: auto; flex: none; }
.logo.mark .lite { font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase;
                   color: var(--muted); font-weight: 500; line-height: 1; }
.logo .pin { width: 29px; height: 38px; flex: none; color: var(--text); }
.logo .pin svg { width: 100%; height: 100%; display: block; }
.logo .brand { display: flex; flex-direction: column; line-height: 1.04; min-width: 0; }
.logo .brand b { font-size: 17px; font-weight: 800; letter-spacing: .045em;
                 white-space: nowrap; }
.logo .brand b i { font-style: normal; color: var(--brand-ink); }
.logo .brand em { font-style: normal; font-size: 10.5px; letter-spacing: .28em;
                  text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.logo:hover .brand b i { color: var(--brand); }

/* In the footer it is allowed a little more room. */
footer .logo img { height: 58px; }
footer .logo .pin { width: 33px; height: 43px; }
footer .logo .brand b { font-size: 19px; }
footer .logo .brand em { font-size: 11px; }

.nav .spacer { flex: 1; }
.nav a.plain { color: var(--text-2); text-decoration: none; font-size: 14.5px;
               font-weight: 520; }
.nav a.plain:hover { color: var(--text); }

.btn { display: inline-block; border: 1px solid var(--border); background: var(--surface);
       color: var(--text); border-radius: 12px; padding: 12px 20px; font: inherit;
       font-size: 15px; font-weight: 580; cursor: pointer; text-decoration: none;
       transition: transform .12s, box-shadow .2s; }
/* Hover only where there is a pointer. On a touchscreen :hover sticks after a
   tap, leaving the button lifted and shadowed until you touch something else. */
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.sm { padding: 9px 15px; font-size: 14px; }
.btn.lg { padding: 16px 30px; font-size: 16.5px; border-radius: 14px; }
.btn.ghost { background: transparent; }
.btn:active { transform: translateY(0); }

/* -------------------------------------------------------------------- hero */
.hero { padding: 70px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-2);
           color: var(--accent); font-size: 13px; font-weight: 600; padding: 7px 14px;
           border-radius: 999px; margin-bottom: 20px; }
h1 { font-size: 54px; line-height: 1.06; letter-spacing: -.033em; margin: 0 0 20px;
     font-weight: 730; }
h1 .grad { background: linear-gradient(120deg, #4a63e8, #16a173);
           -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: 19px; color: var(--text-2); margin: 0 0 30px; max-width: 30em; }
/* The lede runs in two parts: the flat statement of the problem, then what the
   thing actually does about it. The first is darker and tighter to its
   follow-on so the pair reads as one block rather than two stray paragraphs. */
.lede.first { color: var(--text); font-weight: 560; margin-bottom: 14px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cta-note { font-size: 13.5px; color: var(--muted); margin-top: 16px; }
.cta-row.center { justify-content: center; }
/* Google's badge art carries its own transparent padding (about 15% a side),
   so it is drawn larger and pulled in to sit level with the button beside it. */
.play-badge { display: inline-block; line-height: 0; margin: -12px -14px; }
.play-badge img { height: 80px; width: auto; }

/* ------------------------------------------------------- the phone on show */
.phone { width: 380px; max-width: 100%; margin: 0 auto; }
.phone-shell { border-radius: 42px; background: #10131a; padding: 11px;
               box-shadow: var(--shadow-lg); position: relative; }
.phone-shell::after { content: ''; position: absolute; top: 20px; left: 50%;
                      transform: translateX(-50%); width: 92px; height: 22px;
                      background: #10131a; border-radius: 999px; z-index: 5; }
.phone-screen { border-radius: 32px; overflow: hidden; background: var(--bg);
                height: 700px; width: 100%; border: 0; display: block; }

/* On touch screens the demo is an iframe the height of the screen, and any
   swipe that starts on it goes to the iframe instead of the page — so scrolling
   down the page jammed as soon as your thumb landed on the phone. It now stays
   inert until tapped, with a cover saying so, and goes inert again on Done. */
.phone-cover, .phone-done { display: none; }
@media (hover: none) {
  .phone:not(.live) .phone-screen { pointer-events: none; }
  .phone-cover { display: grid; place-items: end center; position: absolute;
                 inset: 11px; border-radius: 32px; z-index: 6; border: 0;
                 padding: 0 0 28px; background: linear-gradient(transparent 55%, rgba(16,19,26,.45));
                 font: inherit; cursor: pointer; }
  .phone-cover span { background: var(--accent); color: #fff; font-weight: 620;
                      font-size: 15px; padding: 12px 22px; border-radius: 999px;
                      box-shadow: var(--shadow-lg); }
  .phone.live .phone-cover { display: none; }
  .phone.live .phone-done { display: block; margin: 14px auto 0; }
}

/* ----------------------------------------------------------------- section */
section { padding: 76px 0; }
section.tint { background: var(--surface); border-block: 1px solid var(--border); }
.kicker { color: var(--accent); font-weight: 650; font-size: 13.5px; letter-spacing: .07em;
          text-transform: uppercase; margin-bottom: 12px; }
h2 { font-size: 36px; letter-spacing: -.025em; margin: 0 0 14px; font-weight: 700;
     line-height: 1.15; }
h3 { font-size: 18px; margin: 0 0 6px; font-weight: 640; letter-spacing: -.01em; }
.sub { font-size: 17.5px; color: var(--text-2); max-width: 44em; margin: 0 0 40px; }

/* Three half-remembered jobs, then the point of them.
   These were three lines of prose, which is a poor way to show what is really
   a set of three of the same thing. As tiles they are scannable, and the tiles
   can say "this is a guess" in how they are drawn rather than waiting for the
   sentence underneath to say it: dashed edges instead of solid, and the vague
   half set in grey and prefixed with a ~.

   The ~ is not decoration. It is the app's own notation for a date nobody
   actually recorded — the same mark explained in the first card below — so the
   graphic is already speaking the product's language before anyone installs
   it. */
.memories { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 14px; padding: 0; margin: 0 0 30px; }
.memories li { background: var(--bg); border: 1px dashed var(--border);
               border-radius: 16px; padding: 18px 20px;
               display: flex; flex-direction: column; gap: 5px; }
.memories .when { font-size: 13.5px; color: var(--muted); }
.memories .when::before { content: "~ "; color: var(--brand-ink); font-weight: 700; }
.memories .what { font-size: 17px; font-weight: 620; color: var(--text);
                  letter-spacing: -.01em; }

.recall-point  { font-size: 17.5px; color: var(--text-2); max-width: 44em; margin: 0 0 10px; }
.recall-answer { font-size: 19px; font-weight: 650; color: var(--text); margin: 0 0 40px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
         align-items: start; }

/* Cards that open. The blurb is the whole answer for most people; the rest is
   there for anyone who wants it and out of the way of everyone who does not. */
.card.openable { text-align: left; font: inherit; color: inherit; cursor: pointer;
                 width: 100%; transition: box-shadow .2s, transform .12s; }
.card.openable:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card.openable .more { display: inline-block; margin-top: 14px; color: var(--accent);
                       font-size: 14px; font-weight: 600; }
.card-more { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
             color: var(--text-2); font-size: 14.5px; line-height: 1.65;
             animation: unfold .22s ease-out; }
@keyframes unfold { from { opacity: 0; transform: translateY(-4px); } }
.card template { display: none; }

/* The cycling word.
   Coloured, because it is the part that changes; "maintenance" stays black so
   the sentence reads as one thing rather than two. The ghost is a hidden copy
   of the longest word holding the line open. */
/* The word and its ghost are stacked, not adjacent.
   `width: 0` reserved nothing, which was the whole point of having a ghost —
   so "maintenance" still shuffled left and right as the word grew. The ghost
   now sits in the flow at the width of the longest word and the real one is
   laid over it. */
.cycle-wrap { position: relative; display: inline-block; white-space: nowrap;
              vertical-align: baseline; }
.cycle { position: absolute; left: 0; top: 0; white-space: nowrap;
         background: linear-gradient(120deg, #4a63e8, #16a173);
         -webkit-background-clip: text; background-clip: text; color: transparent; }
.cycle-ghost { visibility: hidden; white-space: nowrap; }
.still { color: var(--text); }
.caret { display: inline-block; width: 3px; height: .78em; margin-left: 1px;
         vertical-align: -1px; background: #16a173; opacity: .9;
         animation: blink 1.05s step-end infinite; border-radius: 2px; }
.caret.done { animation: none; opacity: 0; }
@keyframes blink { 50% { opacity: 0; } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
        padding: 26px 24px; box-shadow: var(--shadow); }
section.tint .card { background: var(--bg); }
.card .ic { width: 44px; height: 44px; border-radius: 12px; display: grid;
            place-items: center; font-size: 22px; margin-bottom: 16px;
            background: var(--accent-2); }
.card p { color: var(--text-2); margin: 0; font-size: 15px; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

/* ----------------------------------------------------------------- footer */
footer { border-top: 1px solid var(--border); padding: 44px 0 60px; background: var(--surface); }
.foot { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.foot .spacer { flex: 1; }
.foot a { color: var(--text-2); text-decoration: none; font-size: 14.5px; }
.foot a:hover { color: var(--accent); }
.foot .fine { color: var(--muted); font-size: 13px; width: 100%; margin-top: 20px;
              line-height: 1.7; }

/* -------------------------------------------------------------- documents */
.doc { padding: 50px 0 90px; }
.doc h1 { font-size: 34px; margin-bottom: 6px; }
.doc .when { color: var(--muted); font-size: 14px; margin: 0 0 30px; }
.doc h2 { font-size: 20px; margin: 34px 0 8px; }
.doc p, .doc li { color: var(--text-2); font-size: 15.5px; }
.doc li { margin-bottom: 7px; }
.doc .box { background: var(--surface); border: 1px solid var(--border);
            border-radius: 14px; padding: 18px 20px; margin: 20px 0; box-shadow: var(--shadow); }
.doc .box.warn { background: var(--warn-2); border-color: rgba(196,122,8,.3); }
.doc .box.warn p { color: #7a4c04; }

/* ------------------------------------------------------------------ forms */
.panel { max-width: 430px; margin: 60px auto; background: var(--surface);
         border: 1px solid var(--border); border-radius: 20px; padding: 32px 30px;
         box-shadow: var(--shadow); }
.panel h1 { font-size: 25px; margin: 0 0 6px; }
.panel .lede { font-size: 15px; margin-bottom: 24px; }
.field { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 15px; }
.field input, .field select {
  display: block; width: 100%; margin-top: 6px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--text); border-radius: 12px;
  padding: 14px; font: inherit; font-size: 16px;
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: -1px;
                     background: var(--surface); }
.check { display: flex; gap: 11px; align-items: flex-start; font-size: 14px;
         color: var(--text-2); margin: 18px 0; line-height: 1.55; }
.check input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--accent); }
.msg { font-size: 14px; margin-top: 14px; min-height: 20px; color: var(--bad); line-height: 1.5; }
.msg.ok { color: var(--good); }
.btn.block { display: block; width: 100%; text-align: center; }
.or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px;
      color: var(--muted); font-size: 12.5px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr. A grid track's automatic minimum is min-content,
     and the phone mock inside it is a fixed 380px -- so on a 360px screen the
     track refused to go below 380 and dragged the headline, the buttons and the
     mock itself off the right edge. The zero minimum lets it shrink. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero { padding: 44px 0 20px; }
  h1 { font-size: 38px; }
  .lede { font-size: 17px; }
  h2 { font-size: 28px; }
  .sub { font-size: 16px; }
  .cards { grid-template-columns: 1fr; }
  /* Two up rather than one: they are three short labels, not three paragraphs,
     and stacking them singly turns the graphic back into the list it replaced.
     The third sits on its own row and that is fine. */
  .memories { grid-template-columns: 1fr 1fr; gap: 12px; }
  .memories li { padding: 15px 16px; }
  .recall-point { font-size: 16px; }
  .recall-answer { font-size: 17.5px; }
  .two { grid-template-columns: 1fr; gap: 30px; }
  section { padding: 54px 0; }
  .nav a.plain.hide-sm { display: none; }
}

/* Phone widths.
 *
 * The bar was overflowing: a 34px mark, "Pro On The Way Lite", and two solid
 * buttons come to roughly 460px of content in a 390px window, and the whole
 * page then scrolled sideways. So the name is allowed to shrink and truncate
 * rather than shoving everything along, "Sign in" becomes a plain link, and the
 * headline drops to a size that fits the column it is actually in. */
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .nav .wrap { gap: 10px; }
  .logo { min-width: 0; overflow: hidden; }
  .logo img { height: 40px; }
  footer .logo img { height: 46px; }
  .logo .brand b { font-size: 15px; }
  .logo .pin { width: 25px; height: 33px; }
  .nav .btn { padding: 9px 13px; font-size: 13.5px; white-space: nowrap; }
  h1 { font-size: 31px; letter-spacing: -.025em; }
  .lede { font-size: 16px; }
  .btn.lg { padding: 15px 22px; font-size: 15.5px; }
  /* Stacked, but each at its own width. Stretched to the full column the
     button became a long empty bar with a few words in it. Left-aligned under
     the lede in the hero; centred where the section itself is centred. */
  .cta-row { flex-direction: column; align-items: flex-start; }
  .cta-row.center { align-items: center; }
  .foot { gap: 16px; }
}
@media (max-width: 400px) {
  /* Below this the qualifier is the first thing that can go without the brand
     becoming unrecognisable — which the live-text version can do and the
     artwork cannot, LITE being part of the drawing. So the tile just gets
     smaller instead, and the nav buttons give up the room. */
  .logo img { height: 34px; }
  .logo .brand em { display: none; }
  .nav a.btn:not(.primary) { display: none; }
}
@media (max-width: 420px) {
  .phone-shell { padding: 8px; border-radius: 34px; }
  .phone-screen { border-radius: 27px; height: 620px; }
  .phone-cover { inset: 8px; border-radius: 27px; }
}