/* 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:hover{color:var(--brand-dark)}
.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-solid:hover{background:var(--brand-dark)}
.btn-ghost{color:var(--ink); border:1px solid var(--line); background:var(--paper)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand-dark)}
.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)}
.cta-band .btn-solid:hover{background:#eef7f3}

/* ---- 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:" →"}
.link-arrow:hover{text-decoration:underline}
.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}
.site-foot nav a:hover{color:var(--brand-dark)}
.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}

@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}
}