/* orgomedia.ai, hand-built (2026-09-30), replacing the Framer mirror. The shared layer: tokens, type,
   the nav, the footer, buttons, cards, the launch-list dialog and the reveal-on-scroll utility. Each
   page adds its own sheet in /assets/pages/ for what only it has (its animated demos, ported unchanged).

   THE FONT AND THE NAV ARE SHARED BY EVERY SKAIL SITE: /assets/font.css (Archivo, one variable file with
   width and weight axes; the Framer pages asked for Poppins, which never loaded, beside Urbanist, Inter and
   the system font) and /assets/nav.css + nav.js are copies of SkailSites/shared/, written by sync_shared.py.
   This site sets only the nav's theme (.nav custom properties, below). Code uses the system monospace.
   Every colour, size and space below is a token in :root. */

:root {
  color-scheme: dark;

  /* colour: the Framer palette, measured on the live pages */
  --bg: #000;
  --bg-elev: #1a1a2e;          /* dialogs, raised cards */
  --bg-soft: #15152a;          /* fields */
  --surface: rgba(30, 30, 50, .4);
  --surface-2: rgba(255, 255, 255, .06);
  --txt: #fff;
  --txt-2: #f3f4f6;
  --body: #c5c8d1;             /* 11.7:1 on --bg */
  --muted: #a8afbd;            /* 9.0:1 on --bg, 6.9:1 on --bg-elev */
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .16);
  --line-strong: #3a3a5a;
  --accent: #6c3aed;           /* fills under white text: 6.7:1 */
  --accent-2: #8478f0;         /* accent text on the dark page: 5.5:1 */
  --accent-3: #a78bfa;         /* the light accent: 7.6:1 */
  --accent-pink: #a358df;
  --green: #34d399;
  --error: #ff8a80;
  --grad-accent: linear-gradient(90deg, var(--accent), var(--accent-pink));
  --grad-button: linear-gradient(135deg, #8a59dd, #7330d4);        /* white on its light end: 4.6:1 */
  --grad-button-hover: linear-gradient(135deg, #7442d6, #5f22c2);  /* hover darkens: Framer's lightened to 3.1:1 */
  --glow: radial-gradient(60% 50% at 50% 0%, rgba(108, 58, 237, .35), transparent 70%);

  /* type */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-display: clamp(40px, 6vw, 76px);
  --fs-h2: clamp(30px, 4vw, 48px);
  --fs-h3: clamp(20px, 2vw, 24px);
  --fs-lead: clamp(17px, 1.6vw, 20px);
  --fs-body: 16px;
  --fs-small: 15px;
  --fs-label: 14px;            /* the smallest text on the site */
  --fw-body: 450;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.08;
  --lh-body: 1.6;
  --note-measure: 46em;       /* fine print (a 14px footnote under a wide table): two lines of about 90 characters, not three ragged ones in a thin column. The owner's call, 2026-10-01 ("still awkward wrap the way the 3 rows are stacked"): it costs Impeccable line-length findings, which the baselines record on purpose */
  --lead-measure: 36em;       /* every centered lead, note and caption: about 75 characters a line in its OWN font. Impeccable's line-length rule fails past 80, and 52rem (about 92) added 109 findings on orgomedia.ai, 2026-10-01. A box that looks too wide for it is narrowed to the text, never the text widened to the box */
  --measure: 55ch;             /* a ch is a "0", wider than Archivo's average letter: 55ch holds about 72 characters a line */
  --track-label: .08em;

  /* space and shape */
  /* page width and gutter: --page-max and --page-gutter, from the shared /assets/layout.css */
  --sec-y: clamp(64px, 9vw, 120px);
  --r-sm: 5px;
  --r: 12px;
  --r-lg: 26px;
  --r-pill: 999px;
  --dur: .18s;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* no rubber-band at the edges: during the bounce Chrome on macOS paints the fixed nav's backdrop-filter from a
   stale frame of the animated hero canvas, which covers the pill. Skail has no canvas, so it never showed there. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 104px; overscroll-behavior-y: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--txt);
  font-family: var(--font); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
code, pre, kbd { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--txt); color: var(--bg); padding: 10px 14px; border-radius: var(--r-sm); }
.skip:focus { left: 8px; }

/* ── type ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-bold); letter-spacing: -.02em; line-height: var(--lh-tight); color: var(--txt); text-wrap: pretty; }   /* a heading fills its line and never ends on a lone word; balance broke a left-aligned title with a third of its line empty (2026-10-18, the guard's measureEarlyHeading) */
p, li, dd { text-wrap: pretty; }   /* nor does a paragraph (the guard, test_text_fills_its_box.py, holds both) */
.fx-lead, .hm-more, .hm-intro, .hm-captions p, .omc-foot, .pr-note { text-wrap: balance; }   /* centered short paragraphs even out (pretty let one-word lines through); pretty is for left-aligned prose. Not the purple closing bands (.fx-cta p, .hw-cta p, .pr-cta-lead): balance evened their two lines to 300px of a 358px measure at 390, a narrow column in a wide band (SkailSites queue 132), so they keep the pretty above */
h1, .display { font-size: var(--fs-display); letter-spacing: -.03em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.01em; line-height: 1.25; }
p { margin: 0 0 1em; }
.lead { font-size: var(--fs-lead); color: var(--body); max-width: var(--measure); }
.prose p, .prose li { max-width: var(--measure); color: var(--body); }
.muted { color: var(--muted); }
.accent { color: var(--accent-2); }

/* ── sections ─────────────────────────────────────────────────────────── */
.sec { padding: var(--sec-y) 0; }
.sec-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.sec-head .lead { margin: 16px auto 0; }
.hero { position: relative; padding: 168px 0 var(--sec-y); text-align: center; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--glow); pointer-events: none; z-index: -1; }
.hero .lead { margin: 22px auto 0; }

/* the shared plan cards (assets/plans.css) in orgo's colours: purple where PageSoar is green */
.s-pricing {
  --ps-brand: var(--accent); --ps-on-fill: #fff; --ps-surface: var(--bg-elev); --ps-glass-strong: var(--bg-elev);
  --ps-line: var(--line-2); --ps-line2: var(--line); --ps-ink: var(--txt); --ps-ink2: var(--body); --ps-ink3: var(--muted);
  --ps-brand-l: rgba(108, 58, 237, .16); --ps-brand-d: var(--accent-3);
}
/* narrow phones, one card per row: the plan name a step under the 32px section heads, not 30px beside them
   (Impeccable's flat-type-hierarchy read h1 34 / h2 32 / h3 30 on the home page at 390 wide, 2026-10-15) */
@media (max-width: 479.98px) { .s-pricing { --ps-fs-h1: 24px; } }
.s-plan :is(h2, h3) { color: var(--txt); }
.s-plan .s-tick { color: var(--green); }
/* the card's primary button is the flat accent fill, as in the waitlist dialog, not the gradient */
.s-plan .btn:not(.btn-ghost) { background: var(--accent); }
.s-plan .btn:not(.btn-ghost):hover { background: #7c4df0; }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer;
  font: var(--fw-semibold) 16px/1 var(--font); text-decoration: none; color: #fff;
  background: var(--grad-button); transition: background var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) ease;
}
.btn:hover { background: var(--grad-button-hover); }
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; }
.btn-ghost { background: transparent; border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn:disabled { opacity: .6; cursor: default; }
/* the white button on the purple launch bands (Framer variant "Tertiary", no Apple mark); pages set its size and hover */
.btn.btn--light { background: #fff; color: var(--accent); }
.btn.btn--light svg { display: none; }
/* every hero wave (pages/hero-gradient.js) fades out over its lower part, so wherever its box ends the wave
   never stops in a hard line */
canvas[data-hero-gradient] { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }

/* ── cards ────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--txt-2); }

/* ── nav: the shared component (/assets/nav.css); this site's theme only ────── */
.nav { --nav-fill: rgb(30, 30, 50); --nav-panel: rgb(30, 30, 50); --nav-scrim: var(--bg); --nav-ink: var(--txt); }
/* no backdrop blur here: the shared sheet has none (2026-10-31), and the fill above is solid */
/* the wordmark matches nowlark.com's (.s-brand, owner 2026-10-14): the system face at 22px bold, -.02em, 8px to
   the mark, and 52px from the word's end to the first link's text (30 here + 8 navbar gap + 14 link padding). */
.nav-logo { gap: 8px; margin-right: 30px; font: 700 22px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; }

/* ── footer ───────────────────────────────────────────────────────────── */
/* the Framer footer: a navy band (#1a1a2e) straight after the page, the mark with its wordmark, white
   column heads */
.footer { background: var(--bg-elev); padding: 56px 0 32px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.foot-mark { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--txt); text-decoration: none; }
.foot-mark img { width: 64px; height: auto; }
.foot-mark span { font: 700 22px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; }   /* the bar's wordmark (.nav-logo), one brand mark in one weight (the board, item 6) */
.foot-brand p { color: var(--muted); max-width: 280px; margin: 0; }
.foot-brand .foot-contact { margin-top: 14px; }
.foot-contact a { color: var(--txt-2); text-decoration: none; }
.foot-contact a:hover { color: var(--accent-3); }
.foot-col h2 { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--txt); margin-bottom: 14px; }   /* sentence case, as written: no small uppercase label over a column (item 63) */
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-col a { color: var(--txt-2); text-decoration: none; font-size: var(--fs-small); }
.foot-col a:hover { color: var(--accent-3); }
.foot-legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 10px; color: var(--muted); font-size: var(--fs-label); }
.foot-legal p { margin: 0; max-width: 72ch; }
/* the legal text is two stacked rows, each as wide as the footer: the copyright, then the trademark notice. (2026-10-01: three layouts that split it into columns each left a hole or a ragged orphan; the owner asked for rows.) */

/* ── the launch-list dialog (opened by any [data-waitlist] button) ───────── */
.wl-backdrop {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(5, 5, 15, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.wl-backdrop[hidden] { display: none; }
.wl-dialog {
  position: relative; width: 100%; max-width: 460px; padding: 32px; border-radius: 16px;
  background: var(--bg-elev); border: 1px solid #2a2a44;   /* the edge alone; the backdrop already lifts it */
}
@media (prefers-reduced-motion: no-preference) { .wl-backdrop:not([hidden]) .wl-dialog { animation: wl-in .32s var(--ease); } }
@keyframes wl-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.wl-close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 8px; border: 1px solid #2a2a44; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.wl-dialog h2 { font-size: 22px; letter-spacing: -.01em; line-height: 1.3; margin: 0 0 10px; }
.wl-dialog p { color: var(--muted); font-size: var(--fs-small); margin: 0 0 20px; }
.wl-dialog label span { display: block; margin-bottom: 6px; font-size: var(--fs-label); font-weight: var(--fw-semibold); }
.wl-dialog input[type="email"] {
  width: 100%; height: 46px; padding: 0 14px; margin-bottom: 12px; border-radius: 6px; outline: none;
  border: 1px solid var(--line-strong); background: var(--bg-soft); color: var(--txt); font: 16px var(--font);
}
.wl-dialog input[type="email"]:focus { border-color: var(--accent-3); }
.wl-dialog input[aria-invalid="true"] { border-color: var(--error); }
.wl-dialog .btn { width: 100%; height: 46px; padding: 0; background: var(--accent); font-size: var(--fs-small); }
.wl-dialog .btn:hover { background: #5b2bd9; }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl-error { margin: 10px 0 0 !important; color: var(--error) !important; font-size: var(--fs-label) !important; }
.wl-error:empty { display: none; }
.wl-note { margin: 16px 0 0 !important; font-size: var(--fs-label) !important; }
.wl-note span { white-space: nowrap; }
.wl-body p { text-wrap: pretty; }
.wl-done { text-align: center; padding: 8px 0; }
.wl-done .tick { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; background: rgba(167, 139, 250, .14); color: var(--accent-3); }
.wl-done p { color: var(--txt); font-size: 16px; font-weight: 500; margin: 0; }

/* ── reveal on scroll: the Framer pages' entrance effect ─────────────────────
   An element with data-reveal fades and rises into place the first time it enters the screen (site.js
   adds .is-in). Without script, or with reduced motion, it is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(var(--reveal-y, 24px)); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--reveal-delay, 0s); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ── smaller screens ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* the three link columns stay one row under the brand, so Legal never sits alone on a row of its own */
  .foot-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; }
  .foot-brand { grid-column: 1 / -1; }
}
/* on a phone each column is as wide as its longest link, spread across the row, so "Terms of Service" stays on one line,
   and every link is a 44px row to tap (the board, item 6); below about 340px the longest may still wrap */
@media (max-width: 640px) {
  .foot-grid { grid-template-columns: repeat(3, auto); justify-content: space-between; }
  .foot-col ul { gap: 0; }
  .foot-col a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-col h2 { margin-bottom: 4px; }
}
@media (max-width: 640px) {
  .hero { padding-top: 132px; }
}

/* A closing band, or the plan cards with their own buttons ([data-cta-band]), holds the page's one primary action while in view, so the bar's
   own "Notify me" turns secondary, an outline that keeps its place in the pill (site.js sets .cta-band-in). Queue 132. */
.nav-cta:not(.nav-menu-cta) { transition: background-color .2s ease, border-color .2s ease; }
.cta-band-in .nav-cta:not(.nav-menu-cta) { background: transparent; border-color: var(--line-2); }
.cta-band-in .nav-cta:not(.nav-menu-cta):hover { background: var(--surface-2); }
/* The plan row's one action, under the cards. */
.s-plans-a{display:flex;justify-content:center;margin-top:28px}
/* With the action under the row, a card is four rows (name, price, line, ticks): no empty tracks at its foot. */
.s-plans:not(:has(.s-plan-a)){grid-template-rows:repeat(4,auto)}
.s-plans:not(:has(.s-plan-a)) .s-plan .s-ticks{margin-bottom:0}
.s-plans:not(:has(.s-plan-a)) .s-plan{padding-bottom:var(--ps-sp-7)}