/* ==========================================================================
   KindCode — "Time Back" shared design system
   Used by every page. Edit tokens once here; the whole site follows.
   ========================================================================== */

:root {
  --bg: #f3f5f1;          /* off-white, green bias */
  --bg-2: #e9ede4;
  --surface: #ffffff;
  --ink: #16211b;          /* deep pine ink */
  --ink-2: #465049;
  --ink-3: #78817a;
  --line: #dbe1d6;
  --pine: #1f6f52;         /* primary green */
  --pine-2: #17553f;
  --clay: #c07a3e;         /* single warm micro-accent */
  --shadow: 0 2px 4px rgba(22,33,27,.04), 0 18px 50px rgba(22,33,27,.09);
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#101512; --bg-2:#151c18; --surface:#18201b; --ink:#eef2ea; --ink-2:#b8c1b8;
    --ink-3:#828b81; --line:#28322b; --pine:#5cc79b; --pine-2:#7ad4ae; --clay:#e0a668;
    --shadow:0 2px 4px rgba(0,0,0,.35), 0 20px 55px rgba(0,0,0,.5);
  }
}
/* explicit theme toggle overrides (win over the media query in both directions) */
:root[data-theme="light"]{ --bg:#f3f5f1;--bg-2:#e9ede4;--surface:#fff;--ink:#16211b;--ink-2:#465049;--ink-3:#78817a;--line:#dbe1d6;--pine:#1f6f52;--pine-2:#17553f;--clay:#c07a3e;--shadow:0 2px 4px rgba(22,33,27,.04),0 18px 50px rgba(22,33,27,.09);}
:root[data-theme="dark"]{ --bg:#101512;--bg-2:#151c18;--surface:#18201b;--ink:#eef2ea;--ink-2:#b8c1b8;--ink-3:#828b81;--line:#28322b;--pine:#5cc79b;--pine-2:#7ad4ae;--clay:#e0a668;--shadow:0 2px 4px rgba(0,0,0,.35),0 20px 55px rgba(0,0,0,.5);}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 26px; }
.eyebrow{ font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--pine); font-weight:600; }
section[id]{ scroll-margin-top:90px; }
:focus-visible{ outline:2px solid var(--pine); outline-offset:3px; border-radius:4px; }

/* ---------- header / nav ---------- */
header{ position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 85%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .3s; }
header.scrolled{ border-color:var(--line); }
.bar{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ font-family:var(--serif); font-size:24px; font-weight:700; letter-spacing:-.01em; color:var(--ink); text-decoration:none; }
.brand em{ color:var(--pine); font-style:normal; }
nav{ display:flex; gap:30px; align-items:center; }
nav a.navlink{ color:var(--ink-2); text-decoration:none; font-size:15px; transition:color .2s; }
nav a.navlink:hover{ color:var(--pine); }
.btn{ font-family:var(--sans); font-weight:600; font-size:15px; border:none; border-radius:100px; padding:12px 24px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:transform .18s ease, box-shadow .25s ease, background .2s, border-color .2s, color .2s; }
.btn-primary{ background:var(--pine); color:#f3f5f1; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px color-mix(in srgb,var(--pine) 40%, transparent); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--pine); color:var(--pine); }

/* hamburger + mobile menu */
.menu-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; background:none; border:none; cursor:pointer; }
.menu-toggle span{ display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s ease, opacity .2s ease; margin:0 auto; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{ display:none; flex-direction:column; padding:6px 26px 20px; background:var(--bg); border-bottom:1px solid var(--line); }
.mobile-menu.open{ display:flex; }
.mobile-menu a.navlink{ color:var(--ink); text-decoration:none; font-size:17px; padding:15px 4px; border-bottom:1px solid var(--line); }
.mobile-menu .btn{ margin-top:16px; justify-content:center; }
@media (max-width:720px){
  nav{ display:none; }
  .menu-toggle{ display:flex; }
}
@media (min-width:721px){ .mobile-menu{ display:none !important; } }

/* ---------- hero (home) ---------- */
.hero{ padding:90px 0 70px; text-align:center; position:relative; }
.hero .kicker{ margin-bottom:22px; }
.hero h1{ font-family:var(--serif); font-weight:700; font-size:clamp(46px,8.5vw,92px); line-height:.98; letter-spacing:-.03em; text-wrap:balance; }
.hero h1 .em{ color:var(--pine); font-style:italic; }
.hero p.lead{ font-size:clamp(18px,2.3vw,22px); color:var(--ink-2); max-width:52ch; margin:26px auto 0; }
.hero .cta-row{ display:flex; gap:14px; justify-content:center; margin-top:36px; flex-wrap:wrap; }

/* counter strip */
.counter{ display:flex; gap:0; justify-content:center; margin:64px auto 0; max-width:760px; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; }
.metric{ flex:1; padding:30px 20px; text-align:center; border-right:1px solid var(--line); }
.metric:last-child{ border-right:none; }
.metric .num{ font-family:var(--serif); font-size:clamp(32px,5vw,50px); font-weight:700; color:var(--pine); line-height:1; font-variant-numeric:tabular-nums; }
.metric .lab{ font-size:13px; color:var(--ink-3); margin-top:10px; letter-spacing:.03em; }
@media (max-width:640px){ .counter{ flex-direction:column; } .metric{ border-right:none; border-bottom:1px solid var(--line); } .metric:last-child{ border-bottom:none; } }

/* ---------- interior page header ---------- */
.page-head{ text-align:center; padding:72px 0 14px; }
.page-head .eyebrow{ display:block; margin-bottom:16px; }
.page-head h1{ font-family:var(--serif); font-weight:700; font-size:clamp(38px,6.5vw,66px); line-height:1; letter-spacing:-.03em; text-wrap:balance; }
.page-head p{ color:var(--ink-2); font-size:clamp(17px,2.2vw,20px); max-width:56ch; margin:20px auto 0; }

/* ---------- generic section ---------- */
section.block{ padding:84px 0; }
.sec-head{ max-width:660px; margin:0 auto 52px; text-align:center; }
.sec-head h2{ font-family:var(--serif); font-size:clamp(30px,4.4vw,48px); letter-spacing:-.02em; line-height:1.05; margin:14px 0 14px; text-wrap:balance; }
.sec-head p{ color:var(--ink-2); font-size:18px; }

/* who-it's-for chips */
.chips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:840px; margin:0 auto; }
.chip{ background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:10px 18px; font-size:14.5px; color:var(--ink-2); box-shadow:var(--shadow); transition:border-color .2s, color .2s, transform .2s; }
.chip:hover{ border-color:var(--pine); color:var(--pine); transform:translateY(-2px); }
.chip.more{ color:var(--pine); font-weight:600; border-style:dashed; }

/* service cards */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:880px){ .grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .grid{ grid-template-columns:1fr; } }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:30px 26px; box-shadow:var(--shadow); transition:transform .25s ease, border-color .25s; }
.card:hover{ transform:translateY(-4px); border-color:var(--pine); }
.card .ic{ width:46px; height:46px; border-radius:13px; background:color-mix(in srgb,var(--pine) 12%, transparent); color:var(--pine); display:grid; place-items:center; font-size:22px; margin-bottom:18px; }
.card h3{ font-family:var(--serif); font-size:21px; margin-bottom:8px; letter-spacing:-.01em; }
.card p{ color:var(--ink-2); font-size:15px; }
.card .for{ display:inline-block; margin-top:16px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--clay); font-weight:700; }

/* software / apps showcase */
.apps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:880px){ .apps-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .apps-grid{ grid-template-columns:1fr; } }
.app-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:var(--shadow); transition:transform .25s ease, border-color .25s; display:flex; flex-direction:column; }
.app-card:hover{ transform:translateY(-4px); border-color:var(--pine); }
.app-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.app-mono{ width:52px; height:52px; border-radius:15px; display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:23px; color:#fff; flex:none; box-shadow:0 6px 16px rgba(22,33,27,.18); object-fit:cover; }
.app-card h3{ font-family:var(--serif); font-size:20px; letter-spacing:-.01em; line-height:1.1; }
.app-card .cat{ font-size:12px; color:var(--ink-3); letter-spacing:.04em; margin-top:3px; }
.app-card p{ color:var(--ink-2); font-size:14.5px; flex:1; }
.store-row{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.store{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-2); text-decoration:none; border:1px solid var(--line); border-radius:100px; padding:7px 13px; transition:border-color .2s, color .2s; }
.store:hover{ border-color:var(--pine); color:var(--pine); }
.store svg{ width:14px; height:14px; fill:currentColor; }
.store.soon{ color:var(--clay); border-color:color-mix(in srgb,var(--clay) 40%,var(--line)); cursor:default; }
.app-card.build{ background:color-mix(in srgb,var(--pine) 8%, var(--surface)); border-style:dashed; border-color:color-mix(in srgb,var(--pine) 40%,var(--line)); align-items:flex-start; justify-content:center; }
.app-card.build h3{ margin-bottom:8px; }
.app-card.build .btn{ margin-top:16px; }

/* quote / promise band */
.promise{ background:var(--bg-2); }
.promise .inner{ max-width:780px; margin:0 auto; text-align:center; }
.promise blockquote{ font-family:var(--serif); font-size:clamp(24px,3.6vw,38px); line-height:1.25; letter-spacing:-.015em; text-wrap:balance; }
.promise blockquote .em{ color:var(--pine); font-style:italic; }
.promise .who{ margin-top:24px; color:var(--ink-3); font-size:14px; letter-spacing:.04em; }

/* how it works timeline */
.flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; }
@media (max-width:760px){ .flow{ grid-template-columns:1fr; } }
.node{ text-align:center; }
.node .ring{ width:56px; height:56px; margin:0 auto 18px; border-radius:50%; border:2px solid var(--pine); color:var(--pine); display:grid; place-items:center; font-family:var(--serif); font-size:22px; font-weight:700; background:var(--surface); }
.node h4{ font-size:19px; margin-bottom:8px; }
.node p{ color:var(--ink-2); font-size:15px; max-width:30ch; margin:0 auto; }

/* centered CTA block */
.cta{ text-align:center; }
.cta h2{ font-family:var(--serif); font-size:clamp(32px,5vw,54px); letter-spacing:-.02em; line-height:1.02; text-wrap:balance; margin-bottom:18px; }
.cta p{ color:var(--ink-2); font-size:18px; max-width:48ch; margin:0 auto 30px; }

/* ---------- about page ---------- */
.about-grid{ display:grid; gap:22px; max-width:820px; margin:0 auto; }
.about-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:clamp(26px,4vw,40px); box-shadow:var(--shadow); }
.about-card h2{ font-family:var(--serif); font-size:26px; margin-bottom:14px; letter-spacing:-.01em; }
.about-card > p{ color:var(--ink-2); margin-bottom:12px; }
.about-card > p:last-child{ margin-bottom:0; }
.values{ list-style:none; display:grid; gap:18px; }
.values li{ display:flex; gap:14px; align-items:flex-start; color:var(--ink-2); }
.values .vic{ flex:none; width:36px; height:36px; border-radius:10px; background:color-mix(in srgb,var(--pine) 12%,transparent); color:var(--pine); display:grid; place-items:center; }
.values .vic svg{ width:19px; height:19px; fill:currentColor; }
.values b{ color:var(--ink); }
.about-card.founder{ text-align:center; }
.about-card.founder .founder-line{ font-size:18px; color:var(--ink); }
.founder-link{ color:var(--pine); text-decoration:none; display:inline-flex; gap:6px; align-items:center; margin-left:10px; font-weight:600; }
.founder-link:hover{ text-decoration:underline; }
.founder-link svg{ width:18px; height:18px; fill:currentColor; }

/* ---------- legal / prose pages ---------- */
/* content is preserved from source exports; !important defeats their inline colors */
.legal{ max-width:820px; margin:0 auto; padding:20px 0 90px; }
.prose h1{ font-family:var(--serif)!important; font-size:clamp(30px,5vw,44px)!important; color:var(--ink)!important; -webkit-text-stroke:0!important; text-align:center; letter-spacing:-.02em; margin:0 0 6px; }
.prose h2{ font-family:var(--serif)!important; font-size:25px!important; color:var(--ink)!important; -webkit-text-stroke:0!important; letter-spacing:-.01em; margin:36px 0 12px; }
.prose h3{ font-family:var(--sans)!important; font-size:18px!important; font-weight:700!important; color:var(--ink)!important; -webkit-text-stroke:0!important; margin:26px 0 10px; }
.prose h4{ font-family:var(--sans)!important; font-size:15px!important; font-weight:700!important; color:var(--ink-2)!important; -webkit-text-stroke:0!important; letter-spacing:.02em; text-transform:uppercase; margin:20px 0 8px; }
.prose p{ color:var(--ink-2); font-size:16px; margin:0 0 14px; }
.prose ul{ margin:0 0 18px; padding-left:22px; }
.prose li{ color:var(--ink-2); font-size:16px; margin:7px 0; }
.prose b, .prose strong{ color:var(--ink); font-weight:700; }
.prose span{ color:inherit!important; -webkit-text-stroke:0!important; }
.prose a{ color:var(--pine); text-decoration:underline; }
.prose a:hover{ color:var(--pine-2); }
.prose hr{ border:none; border-top:1px solid var(--line); margin:28px 0; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); padding:44px 0; color:var(--ink-3); font-size:14px; }
.foot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center; }
.foot-links a{ color:var(--ink-2); text-decoration:none; margin-left:22px; }
.foot-links a:first-child{ margin-left:0; }
.foot-links a:hover{ color:var(--pine); }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }