:root{
  --bg:#f4f9fd; --ink:#10233a; --muted:#50657a; --card:#ffffff; --card-2:#e9f3fb; --line:rgba(16,35,58,.12);
  --brand:#19b26b; --brand-d:#128a52; --sun:#ffc23d; --sun-d:#b97b00; --coral:#ff5a5f; --coral-d:#c8323a; --mint:#22c98f; --mint-d:#0f7f57; --grape:#8a5cff;
  --lake:#0d4f8a; --lake-2:#1680c9;
  --f-display:'Lilita One','Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;
  --f-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --shadow:0 10px 30px rgba(16,35,58,.12);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0b1630; --ink:#eaf3ff; --muted:#9fb3cc; --card:#16223d; --card-2:#1d2c4d; --line:rgba(234,243,255,.14);
  --brand:#2ecc85; --brand-d:#7fe3b4; --sun-d:#ffcf5c; --coral-d:#ff8a8e; --mint-d:#5fe0b0; --lake:#071a33; --lake-2:#0d3b6b;
  --shadow:0 10px 30px rgba(0,0,0,.4); color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0b1630; --ink:#eaf3ff; --muted:#9fb3cc; --card:#16223d; --card-2:#1d2c4d; --line:rgba(234,243,255,.14);
  --brand:#2ecc85; --brand-d:#7fe3b4; --sun-d:#ffcf5c; --coral-d:#ff8a8e; --mint-d:#5fe0b0; --lake:#071a33; --lake-2:#0d3b6b;
  --shadow:0 10px 30px rgba(0,0,0,.4); color-scheme:dark }
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:16px/1.55 var(--f-body)}
a{color:var(--brand-d)}
img{max-width:100%;display:block;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
.narrow{max-width:740px}
header.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:16px;padding-block:12px}
.logo{display:flex;white-space:nowrap;align-items:center;gap:10px;font-family:var(--f-display);font-size:21px;color:var(--ink);text-decoration:none;letter-spacing:.02em}
.logo .lm{color:var(--brand-d)}
.logo img{width:34px;height:34px;border-radius:9px;display:block}
header.top nav{margin-left:auto;display:flex;align-items:center;gap:18px;font-weight:800;font-size:14.5px}
header.top nav a{color:var(--muted);text-decoration:none} header.top nav a:hover{color:var(--ink)}
header.top nav a.navcta{background:var(--brand);color:#fff;padding:9px 14px;border-radius:12px;box-shadow:0 3px 0 var(--brand-d)}
h1,h2,h3{font-family:var(--f-display);font-weight:400;letter-spacing:.01em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(38px,6vw,64px);margin:0 0 16px}
h2{font-size:clamp(28px,3.6vw,38px);margin:0 0 12px}
h3{font-size:22px;margin:0 0 6px}
p{margin:0 0 12px}
.lede{font-size:19px;color:var(--muted);max-width:34em}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 22px;border-radius:16px;border:0;font:800 16px var(--f-body);text-decoration:none;cursor:pointer}
.btn.big{height:58px;padding:0 28px;font-size:18px}
.btn.primary{background:var(--brand);color:#fff;box-shadow:0 4px 0 var(--brand-d)}
.btn.ghost{background:var(--card-2);color:var(--ink)}
.btn[aria-disabled="true"]{opacity:.65;cursor:default}
.btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btns.center{justify-content:center;margin-top:28px}
.hero{background:linear-gradient(160deg,var(--lake),var(--lake-2));color:#fff;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;padding-block:56px 64px;max-width:1180px}
.hero .wide{width:100%;border-radius:24px;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.hero .lede{color:rgba(255,255,255,.88)}
.hero .btns{margin:26px 0 22px}
.hero .btn.ghost{background:rgba(255,255,255,.14);color:#fff}
.pill{display:inline-block;background:var(--brand);color:#fff;font-weight:900;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:999px;margin-bottom:18px}
.ticks{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:8px;color:rgba(255,255,255,.9);font-weight:700}
.ticks li{padding-left:28px;position:relative}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;font-size:13px;display:grid;place-items:center}
.phones{display:flex;gap:18px;justify-content:center;align-items:flex-end}
.phone{width:min(240px,44%);border-radius:30px;border:8px solid #0a1424;box-shadow:0 30px 60px rgba(0,0,0,.35);overflow:hidden;background:#0a1424}
.phone:first-child{transform:translateY(40px)}
.kicker{font-weight:900;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-d);margin-bottom:8px}
.hero .kicker{color:var(--sun)}
section{padding-block:64px}
section.proof{padding-block:28px;background:var(--card-2);border-bottom:1px solid var(--line)}
.row2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:center;margin-top:44px}
.row2.flip .shot{order:2}
.row2 .shot{width:min(280px,100%);margin:0 auto;border-radius:22px;box-shadow:var(--shadow);border:1px solid var(--line)}
.row2 p{font-size:17px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.feature{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px}
.feature .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;margin-bottom:12px;font-size:22px}
.feature p{margin:0;color:var(--muted)}
.stripe{background:var(--card-2)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.facts div{background:var(--card);border-radius:18px;padding:16px;border:1px solid var(--line)}
.facts b{display:block;font-family:var(--f-display);font-weight:400;font-size:30px;font-variant-numeric:tabular-nums}
.facts span{color:var(--muted);font-weight:700;font-size:14px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.steps div{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px}
.steps span{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--f-display);font-size:20px;margin-bottom:10px}
.steps p{margin:0;color:var(--muted)}
details{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:4px 18px;margin:10px 0}
summary{cursor:pointer;font-weight:800;font-size:17px;padding:12px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--f-display);font-size:22px;color:var(--brand-d)}
details[open] summary::after{content:"–"}
details p{margin:0 0 14px;color:var(--muted)}
section.cta{background:linear-gradient(160deg,var(--lake),var(--lake-2));color:#fff;text-align:center}
section.cta .lede{color:rgba(255,255,255,.88);margin-inline:auto}
section.cta .btn.ghost{background:rgba(255,255,255,.14);color:#fff}
.doc h2{margin-top:40px} .doc h3{margin-top:26px}
.doc p,.doc li{color:var(--ink)} .doc .muted{color:var(--muted)}
.doc table{border-collapse:collapse;width:100%;font-size:15px}
.doc td,.doc th{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.tbl{overflow-x:auto}
.callout{background:var(--card-2);border-radius:18px;padding:16px 18px;margin:18px 0}
footer{border-top:1px solid var(--line);padding-block:30px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
footer a{color:var(--muted)}
code.copy{background:var(--card-2);padding:3px 8px;border-radius:8px;font-weight:700}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;padding-block:40px 40px}
  .grid3,.facts,.steps{grid-template-columns:1fr 1fr}
  .row2{grid-template-columns:1fr;gap:22px}
  .row2.flip .shot{order:0}
  header.top nav{gap:12px;font-size:13.5px}
}
@media (max-width:520px){ .logo{font-size:15.5px;gap:8px} .logo img{width:30px;height:30px} header.top .wrap{gap:10px} header.top nav{gap:10px;font-size:13px}
  header.top nav a.navcta{white-space:nowrap;padding:8px 10px} .grid3,.steps{grid-template-columns:1fr} .facts{grid-template-columns:1fr 1fr} header.top nav a.hide-sm{display:none}
  .btn.big{height:54px;padding:0 20px;font-size:17px} }

/* phones (Patrick, Oct 10 2026: "mobile view looks bad"): shorter hero, the 3D picture runs edge to edge,
   screenshots no taller than about half a screen, tighter type */
@media (max-width:620px){
  section{padding-block:44px}
  .hero .wrap{padding-block:28px 0;gap:18px}
  .hero h1{font-size:34px;margin-bottom:12px}
  .hero .lede{font-size:16.5px}
  .pill{font-size:11px;letter-spacing:.05em;padding:6px 10px;margin-bottom:12px}
  .hero .btns{margin:18px 0 14px}
  .hero .btns .btn{width:100%;justify-content:center}
  .ticks{font-size:14.5px;gap:6px}
  .hero .wide{width:calc(100% + 40px);max-width:none;margin-inline:-20px;border-radius:0;box-shadow:none}
  .lede{font-size:16.5px}
  h2{font-size:27px}
  .row2{margin-top:30px;gap:14px}
  .row2 .shot{width:62%;max-height:52vh;object-fit:cover;object-position:top}
  .row2 p{font-size:16px}
  .facts b{font-size:26px}
  .facts div{padding:13px}
  .btns.center .btn{width:100%;justify-content:center}
}

/* Cuter (Patrick, Oct 10 2026: "make the mobile site cutier, it's gross"): Captain Buoy bobs in a light mint hero,
   wavy section edges, softer rounder cards, headings in the logo's Nunito Black, pastel feature tiles. */
:root{ --mint-bg:#e8faf1; --mint-2:#cdf3e0; --sky:#e6f5ff; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --mint-bg:#0e2a22; --mint-2:#123a2e; --sky:#0f2238; }}
:root[data-theme="dark"]{ --mint-bg:#0e2a22; --mint-2:#123a2e; --sky:#0f2238; }
h1,h2,h3{font-family:var(--f-body);font-weight:900;letter-spacing:-0.01em}
.hero{background:linear-gradient(180deg,var(--sky) 0%,var(--mint-bg) 100%);color:var(--ink);position:relative}
.hero .lede{color:var(--muted)}
.hero .btn.ghost{background:var(--card);color:var(--ink);box-shadow:0 2px 0 var(--line)}
.hero .kicker{color:var(--brand-d)}
.ticks{color:var(--ink)}
.hero .wide{border-radius:28px;border:6px solid var(--card);box-shadow:0 18px 40px rgba(16,35,58,.18)}
.mascot{width:120px;height:auto;margin:0 0 6px;animation:bob 3.2s ease-in-out infinite;transform-origin:50% 90%}
.mascot.small{width:92px;margin:0 auto 10px}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@media (prefers-reduced-motion: reduce){ .mascot{animation:none} }
.wave{display:block;width:100%;height:46px;margin-top:28px}
.wave path{fill:var(--card-2)}
section.proof{border-bottom:0}
section.cta{background:linear-gradient(180deg,var(--mint-bg),var(--mint-2));color:var(--ink);position:relative;padding-top:0}
section.cta .wave.top{margin:0 0 30px}
section.cta .wave.top path{fill:var(--card-2)}
section.cta .lede{color:var(--muted)}
section.cta .btn.ghost{background:var(--card);color:var(--ink)}
.feature,.steps div,.facts div,details{border-radius:24px;border:0;box-shadow:0 6px 18px rgba(16,35,58,.07)}
.feature .ic{border-radius:16px}
.grid3 .feature:nth-child(6n+1){background:#fff1f1} .grid3 .feature:nth-child(6n+2){background:#f2edff}
.grid3 .feature:nth-child(6n+3){background:#fff7e0} .grid3 .feature:nth-child(6n+4){background:#e6f8f5}
.grid3 .feature:nth-child(6n+5){background:#e9f4ff} .grid3 .feature:nth-child(6n+6){background:#f1ecff}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .grid3 .feature{background:var(--card)} }
.row2 .shot{border-radius:26px;border:6px solid var(--card);box-shadow:0 14px 30px rgba(16,35,58,.14)}
.pill{background:var(--card);color:var(--brand-d);box-shadow:0 2px 0 var(--line)}
.ticks li::before{background:var(--brand)}
.steps span{background:var(--brand);box-shadow:0 3px 0 var(--brand-d)}
@media (max-width:620px){
  .hero .wrap{padding-block:22px 0;text-align:left}
  .mascot{width:92px;position:absolute;right:18px;top:18px}
  .hero h1{font-size:33px;padding-right:90px}
  .pill{margin-right:86px}
  .hero .wide{width:100%;margin-inline:0;border-radius:24px;border-width:5px}
  .wave{height:34px;margin-top:22px}
  h2{font-size:26px}
}

/* Lake colors (Patrick, Oct 10 2026; picker brand/lake-colors.html). Each lake's page has its own accent: hero tint,
   "Now on" tag, kickers and the hero wave. The logo, header and Sign up buttons stay Lakewise green on every lake.
   The home page is Table Rock's page until the lake pages are split out. */
.lake-table-rock{ --lake-a:#14a3c7; --lake-d:#0b7491; --lake-t1:#e2f6fb; --lake-t2:#f2fbfe; --lake-tag:#f7c600; --lake-tag-on:#10233a }
.lake-ozarks{ --lake-a:#5048e5; --lake-d:#3b34b8; --lake-t1:#ecebfe; --lake-t2:#f7f7ff; --lake-tag:#ff5a5f; --lake-tag-on:#fff }
.lake-beaver{ --lake-a:#e8743b; --lake-d:#b04c1a; --lake-t1:#fdede4; --lake-t2:#fff8f3; --lake-tag:#2b9bd8; --lake-tag-on:#fff }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .lake-table-rock{ --lake-d:#62d2ec; --lake-t1:#0b2731; --lake-t2:#0d1f2e }
  :root:not([data-theme="light"]) .lake-ozarks{ --lake-d:#a9a4ff; --lake-t1:#1a1940; --lake-t2:#141633 }
  :root:not([data-theme="light"]) .lake-beaver{ --lake-d:#ffab7f; --lake-t1:#33201a; --lake-t2:#261b19 } }
:root[data-theme="dark"] .lake-table-rock{ --lake-d:#62d2ec; --lake-t1:#0b2731; --lake-t2:#0d1f2e }
:root[data-theme="dark"] .lake-ozarks{ --lake-d:#a9a4ff; --lake-t1:#1a1940; --lake-t2:#141633 }
:root[data-theme="dark"] .lake-beaver{ --lake-d:#ffab7f; --lake-t1:#33201a; --lake-t2:#261b19 }
body.lake-table-rock .hero{background:linear-gradient(180deg,var(--lake-t1) 0%,var(--lake-t2) 100%);padding-bottom:0}
body.lake-table-rock .hero .pill{background:var(--lake-tag);color:var(--lake-tag-on);box-shadow:0 2px 0 rgba(16,35,58,.15)}
body.lake-table-rock .kicker,body.lake-table-rock .hero .kicker{color:var(--lake-d)}
body.lake-table-rock .hero .wave path{fill:var(--lake-a)}
/* the lakes row: one card per lake, in that lake's colors */
section.lakes{padding-block:44px 8px}
.lakecards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.lakecard{display:grid;grid-template-columns:96px minmax(0,1fr);background:var(--card);border-radius:22px;overflow:hidden;box-shadow:0 6px 18px rgba(16,35,58,.07);text-decoration:none;color:var(--ink)}
.lakecard .band{background:var(--lake-a);display:grid;place-items:center;padding:12px}
.lakecard .band img{width:50px;height:auto}
.lakecard .txt{padding:14px 16px;min-width:0}
.lakecard b{display:block;font-weight:900;font-size:18px;line-height:1.2}
.lakecard small{display:block;color:var(--muted);font-weight:700;margin:2px 0 8px}
.lakecard .tag{display:inline-block;background:var(--lake-tag);color:var(--lake-tag-on);font-weight:900;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.lakecard .go{display:block;margin-top:8px;font-weight:900;color:var(--lake-d)}
@media (max-width:820px){ .lakecards{grid-template-columns:minmax(0,1fr)} }

/* Desktop hero (Patrick, Oct 10 2026: "a lot of empty space at the top of the desktop website"): from 1000 px wide the
   text sits on the left and the 3D picture on the right, instead of one column with the picture below the fold. */
@media (min-width:1000px){
  .hero{padding-top:0}
  .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:48px;padding-block:30px 30px}
  .hero .mascot{width:92px;margin-bottom:4px}
  .hero h1{font-size:clamp(40px,3.9vw,56px)}
  .hero .lede{font-size:18px}
  .hero .btns{margin:22px 0 18px}
}