/* Brand colours stay fixed; the semantic tokens below them switch for dark mode */
:root {
  --ink: #13241D;
  --forest: #1E3A2F;
  --moss: #3F6B52;
  --sage: #9DBF9E;
  --sage-soft: #E3EDE2;
  --cream: #F5F0EB;
  --paper: #FBF8F4;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --bg: var(--paper);
  --surface: #fff;
  --text: var(--ink);
  --body: #2D3B34;
  --heading: var(--forest);
  --em: var(--moss);
  --muted: #5E6B61;
  --label: #8A8178;
  --line: #E9E1D7;
  --dashed: #CFC6BA;
  --dot: #E4DCD1;
  --btn-bg: var(--forest);
  --btn-fg: var(--cream);
  --btn-hover: var(--ink);
  --ghost-hover: var(--sage-soft);
  --them-bg: var(--cream);
  --them-line: var(--line);
  --us-bg: var(--forest);
  --us-line: transparent;
  --mark-leaf: #1E3A2F;
  --mark-rib: #F5F0EB;
  --mark-shade: #000;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #13241D;
    --surface: #1A2F26;
    --text: #E6E0D6;
    --body: #D5D9D2;
    --heading: #F5F0EB;
    --em: #9DBF9E;
    --muted: #A3B0A6;
    --label: #8FA095;
    --line: #2A4236;
    --dashed: #3D5548;
    --dot: #21382E;
    --btn-bg: #9DBF9E;
    --btn-fg: #13241D;
    --btn-hover: #B6D2B6;
    --ghost-hover: #1E3A2F;
    --them-bg: #18231E;
    --them-line: #27322C;
    --us-bg: #1E3A2F;
    --us-line: #2F5040;
    --mark-leaf: #F5F0EB;
    --mark-rib: #1E3A2F;
    --mark-shade: #1E3A2F;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, svg { display: block; }

.serif {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--heading);
}
.serif em { font-style: italic; color: var(--em); }

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }

.label {
  font-family: var(--mono);
  font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--label);
}

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; padding-block: 22px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .serif { font-size: 30px; font-weight: 520; margin-top: -4px; }
.nav { display: flex; gap: 26px; font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--heading); }

/* Hero */
.hero-band {
  background-image: linear-gradient(to bottom, transparent 60%, var(--bg)),
                    radial-gradient(circle, var(--dot) 1.1px, transparent 1.2px);
  background-size: 100% 100%, 22px 22px;
  background-position: center top;
}
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; padding-block: 64px 96px; }
.hero h1 { font-size: clamp(48px, 7.4vw, 92px); font-weight: 470; }
.hero .lede { font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: 30em; margin-top: 24px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.btn {
  display: inline-flex; align-items: center; height: 50px; padding: 0 24px;
  border-radius: 999px; font-size: 16px; font-weight: 600; text-decoration: none;
  border: 1.5px solid var(--btn-bg); transition: background .15s, color .15s;
}
.btn-main { background: var(--btn-bg); color: var(--btn-fg); }
.btn-main:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn-ghost { color: var(--heading); background: var(--bg); }
.btn-ghost:hover { background: var(--ghost-hover); }

/* The privacy receipt: always white paper, in light and dark */
.receipt {
  --text: #13241D; --muted: #5E6B61; --dashed: #CFC6BA;
  position: relative; justify-self: center; width: 100%; max-width: 380px;
  background: #fff; padding: 30px 28px 92px;
  font-family: var(--mono); font-size: 13.5px; color: var(--text);
  transform: rotate(1.6deg);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .35);
  /* torn bottom edge */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x;
}
.receipt .head { text-align: center; }
.receipt .head b { display: block; font-size: 14px; letter-spacing: .18em; }
.receipt .head span { color: var(--muted); font-size: 12.5px; }
.receipt hr { border: 0; border-top: 1.5px dashed var(--dashed); margin: 18px 0; }
.receipt .line { display: flex; gap: 6px; margin-top: 8px; }
.receipt .line span:first-child { white-space: nowrap; }
.receipt .line i { flex: 1; border-bottom: 1.5px dotted var(--dashed); transform: translateY(-5px); }
.receipt .line b { font-weight: 700; color: var(--forest); }
.receipt .total { display: flex; justify-content: space-between; font-weight: 700; font-size: 14.5px; }
.receipt .foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 16px; }
.stamp {
  position: absolute; right: 30px; bottom: 30px;
  font-family: 'Fraunces', serif; font-style: italic; font-size: 26px; font-weight: 600; color: var(--moss);
  border: 2.5px solid var(--moss); border-radius: 10px; padding: 0 12px 2px;
  transform: rotate(-12deg); opacity: .85;
}

/* Sections */
section { padding-block: 88px; }
h2 { font-size: clamp(34px, 4.8vw, 52px); font-weight: 470; margin-top: 12px; }
.intro { color: var(--muted); margin-top: 14px; max-width: 34em; }

/* Where does your data go */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
.panel { border-radius: 26px; padding: 30px; display: flex; flex-direction: column; }
.panel svg { width: 100%; height: auto; margin: 10px 0 18px; }
.panel h3 { font-size: 28px; font-weight: 500; }
.panel p { font-size: 15.5px; margin-top: 6px; }
.panel.them { background: var(--them-bg); border: 1.5px solid var(--them-line); }
.panel.them h3 { color: var(--muted); }
.panel.them p { color: var(--muted); }
.panel.us { background: var(--us-bg); border: 1.5px solid var(--us-line); color: var(--cream); }
.panel.us h3 { color: var(--cream); }
.panel.us p { color: #C9D6CA; }
.panel .label { color: inherit; opacity: .7; }

/* Colours inside the "Most apps" drawing */
.them svg { --device: #fff; --wire: #B9AFA3; --bar: #D9D0C5; --pill: #fff; --pill-line: #D9D0C5; --pill-text: #7A726B; }
.them .device { fill: var(--device); stroke: var(--wire); }
.them .bar { fill: var(--bar); }
.them .flow { stroke: var(--wire); }
.them .pill { fill: var(--pill); stroke: var(--pill-line); }
.them text { fill: var(--pill-text); }
@media (prefers-color-scheme: dark) {
  .them svg { --device: #222D28; --wire: #56635B; --bar: #3A4640; --pill: #1F2924; --pill-line: #334039; --pill-text: #8E9A93; }
}

.flow { stroke-dasharray: 5 7; animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -24; } }
.orbit { transform-origin: 160px 105px; animation: orbit 9s linear infinite; }
.orbit.slow { animation-duration: 14s; animation-direction: reverse; }
@keyframes orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .flow, .orbit { animation: none; } }

/* Products */
.group { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 48px; padding-bottom: 14px; border-bottom: 1.5px solid var(--line); }
.group h3 { font-size: 26px; font-weight: 500; }
.group span { font-size: 14.5px; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }

/* Each card has a folded corner, like the leaf in the logo */
.card {
  --accent: var(--forest); --soft: var(--sage-soft); --fold: 30px;
  position: relative; display: flex; flex-direction: column; background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 22px; border-top-right-radius: 0;
  padding: 26px; text-decoration: none; transition: border-color .2s, transform .2s;
}
.card::after {
  content: ""; position: absolute; top: -1.5px; right: -1.5px; width: var(--fold); height: var(--fold);
  background: linear-gradient(225deg, var(--fold-cut, var(--bg)) 50%, var(--soft) 50%);
  border-bottom-left-radius: 8px; transition: width .2s, height .2s;
}
.card:hover { border-color: var(--accent); transform: translateY(-3px); }
.card:hover::after { width: 46px; height: 46px; }
.card .art { width: 100%; height: 108px; border-radius: 14px; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.card .art svg { height: 64px; width: auto; }
.card h4 { font-size: 26px; font-weight: 520; margin-top: 20px; }
.card p { color: var(--muted); font-size: 15.5px; margin-top: 6px; flex: 1; }
.card .go { margin-top: 16px; font-size: 14.5px; font-weight: 600; color: var(--accent); }

.card.soon { background: transparent; border: 1.5px dashed var(--dashed); border-radius: 22px; justify-content: center; }
.card.soon::after { display: none; }
.card.soon:hover { transform: none; border-color: var(--dashed); }
.card.soon h4 { margin-top: 8px; color: var(--muted); }

.p-planner { --accent: #6D4FD8; --soft: #EEEAFE; }
.p-payoff  { --accent: #2F67B8; --soft: #E2EEFB; }
.p-bills   { --accent: #2F7F61; --soft: #E0F2E9; }
.p-biz     { --accent: #BC3C67; --soft: #FCE4EC; }
.p-bundle  { --accent: var(--forest); --soft: #F1ECE4; }
.p-heic    { --accent: var(--forest); --soft: var(--sage-soft); }

/* HEIC drawing: the arrow and JPG tile flip so they show on a dark card */
.p-heic { --heic-ink: #1E3A2F; --heic-tile-text: #F5F0EB; }
.p-heic .arrow { stroke: var(--heic-ink); }
.p-heic .tile { fill: var(--heic-ink); }
.p-heic .tile-text { fill: var(--heic-tile-text); }

@media (prefers-color-scheme: dark) {
  /* Lighter accents for text, and soft tints mixed into the dark card */
  .p-planner { --accent: #B5A3FA; }
  .p-payoff  { --accent: #8EBBF0; }
  .p-bills   { --accent: #7FCBA8; }
  .p-biz     { --accent: #F08DB0; }
  .p-bundle, .p-heic { --accent: #9DBF9E; }
  .p-heic { --heic-ink: #9DBF9E; --heic-tile-text: #13241D; }
  .card .art { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
  .card::after { background: linear-gradient(225deg, var(--fold-cut, var(--bg)) 50%, color-mix(in srgb, var(--accent) 45%, var(--surface)) 50%); }
}

/* Our brands: each brand gets a panel in its own identity */
.house { border-radius: 32px; padding: 40px; margin-top: 40px; --fold-cut: var(--house-bg); background: var(--house-bg); border: 1.5px solid var(--house-line); }
.house-head { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
.house-info .label { color: var(--house-label); }
.house-lede { font-size: 18px; color: var(--house-text); margin-top: 10px; max-width: 34em; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.facts span { font-family: var(--mono); font-size: 12.5px; padding: 6px 12px; border-radius: 999px; background: var(--house-chip); color: var(--house-text); }
.house .actions { margin-top: 24px; }
.house .grid { margin-top: 32px; }

/* AcePlannerStudio: cream, ink and a violet-to-pink pastel, in Instrument Serif */
.aps { --house-bg: #F3EEE8; --house-line: #E6DED3; --house-text: #3A3530; --house-label: #8A8178; --house-chip: #FFFFFF; --aps-ink: #141414; --surface: #FFFFFF; --line: #E6DED3; }
.aps-logo { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 0; }
.aps-dark { fill: var(--aps-ink); }
.aps-word { font-family: 'Instrument Serif', serif; font-size: clamp(48px, 6vw, 64px); line-height: 1; color: var(--aps-ink); margin-top: 14px; }
.aps-word i { font-style: italic; }
.aps-studio { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .62em; padding-left: .62em; color: var(--aps-ink); margin-top: 12px; }
.aps-btn { background: var(--aps-ink); border-color: var(--aps-ink); color: #F5F0EB; }
.aps-btn:hover { background: #000; border-color: #000; }

/* HEIC Converter: stark black and white in Geist, with a colour mesh */
.heic { --house-bg: #FFFFFF; --house-line: #EBEBEB; --house-text: #4D4D4D; --house-label: #888888; --house-chip: #F5F5F5; --heic-ink: #171717; --surface: #FFFFFF; --line: #EBEBEB; }
.heic-logo { position: relative; overflow: hidden; border-radius: 22px; padding: 46px 28px; text-align: center; border: 1.5px solid var(--house-line); background: var(--house-bg); }
.heic-mesh {
  position: absolute; inset: -40%;
  background: radial-gradient(closest-side at 30% 40%, #007CF0 0%, transparent 70%),
              radial-gradient(closest-side at 70% 35%, #FF0080 0%, transparent 70%),
              radial-gradient(closest-side at 55% 70%, #F9CB28 0%, transparent 70%),
              radial-gradient(closest-side at 25% 75%, #00DFD8 0%, transparent 70%);
  opacity: .22; filter: blur(24px);
}
.heic-word { position: relative; font-family: 'Geist', 'Inter', sans-serif; font-weight: 650; font-size: clamp(34px, 4.4vw, 46px); letter-spacing: -0.05em; line-height: 1; color: var(--heic-ink); }
.heic-url { position: relative; font-family: var(--mono); font-size: 13px; color: var(--house-label); margin-top: 12px; }
.heic-btn { background: var(--heic-ink); border-color: var(--heic-ink); color: #fff; }
.heic-btn:hover { background: #000; border-color: #000; }

@media (prefers-color-scheme: dark) {
  .aps { --house-bg: #171615; --house-line: #2A2826; --house-text: #D9D2C9; --house-label: #9A9188; --house-chip: #24221F; --aps-ink: #F5F0EB; --surface: #201F1D; --line: #2E2C29; }
  .aps-btn { color: #141414; }
  .aps-btn:hover { background: #FFFFFF; border-color: #FFFFFF; }
  .heic { --house-bg: #0A0A0A; --house-line: #222222; --house-text: #A1A1A1; --house-label: #8F8F8F; --house-chip: #1A1A1A; --heic-ink: #EDEDED; --surface: #121212; --line: #262626; }
  .heic-btn { color: #0A0A0A; }
  .heic-btn:hover { background: #FFFFFF; border-color: #FFFFFF; }
  .heic-mesh { opacity: .3; }
}

/* Cards inside a brand panel use that brand's type */
.aps .card h4 { font-family: 'Instrument Serif', serif; font-variation-settings: normal; font-weight: 400; font-size: 32px; letter-spacing: 0; color: var(--aps-ink); }
.heic .card h4 { font-family: 'Geist', 'Inter', sans-serif; font-variation-settings: normal; font-weight: 650; font-size: 24px; letter-spacing: -0.04em; color: var(--heic-ink); }
.heic .p-heic { --accent: var(--heic-ink); --soft: #F5F5F5; --heic-ink: #171717; --heic-tile-text: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  .heic .p-heic { --heic-ink: #EDEDED; --heic-tile-text: #0A0A0A; --soft: #2A2A2A; }
  .heic .card .art { background: #161616; }
  .heic .card::after { background: linear-gradient(225deg, var(--fold-cut) 50%, #333 50%); }
}

/* The Keptleaf promise */
.why { background: var(--us-bg); border: 1.5px solid var(--us-line); color: var(--cream); border-radius: 32px; padding: 64px 48px; }
.why .label { color: var(--sage); }
.why h2 { color: var(--cream); }
.why h2 em { color: var(--sage); }
.points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; margin-top: 40px; }
.points h3 { font-size: 26px; font-weight: 500; color: var(--cream); }
.points p { color: #C9D6CA; font-size: 15.5px; margin-top: 8px; }

/* Closing line */
.closing { text-align: center; padding-block: 40px 96px; }
.closing h2 { font-size: clamp(40px, 6vw, 72px); }
.closing .actions { justify-content: center; }

/* Footer */
footer { border-top: 1.5px solid var(--line); padding: 36px 0 48px; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 14.5px; color: var(--muted); }
footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer a { text-decoration: none; }
footer a:hover { color: var(--heading); }

/* Privacy page */
.doc { max-width: 720px; padding-block: 40px 72px; }
.doc h1 { font-size: clamp(40px, 6vw, 60px); font-weight: 470; }
.doc .updated { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-top: 12px; }
.doc h2 { font-size: 28px; margin-top: 44px; }
.doc p, .doc li { color: var(--body); margin-top: 12px; }
.doc ul { padding-left: 22px; }
.doc a { color: var(--em); }

@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; gap: 48px; padding-block: 40px 72px; }
  .grid { grid-template-columns: 1fr 1fr; }
  .house-head { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 680px) {
  .nav { gap: 18px; }
  .nav .hide-sm { display: none; }
  section { padding-block: 60px; }
  .compare, .grid { grid-template-columns: 1fr; }
  .panel { padding: 24px; }
  .group { flex-direction: column; gap: 2px; }
  .receipt { transform: rotate(1deg); }
  .house { padding: 22px; border-radius: 24px; }
  .why { padding: 44px 24px; border-radius: 24px; }
  .points { grid-template-columns: 1fr; gap: 26px; }
}