/* ============================================================================
   CORE — marketing brand
   ----------------------------------------------------------------------------
   Deliberately NOT the product's design system. Same warm earth family, its own
   palette, its own type. The one intentional bridge is IBM Plex Mono, which
   carries every figure here exactly as it does inside the app — so a number on
   the marketing site and a number in the product look like the same number.

   Product tokens live in /styles.css. Do not mix the two on one surface: the
   app appears here only inside framed product screenshots, as a guest.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,300&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* --- paper: warmer and lighter than the app's #F4F2EE --- */
  --m-bone: #FBF8F2;
  --m-bone-2: #F2EDE2;
  --m-bone-3: #EAE3D5;
  --m-white: #FFFFFF;

  /* --- spruce: the dark. Green-black, where the app's dark is brown --- */
  --m-spruce: #17291F;
  --m-spruce-2: #21382B;
  --m-spruce-3: #2F5140;

  /* --- ember: the single accent. Warm copper, hi-vis, reads as grid --- */
  --m-ember: #C4572B;
  --m-ember-hover: #A9481F;
  --m-ember-soft: #F6E6DA;
  --m-ember-light: #E2916A;   /* the accent, legible on a dark ground */

  /* --- ink --- */
  --m-ink: #171C18;
  --m-ink-2: #39423B;
  --m-body: #4E574F;
  --m-muted: #7F887F;
  --m-faint: #A8AFA6;
  --m-on-dark: #F3EFE6;
  --m-on-dark-2: rgba(243, 239, 230, .68);
  --m-on-dark-3: rgba(243, 239, 230, .42);

  /* --- lines. The site is built out of hairlines, not shadows --- */
  --m-line: #E3DCCD;
  --m-line-2: #D3CABA;
  --m-line-dark: rgba(243, 239, 230, .16);

  /* --- sticky nav ground. A theme moves this; the logo variant follows it. --- */
  --m-nav-bg: rgba(251, 248, 242, .92);

  /* --- type --- */
  --m-display: "Archivo", system-ui, sans-serif;
  --m-serif: "Newsreader", Georgia, serif;
  --m-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* --- geometry. 2px, not the app's 7px: sharper, more industrial --- */
  --m-radius: 2px;
  --m-radius-lg: 3px;
  --m-gutter: 40px;
  --m-max: 1200px;
  --m-section: 104px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--m-bone);
  color: var(--m-body);
  font-family: var(--m-display);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; color: var(--m-ink); font-family: var(--m-display); font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; display: block; }

a { color: var(--m-ember); text-decoration: none; }
a:hover { color: var(--m-ember-hover); text-decoration: underline; text-underline-offset: 3px; }
.dark a:not(.btn) { color: var(--m-ember-light); }
.dark a:not(.btn):hover { color: var(--m-on-dark); }

:focus-visible { outline: 2px solid var(--m-ember); outline-offset: 3px; }

/* ---------- layout ---------- */
.wrap { max-width: var(--m-max); margin: 0 auto; padding: 0 var(--m-gutter); }
.wrap-narrow { max-width: 840px; margin: 0 auto; padding: 0 var(--m-gutter); }
.section { padding: var(--m-section) 0; }
.section-tight { padding: 72px 0; }
.dark { background: var(--m-spruce); color: var(--m-on-dark-2); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--m-on-dark); }
.paper-2 { background: var(--m-bone-2); }

/* ---------- type ---------- */
.display { font-size: clamp(42px, 5.2vw, 74px); font-weight: 700; line-height: 1.02; letter-spacing: -0.033em; text-wrap: balance; }
.h2 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; line-height: 1.1; letter-spacing: -0.026em; text-wrap: balance; }
.h3 { font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.014em; color: var(--m-ink); }
.h4 { font-size: 16.5px; font-weight: 600; line-height: 1.35; letter-spacing: -0.008em; color: var(--m-ink); }
.lead { font-family: var(--m-serif); font-weight: 300; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.52; color: var(--m-ink-2); }
.dark .lead { color: var(--m-on-dark-2); }
.body { font-size: 16.5px; line-height: 1.68; color: var(--m-body); }
.dark .body, .dark p { color: var(--m-on-dark-2); }
.small { font-size: 14.5px; line-height: 1.6; color: var(--m-muted); }
.eyebrow { font-family: var(--m-mono); font-size: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--m-ember); }
.dark .eyebrow { color: var(--m-ember-light); }
.num { font-family: var(--m-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---------- the span rule: a hairline with tick marks, after a circuit span ---- */
.span-rule { height: 1px; background: var(--m-line); position: relative; }
.span-rule::before, .span-rule::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--m-line-2); }
.span-rule::before { left: 0; }
.span-rule::after { right: 0; }
.dark .span-rule { background: var(--m-line-dark); }
.dark .span-rule::before, .dark .span-rule::after { background: rgba(243,239,230,.32); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: var(--m-radius);
  padding: 14px 22px; font-family: var(--m-display); font-size: 15px; font-weight: 500; line-height: 1;
  cursor: pointer; white-space: nowrap; transition: background-color .16s ease, color .16s ease, border-color .16s ease; text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--m-ember); color: #fff; }
.btn-primary:hover { background: var(--m-ember-hover); color: #fff; }
.btn-ghost { background: transparent; color: var(--m-ink); border-color: var(--m-line-2); }
.btn-ghost:hover { background: var(--m-bone-2); color: var(--m-ink); border-color: var(--m-ink-2); }
.dark .btn-ghost { color: var(--m-on-dark); border-color: rgba(243,239,230,.28); }
.dark .btn-ghost:hover { background: rgba(243,239,230,.08); color: var(--m-on-dark); border-color: rgba(243,239,230,.5); }
.btn-sm { padding: 10px 16px; font-size: 14px; }

/* an arrow link: the site's tertiary action */
.arrow { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; color: var(--m-ember); }
.arrow::after { content: "→"; transition: transform .16s ease; }
.arrow:hover { text-decoration: none; }
.arrow:hover::after { transform: translateX(3px); }

/* ---------- cards: hairline, flat, no shadow ---------- */
.card { background: var(--m-white); border: 1px solid var(--m-line); border-radius: var(--m-radius); padding: 28px; }
.card-flat { border: 1px solid var(--m-line); border-radius: var(--m-radius); padding: 28px; background: transparent; }
.dark .card { background: var(--m-spruce-2); border-color: var(--m-line-dark); }
a.card, a.card-flat { color: inherit; }
a.card:hover, a.card-flat:hover { border-color: var(--m-ink-2); text-decoration: none; }
.dark a.card:hover { border-color: rgba(243,239,230,.4); }

.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* image-slot reports a large min-content; keep it from inflating any track. */
image-slot { min-width: 0; }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- site chrome ---------- */
.nav { position: sticky; top: 0; z-index: 100; background: var(--m-nav-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--m-line); }
.nav-inner { display: flex; align-items: center; gap: 34px; height: 68px; }
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-brand img { height: 26px; width: auto; }
.nav-brand span { font-family: var(--m-display); font-weight: 700; font-size: 17px; letter-spacing: .1em; color: var(--m-ink); }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: 8px; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--m-ink-2); text-decoration: none; white-space: nowrap; }
.nav-links a:hover { color: var(--m-ember); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--m-ember); }

.foot { background: var(--m-spruce); color: var(--m-on-dark-3); padding: 64px 0 34px; }
.foot a { color: var(--m-on-dark-2); font-size: 14.5px; text-decoration: none; }
.foot a:hover { color: var(--m-on-dark); text-decoration: none; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot h4 { font-family: var(--m-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--m-on-dark-3); margin-bottom: 14px; }

/* ---------- product screenshot frame: the app as a guest ---------- */
.shot { border: 1px solid var(--m-line-2); border-radius: var(--m-radius-lg); overflow: hidden; background: var(--m-white); }
.shot-bar { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; background: var(--m-bone-2); border-bottom: 1px solid var(--m-line); }
.shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--m-line-2); display: block; }
.shot-bar span { margin-left: 10px; font-family: var(--m-mono); font-size: 10.5px; color: var(--m-faint); }
.shot-body { position: relative; overflow: hidden; }
.shot-body iframe { border: 0; position: absolute; top: 0; left: 0; transform-origin: 0 0; }

@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  :root { --m-gutter: 22px; --m-section: 72px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}

/* ============================================================================
   COLOUR OPTIONS
   ----------------------------------------------------------------------------
   Three palettes over one layout. Each block redefines ONLY palette tokens —
   type, spacing, geometry and every component rule are shared, so switching a
   theme cannot change a layout. Set via data-theme on <html> (theme.js).

   01 bone   — default. Warm editorial: bone paper, spruce dark, ember copper.
   02 spruce — dark throughout. Same accent, inverted ground.
   03 leaf   — petrol chrome, ivory paper, and the accent taken from the tree
               mark itself. The most on-brand of the three; the coolest ground.
   ========================================================================== */

/* ---- 02 · SPRUCE (dark) ---- */
[data-theme="spruce"] {
  --m-bone: #12211A;
  --m-bone-2: #182A20;
  --m-bone-3: #1F3428;
  --m-white: #182A20;

  --m-spruce: #0C1712;
  --m-spruce-2: #16261C;
  --m-spruce-3: #2F5140;

  --m-ember: #C85E31;
  --m-ember-hover: #DC7442;
  --m-ember-soft: #2B1D15;
  --m-ember-light: #E9A280;

  --m-ink: #F3EFE6;
  --m-ink-2: #DBD5C7;
  --m-body: #B6BDB2;
  --m-muted: #8D958B;
  --m-faint: #6C746A;

  --m-line: rgba(243, 239, 230, .13);
  --m-line-2: rgba(243, 239, 230, .26);
  --m-nav-bg: rgba(12, 23, 18, .92);
}

/* ---- 03 · LEAF (petrol + the mark's own green) ---- */
[data-theme="leaf"] {
  --m-bone: #FCFAF4;
  --m-bone-2: #F1EFE5;
  --m-bone-3: #E6E3D5;
  --m-white: #FFFFFF;

  --m-spruce: #12262B;
  --m-spruce-2: #1B343A;
  --m-spruce-3: #2C525A;

  --m-ember: #3F7530;
  --m-ember-hover: #336026;
  --m-ember-soft: #E7F0E0;
  --m-ember-light: #8FC470;

  --m-ink: #141A1B;
  --m-ink-2: #363F40;
  --m-body: #4B5555;
  --m-muted: #7B8585;
  --m-faint: #A3ADAC;

  --m-line: #E1DCCC;
  --m-line-2: #CFC9B8;
  --m-nav-bg: rgba(252, 250, 244, .92);
}

/* ---- the switcher, injected into the nav by site.js ---- */
.theme-pick { display: inline-flex; align-items: center; gap: 6px; }
.theme-pick button { width: 18px; height: 18px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--m-line-2); position: relative; }
.theme-pick button[aria-pressed="true"] { border-color: var(--m-ember); box-shadow: 0 0 0 2px var(--m-nav-bg), 0 0 0 3px var(--m-ember); }
@media (max-width: 900px) { .theme-pick { display: none; } }

/* ============================================================================
   MOBILE (added for the Wix deployment)

   The page's section layouts are inline styles rendered by the x-dc runtime,
   so the .g2/.g3/.g4 rules above never reach them. These rules target the
   runtime-rendered style attributes instead. Two forms of each selector: the
   runtime serializes with spaces and px ("minmax(0px, 1fr)"), the authored
   source without ("minmax(0,1fr)") — both are matched so the rules hold
   before and after hydration.

   Deliberately NOT linearized: the small structural grids ("120px minmax…",
   "150px minmax…", "44px auto auto" label/value and icon rows) — they fit a
   375px viewport and read better side by side.
   ========================================================================= */
@media (max-width: 720px) {
  /* Page-level text|media splits and card grids stack into one column. */
  [style*="grid-template-columns:minmax(0"],
  [style*="grid-template-columns: minmax(0px"],
  [style*="grid-template-columns:repeat("],
  [style*="grid-template-columns: repeat("] {
    grid-template-columns: 1fr !important;
  }
  /* The splits carry desktop column gaps up to 64px; stacked, that reads as
     a section break. Card grids keep their own 24px gaps. */
  [style*="grid-template-columns:minmax(0"],
  [style*="grid-template-columns: minmax(0px"] {
    gap: 28px !important;
  }
  /* Belt and braces against any residual sideways scroll. */
  html { overflow-x: clip; }

  /* The iOS device frame is a fixed 402x874 flex child; a narrowing column
     crushes it (measured 113px wide at a 375px viewport). flex-shrink:0
     stops the crush; zoom scales the whole frame — layout box included, so
     no gap is left behind — in steps sized to the width range each rule
     serves, with margin so the frame never forces horizontal scroll. */
  [data-om-starter="ios-frame"] { flex-shrink: 0; zoom: 0.94; }
}
@media (max-width: 430px) { [data-om-starter="ios-frame"] { zoom: 0.84; } }
@media (max-width: 390px) { [data-om-starter="ios-frame"] { zoom: 0.77; } }
@media (max-width: 360px) { [data-om-starter="ios-frame"] { zoom: 0.66; } }
/* Galaxy Fold cover screen and similar (280px): one further step so the frame
   plus gutters (402*0.56 + 44 = 269px) still fits. */
@media (max-width: 330px) { [data-om-starter="ios-frame"] { zoom: 0.56; } }

/* Mobile menu (added for the Wix deployment). The rule above this block hides
   .nav-links at 900px and the design ships no substitute, so on a phone the
   only navigation was the footer. The button is injected by mobile-nav.js and
   simply reveals the design's own .nav-links as a dropdown, so the SPA's
   delegated data-goto handling keeps working untouched. */
@media (max-width: 900px) {
  .nav-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; margin: 0;
    background: none; border: 1px solid var(--m-line); border-radius: 6px;
    color: var(--m-ink); cursor: pointer;
  }
  .nav.m-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 68px; margin: 0;
    background: var(--m-nav-bg); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--m-line);
    padding: 4px 0 10px;
  }
  .nav.m-open .nav-links a { padding: 13px 22px; font-size: 16px; }
}
@media (min-width: 901px) { .nav-menu-btn { display: none; } }

/* The iOS device frame's content area (ios-frame.jsx) is overflow:auto, so the
   tall screen capture scrolls inside the bezel with a visible scrollbar — a
   real phone shows none. Hide the bar; wheel/touch scrolling still works.
   Not media-scoped: no viewport should show a scrollbar inside a phone. */
[data-om-starter="ios-frame"] * { scrollbar-width: none; -ms-overflow-style: none; }
[data-om-starter="ios-frame"] *::-webkit-scrollbar { display: none; width: 0; height: 0; }