/* =========================================================================
   Wisemelon theme — the homepage visual language on every inner page
   (owner, 26 Oct 2026: "the homepage establishes our brand identity").

   Loaded LAST on every inner page (first line of the synced chrome:nav
   region, after /index.css and the page's own stylesheet), so it re-skins
   the framed system's shared tokens and classes without touching content.
   Values come from the homepage (references/homepage.md in the
   design-system skill; tokens: examples/homepage-tokens.css).
   Page-unique blocks keep their own page.css; fix those there.
   ========================================================================= */

/* ---------- 1. tokens: the framed system's names, homepage values ---------- */
:root {
  --ink:       #0A0A0A;
  --lime:      #3DDC84;   /* the homepage's green signal (accents, dots, rings, small fills) */
  --lime-soft: #EAF7EF;   /* hover grounds */
  --lime-ico:  #1E7A48;   /* small marks, bullets, focus rings */
  --muted:     #6E6E6A;   /* readable grey (5.1:1 on white) */
  --nav-link:  #3A3A36;
  --rule:      #EFEFEC;
  --grid-line: #F1F1EE;
  --divider:   #E3E3E3;
  --prose:     #55554F;
  --font-head: "Geist", system-ui, -apple-system, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, sans-serif;

  --hp-serif:  "Instrument Serif", Georgia, serif;
  --hp-mono:   "Geist Mono", ui-monospace, monospace;
  --hp-band:   #F4F4F2;
  --hp-band-soft: #FBFBF9;
  --hp-serif-grey: #7A7A7A;
  --hp-green-ink: #1E7A48;
  --hp-spring: cubic-bezier(.34,1.4,.64,1);
  --hp-out:    cubic-bezier(.16,1,.3,1);
  --hp-sh-ring: 0 0 0 1px rgba(0,0,0,.06);
  --hp-sh-card: 0 24px 50px -30px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06);
  --hp-sh-card-hover: 0 36px 64px -30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.08);
}
/* the product-page scopes redefine these on main.cos — follow them there */
:root, .cos, .legal, .pg, .bl {
  --lime-tint: #E8F6EE;
  --lime-ink:  #1E7A48;
  --lime-wash: #F4FBF7;
  --ui-text:   #0A0A0A;
  --ease:      cubic-bezier(.22,1,.36,1);
}

body { color: var(--ink); letter-spacing: normal; }
::selection { background: #3DDC84; color: #0A0A0A; }

/* ---------- 2. the frame dissolves: no hairlines, sections carry the rhythm ---------- */
.frame { border-left: 0; border-right: 0; }
.cos-sec, .cos-final { border-top: 0; }
.cos-sec { padding-top: clamp(32px, 11vw, 140px); padding-bottom: clamp(32px, 11vw, 140px); }
.cos-final { padding-top: clamp(48px, 11vw, 152px); padding-bottom: clamp(48px, 11vw, 160px); }

/* the homepage never tints a whole section: the solution/pricing/partner pages' pastel
   section tints (*-tint--green/lav/blue/warm/soft/cool) give way to the white / warm rhythm */
main.cos > section[class*="-tint--"] { background: transparent; }

/* warm bands alternate like the homepage (white → #F4F4F2 → white …); full-bleed
   without pseudo-elements: a spread shadow paints the band, clip-path trims it */
main.cos > .cos-sec:nth-of-type(even) {
  background: var(--hp-band);
  box-shadow: 0 0 0 100vmax var(--hp-band);
  clip-path: inset(0 -100vmax);
}
main.cos > .cos-final {
  background: var(--hp-band-soft);
  box-shadow: 0 0 0 100vmax var(--hp-band-soft);
  clip-path: inset(0 -100vmax);
}

/* the hairline grid behind heroes becomes the homepage's dot grid */
.cos-hero__grid, .cos-final__grid, .pg__grid {
  background-image: radial-gradient(rgba(10,10,12,.16) 1.1px, transparent 1.4px);
  background-size: 18px 18px;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 55%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 62% at 50% 55%, #000 30%, transparent 100%);
}

/* ---------- 3. type ---------- */
.cos-h1, .cos-h2, .cos-h3, .pg__title, .legal__title { font-family: var(--font-head); font-weight: 500; color: var(--ink); }
.cos-h1, .pg__title {
  font-size: clamp(40px, min(7vw, 10vh), 92px);
  line-height: .98;
  letter-spacing: -0.05em;
}
.cos-h2 {
  font-size: clamp(28px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.cos-final .cos-h2 { font-size: clamp(30px, 5.6vw, 72px); line-height: 1; letter-spacing: -0.05em; }
.cos-h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; letter-spacing: -0.03em; }

/* the grey half of a two-tone headline is the homepage's Instrument Serif */
.dim, .cos .dim, .cos-h1 .dim, .cos-h2 .dim, .cos-h3 .dim, .os-say .dim {
  font-family: var(--hp-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--hp-serif-grey);
}

.cos-lead, .cos-hero__intro { color: var(--ink); letter-spacing: -0.01em; }
.cos-body { color: var(--muted); letter-spacing: normal; }

/* eyebrows become the homepage's Geist Mono labels with a green dot */
.cos-eyebrow, .pg__eyebrow, .legal__eyebrow {
  font-family: var(--hp-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hp-green-ink);
  gap: 8px;
}
.cos-eyebrow::before, .pg__eyebrow::before, .legal__eyebrow::before {
  width: 7px; height: 7px; border-radius: 50%;
  background: #3DDC84; box-shadow: none;
}

/* ---------- 4. buttons: pills ---------- */
.btn {
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: transform .4s var(--hp-spring), box-shadow .4s ease, background-color .2s ease;
}
.btn--lime { background: #0A0A0A; color: #fff; }
.btn--lime .ico, .btn--lime .i, .btn--lime .cta-arr { color: #3DDC84; }
.btn--lime:hover { box-shadow: 0 14px 28px -14px rgba(0,0,0,.45); }
.btn--dark, .btn--line {
  background: #fff; color: #0A0A0A;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 8px 20px -12px rgba(0,0,0,.25);
}
.btn--dark:hover, .btn--line:hover { box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 14px 28px -14px rgba(0,0,0,.35); }
.cos-link { color: var(--ink); }

/* ---------- 5. surfaces: 28px cards, ring + long soft shadow, spring lift ---------- */
.card { border: 0; border-radius: 28px; box-shadow: var(--hp-sh-ring); }
.os-relcard {
  border: 0; border-radius: 28px; background: #fff;
  box-shadow: var(--hp-sh-card);
  transition: transform .45s var(--hp-spring), box-shadow .45s ease;
}
.os-relcard:hover { transform: translateY(-6px); box-shadow: var(--hp-sh-card-hover); }
.os-cmp__side { border-radius: 28px; }
.os-step, .os-model, .os-mods li { border-radius: 20px; }
figure.os-ph { border-radius: 20px; }
.app { border-radius: 20px; }

/* ---------- 6. focus: visible everywhere ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- 7. motion: the homepage's entrance (reduced motion untouched) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cos-js .rv {
    transform: translateY(22px);
    transition: opacity .6s var(--hp-out), transform .6s var(--hp-out);
    transition-delay: var(--d, 0s);
  }
  .cos-js .rv.is-in { transform: none; }
}

/* ---------- 8. section heads stack like the homepage (heading, then a short line) ---------- */
.sec-head, .os-keyline { display: block; }
.sec-head > :first-child, .os-keyline > :first-child { max-width: 900px; }
.sec-head__copy, .os-keyline > :last-child:not(:first-child) { margin-top: 20px; max-width: 640px; }