:root {
  --bg: #EEF1E6;
  --bg-2: #E2E7D6;
  --surface: #FCFDF8;
  --ink: #24331F;
  --ink-2: #4F5D48;
  --ink-3: #7A866F;
  --line: #DCE2CF;
  --accent: #3E7A3A;
  --accent-soft: #E3EEDC;
  --button: #24331F;
  --button-ink: #FCFDF8;
  --stem: #3E7A3A;
  --leaf: #5E9A4F;
  --leaf-2: #78B266;
  --bloom: #E7B04B;
  --coffee: #B3792A;
  --shadow: 0 1px 2px rgba(36, 51, 31, .05), 0 6px 20px rgba(36, 51, 31, .07);
  --shadow-lg: 0 18px 60px rgba(36, 51, 31, .18);
  --font: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161C14; --bg-2: #1F271C; --surface: #222B1F;
    --ink: #E6EDDC; --ink-2: #B5C0A8; --ink-3: #8D9882; --line: #2E382A;
    --accent: #8FC07F; --accent-soft: #2A3A25;
    --button: #E6EDDC; --button-ink: #161C14;
    --stem: #8FC07F; --leaf: #6FA85F; --leaf-2: #8FC07F; --coffee: #E7B04B;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
    --shadow-lg: 0 18px 60px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #161C14; --bg-2: #1F271C; --surface: #222B1F;
  --ink: #E6EDDC; --ink-2: #B5C0A8; --ink-3: #8D9882; --line: #2E382A;
  --accent: #8FC07F; --accent-soft: #2A3A25;
  --button: #E6EDDC; --button-ink: #161C14;
  --stem: #8FC07F; --leaf: #6FA85F; --leaf-2: #8FC07F; --coffee: #E7B04B;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.stem { stroke: var(--stem); }
.leaf { fill: var(--leaf); }
.leaf-2 { fill: var(--leaf-2); }

/* Hero */
.hero { padding: 40px 0 72px; text-align: center;
  background: radial-gradient(1100px 520px at 50% -120px, var(--accent-soft), transparent 70%); }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.5rem; margin-bottom: 56px; }
.hero h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); font-weight: 700; max-width: 14ch; margin: 0 auto; }
.hero h1 span { color: var(--accent); }
.lede { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--ink-2); max-width: 38em; margin: 22px auto 0; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.fineprint { color: var(--ink-3); font-size: .92rem; margin: 16px 0 0; }
.fineprint.center { text-align: center; }
.coffee-link { color: var(--ink-2); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; }
.coffee-link:hover { color: var(--ink); }
.caption { color: var(--ink-3); font-size: .85rem; margin: 14px 0 0; }

.button {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px;
  border-radius: 999px; font: 600 1rem var(--font); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--button); color: var(--button-ink); box-shadow: var(--shadow); }
.button.ghost { color: var(--ink); border: 1px solid var(--line); background: var(--surface); }
.button.coffee { background: var(--coffee); color: #fff; flex-shrink: 0; }

/* Screenshots in a window frame */
.window { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); }
.window-bar { display: flex; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.window-bar i:nth-child(1) { background: #EC6A5E; }
.window-bar i:nth-child(2) { background: #F4BF4F; }
.window-bar i:nth-child(3) { background: #61C554; }
.hero-shot { margin: 56px auto 0; max-width: 1000px; }
.window.tall { max-width: 400px; justify-self: center; max-height: 560px; }
.window.tall img { width: 100%; height: 560px; object-fit: cover; object-position: top; }
@media (max-width: 600px) { .window.tall, .window.tall img { max-height: 480px; height: 480px; } }

/* Story rows */
.story { padding: 48px 24px 24px; display: grid; gap: 96px; }
.story-row { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.story-row.flip .story-copy { order: 2; }
.kicker { color: var(--accent); font-weight: 600; font-size: .9rem; margin: 0 0 10px; }
.story h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.story-copy p:last-child { color: var(--ink-2); font-size: 1.08rem; margin: 16px 0 0; }

/* Features */
.features { padding: 112px 24px 24px; }
.features > h2, .install > h2 { text-align: center; font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.grid article { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px; box-shadow: var(--shadow); }
.grid h3 { font-size: 1.12rem; margin-top: 16px; }
.grid p { color: var(--ink-2); margin: 8px 0 0; font-size: .98rem; }
.f-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--tint, var(--accent-soft)); color: var(--hue, var(--accent)); display: grid; place-items: center; }
/* Each feature gets its own colour from Tend's palette, so the cards don't blur together. */
/* Plain cards; the colour lives only in a solid icon tile with a white symbol (like the Timezone site). */
.grid article .f-icon { background: linear-gradient(145deg, var(--a), var(--b)); color: #fff; box-shadow: 0 2px 6px rgba(36, 51, 31, .15); }
.c-plan  { --a: #7A79C4; --b: #5A59A0; }
.c-city  { --a: #E08A62; --b: #C0603A; }
.c-tier  { --a: #6FAA5F; --b: #3E7A3A; }
.c-rest  { --a: #5AA3BF; --b: #2F7090; }
.c-lock  { --a: #4F5D48; --b: #24331F; }
.c-cloud { --a: #EDBF5E; --b: #CC8A2E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-lock { --a: #8A9A7E; --b: #5E6E55; } }
:root[data-theme="dark"] .c-lock { --a: #8A9A7E; --b: #5E6E55; }
.f-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.f-icon svg .fill { fill: currentColor; stroke: none; }

/* Install */
.install { padding: 112px 24px 24px; scroll-margin-top: 24px; }
.section-lede { text-align: center; color: var(--ink-2); max-width: 36em; margin: 16px auto 0; }
.steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: flex; gap: 14px; box-shadow: var(--shadow); }
.step-n { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--surface); display: grid; place-items: center; font-weight: 700; font-size: .95rem; }
.steps h3 { font-size: 1.05rem; margin-top: 4px; }
.steps p { color: var(--ink-2); margin: 6px 0 0; font-size: .95rem; }
.cta.center { margin-top: 36px; }

/* Support */
.support { padding: 96px 24px 24px; }
.support-card { display: flex; align-items: center; gap: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px 32px; box-shadow: var(--shadow); }
.support-cup { flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; background: #F3EBD6; color: #B3792A; display: grid; place-items: center; }
.support-cup svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.support-copy { flex: 1; }
.support-copy h2 { font-size: 1.35rem; }
.support-copy p { color: var(--ink-2); margin: 6px 0 0; }

.footer { padding: 72px 24px 48px; text-align: center; color: var(--ink-3); font-size: .92rem; }
.footer a { color: var(--ink-2); }

@media (max-width: 900px) {
  .story-row, .story-row.flip { grid-template-columns: 1fr; gap: 28px; }
  .story-row.flip .story-copy { order: 0; }
  .grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .wrap, .story, .features, .install, .support, .footer { padding-left: 16px; padding-right: 16px; }
  .brand { margin-bottom: 36px; }
  .hero-shot { margin-top: 40px; }
  .grid, .steps { grid-template-columns: 1fr; }
  .support-card { flex-direction: column; text-align: center; padding: 28px 20px; }
  .story { gap: 64px; }
  .features, .install { padding-top: 80px; }
}