/* ValleyKeep marketing site (vk-site). Its own stylesheet, not the app's: the admin CSS carries a
   sidebar, dashboard grid and form system that a landing page never uses, and shipping it here would
   be a large download for a stranger reading three paragraphs.
   Everything is in a file rather than inline, because the platform runs a strict nonce-CSP. */

:root{
  --ink:#12231d; --ink-2:#41564e; --muted:#6b7f77;
  --paper:#ffffff; --paper-2:#f5f8f6; --line:#dde6e2;
  --brand:#117a5c; --brand-dark:#0d5f47; --brand-tint:#e6f3ee;
  --radius:12px; --wrap:1120px; --gutter:20px;
  --shadow:0 1px 2px rgba(18,35,29,.05), 0 8px 24px rgba(18,35,29,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
h1,h2,h3{line-height:1.2; letter-spacing:-.02em; margin:0 0 .5em; text-wrap:balance}
h1{font-size:clamp(2rem,4.6vw,3.15rem); font-weight:800}
h2{font-size:clamp(1.4rem,2.6vw,2rem); font-weight:750}
h3{font-size:1.08rem; font-weight:700; margin-top:1.6em}
p{margin:0 0 1em; max-width:68ch}
a{color:var(--brand-dark)}
a:focus-visible,button:focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}
.narrow-col{max-width:760px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.94em}

.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:50; background:var(--paper); padding:10px 14px; border-radius:8px; box-shadow:var(--shadow)}

/* ---- header ---- */
.site-head{border-bottom:1px solid var(--line); background:rgba(255,255,255,.92); backdrop-filter:saturate(140%) blur(8px); position:sticky; top:0; z-index:20}
.head-inner{display:flex; align-items:center; gap:22px; min-height:66px}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.02em; text-decoration:none; color:var(--ink)}
.brand-mark{display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--brand); color:#fff; font-weight:800}
.site-nav{display:flex; gap:20px; margin-left:auto; flex-wrap:wrap}
.site-nav a{color:var(--ink-2); text-decoration:none; font-size:.95rem; font-weight:600}
.site-nav a[aria-current="page"]{color:var(--brand-dark); box-shadow:inset 0 -2px 0 var(--brand)}
.head-cta{display:flex; gap:10px; align-items:center}

/* ---- buttons ---- */
.btn-solid,.btn-ghost{display:inline-block; border-radius:10px; padding:9px 16px; font-weight:700; font-size:.95rem; text-decoration:none; white-space:nowrap}
.btn-solid{background:var(--brand); color:#fff}
.btn-ghost{color:var(--ink); border:1px solid var(--line); background:var(--paper)}
.btn-lg{padding:13px 24px; font-size:1.02rem}

/* ---- sections ---- */
.hero{padding:84px 0 66px; background:linear-gradient(180deg,var(--brand-tint),transparent)}
.eyebrow{text-transform:uppercase; letter-spacing:.09em; font-size:.76rem; font-weight:750; color:var(--brand-dark); margin-bottom:14px}
.lede{font-size:1.16rem; color:var(--ink-2); max-width:62ch}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin:26px 0 12px}
.hero-note{font-size:.9rem; color:var(--muted)}
.page-hero{padding:62px 0 34px; border-bottom:1px solid var(--line)}
.band{padding:62px 0}
.band.alt{background:var(--paper-2); border-block:1px solid var(--line)}
.cta-band{padding:66px 0; background:var(--brand); color:#fff; text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.92); margin-inline:auto}
.cta-band .btn-solid{background:#fff; color:var(--brand-dark)}

/* ---- grids & cards ---- */
.grid-2,.grid-3{display:grid; gap:20px; margin-top:26px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.two-col{display:grid; gap:44px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.card h2,.card h3{margin-top:0; font-size:1.12rem}
.card p{margin-bottom:0; color:var(--ink-2); font-size:.98rem}

/* ---- pricing ---- */
.plan{display:flex; flex-direction:column}
.plan-best{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint), var(--shadow)}
.plan-flag{align-self:flex-start; background:var(--brand-tint); color:var(--brand-dark); font-size:.72rem; font-weight:750; text-transform:uppercase; letter-spacing:.07em; padding:4px 9px; border-radius:99px; margin:0 0 10px}
.plan-price{font-size:2.35rem; font-weight:800; letter-spacing:-.03em; margin:.1em 0 0}
.plan-unit{color:var(--muted); font-size:.88rem; margin:0 0 14px}
.plan-for{font-weight:650; color:var(--ink)}
.ticks{list-style:none; margin:0 0 20px; padding:0; flex:1}
.ticks li{position:relative; padding-left:26px; margin-bottom:9px; color:var(--ink-2); font-size:.96rem}
.ticks li::before{content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:800}
.fineprint{margin-top:26px; color:var(--muted); font-size:.9rem; max-width:none}

/* ---- steps ---- */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:26px; counter-reset:s}
.steps li{display:flex; gap:20px; align-items:flex-start}
.step-n{display:grid; place-items:center; flex:0 0 46px; height:46px; border-radius:50%; background:var(--brand-tint); color:var(--brand-dark); font-weight:800; font-size:1.15rem}
.steps h2{font-size:1.2rem; margin-bottom:.35em}
.steps p{color:var(--ink-2); margin-bottom:0}

.link-arrow{font-weight:700; text-decoration:none}
.link-arrow::after{content:" →"}
.big-link{font-size:1.15rem; font-weight:700}

/* ---- footer ---- */
.site-foot{border-top:1px solid var(--line); background:var(--paper-2); padding:44px 0 0; margin-top:0}
.foot-inner{display:flex; gap:32px; flex-wrap:wrap; justify-content:space-between}
.foot-brand{font-weight:800; margin:0 0 4px}
.foot-note{color:var(--muted); font-size:.93rem; margin:0}
.site-foot nav{display:flex; gap:18px; flex-wrap:wrap}
.site-foot nav a{color:var(--ink-2); text-decoration:none; font-size:.93rem}
.foot-legal{border-top:1px solid var(--line); margin-top:32px; padding-block:18px}
.foot-legal p{margin:0; color:var(--muted); font-size:.86rem}

/* ---- touch ------------------------------------------------------------------
   What separates an app from a web page on a phone is not layout, it is the first 100ms after a
   thumb lands. Three defaults work against us:
   1. Mobile browsers paint a grey/blue box over a tapped link, on touch-*up*. Native controls
      respond on touch-*down*. We remove the box and supply our own :active state instead.
   2. :hover rules "stick" on a touch screen — the tapped link stays lit until you tap elsewhere.
      Every hover style below is gated behind (hover:hover) so only a real pointer gets it.
   3. touch-action:manipulation drops double-tap-to-zoom on controls, so the browser stops waiting
      to find out whether a tap was the first half of a gesture. */
a, button, .btn-solid, .btn-ghost, .brand, .link-arrow{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.btn-solid, .btn-ghost, .brand, .site-nav a, .site-foot nav a, .link-arrow{
  transition:background-color 110ms ease, border-color 110ms ease, color 110ms ease, transform 110ms ease, opacity 110ms ease;
}
.btn-solid:active, .btn-ghost:active{transform:scale(.97)}
.btn-solid:active{background:var(--brand-dark)}
.btn-ghost:active{border-color:var(--brand); color:var(--brand-dark); background:var(--paper-2)}
.brand:active, .site-nav a:active, .site-foot nav a:active, .link-arrow:active{opacity:.55}

@media (hover:hover){
  .site-nav a:hover{color:var(--brand-dark)}
  .btn-solid:hover{background:var(--brand-dark)}
  .btn-ghost:hover{border-color:var(--brand); color:var(--brand-dark)}
  .cta-band .btn-solid:hover{background:#eef7f3}
  .link-arrow:hover{text-decoration:underline}
  .site-foot nav a:hover{color:var(--brand-dark)}
}

/* Kill Android's pull-to-refresh and scroll chaining — there is nothing behind this page to reveal,
   and a static marketing page has nothing to refresh to. `contain` rather than `none` on purpose:
   `none` also removes iOS's end-of-scroll bounce, which reads as a frozen page rather than a polished
   one, and the bounce is the one browser behaviour users actually expect to keep. */
html, body{overscroll-behavior-y:contain}

/* ---- safe area --------------------------------------------------------------
   viewport-fit=cover means the page owns the notch and home-indicator strips, so it has to pay the
   insets back by hand. In a browser tab these all resolve to 0px; they only become non-zero once the
   page is launched from the home screen, which is exactly when getting them wrong is most visible. */
.wrap{padding-left:max(var(--gutter), env(safe-area-inset-left));
      padding-right:max(var(--gutter), env(safe-area-inset-right))}
.site-head{padding-top:env(safe-area-inset-top)}
.foot-legal{padding-bottom:max(18px, env(safe-area-inset-bottom))}

/* Launched from the home screen there is no browser chrome to scroll away, so the sticky header is
   the only thing standing between the content and the status bar — give it a little more room. */
@media (display-mode:standalone){
  .head-inner{min-height:56px}
  .hero{padding-top:44px}
}

@media (max-width:720px){
  .head-inner{flex-wrap:wrap; gap:12px; padding-block:12px}
  /* Five links wrapping onto two ragged rows reads as a shrunken desktop site. One row that
     scrolls, with 44px-tall targets, is what a phone user expects — and it keeps the header a
     fixed height, so the hero never starts at a different place on different pages. */
  .site-nav{order:3; width:100%; margin-left:0; gap:18px; flex-wrap:nowrap; overflow-x:auto;
            -webkit-overflow-scrolling:touch; scrollbar-width:none;
            /* Bleed to the screen edge so the row reads as scrollable, but keep the first link
               left-aligned with the brand above it. */
            margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter)}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{flex:0 0 auto; display:flex; align-items:center; min-height:44px;
              -webkit-tap-highlight-color:transparent}
  .head-cta{margin-left:auto}
  .hero{padding:56px 0 44px}
  /* Footer links stack, so give each one a real row to be tapped in. */
  .site-foot nav a{display:flex; align-items:center; min-height:40px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}