/* Intellica — brand tokens + base. Direction A ("typing…") promoted to the homepage, 2026-09-05.
   The film team can lift everything in :root. Opens over file://. */

:root {
  /* colour — tech × human (2026-09-17, from _explorations/system-tech-human.html)
     A cool software ground; everything warm is an OBJECT sitting on it (paper, tape, pigment, handwriting).
     Two blues on purpose: brand blue carries identity (mark, buttons, display accents); the real iMessage
     blue stays inside bubbles so the threads look like screenshots, not ads. Ink is pen ink, not black. */
  --ground: #F6F9FB;         /* vapour: the software ground */
  --surface: #FFFFFF;        /* elevated software panel */
  --sheet: #FAFAF9;          /* paper "subtle": an accent, never the ground */
  --paper: var(--sheet);     /* legacy alias: paper objects */
  --paper-2: var(--surface); /* legacy alias: cards, received bubbles */
  --paper-3: #EDF1F5;        /* cool tint for rows inside software UI (was warm) */
  --ink: #020B24;            /* pen ink = the logo navy, so mark, type and ground are one system */
  --ink-2: color-mix(in oklab, var(--ink) 62%, var(--ground));
  --ink-3: color-mix(in oklab, var(--ink) 38%, var(--ground));
  --line: color-mix(in oklab, var(--ink) 12%, transparent);
  --line-2: color-mix(in oklab, var(--ink) 20%, transparent);
  --hero: #0A1BFF;           /* brand blue: identity (mark, buttons, display accents) */
  --hero-deep: #0814C8;
  --hero-tint: color-mix(in oklab, var(--hero) 14%, var(--ground));
  --wash: #FFE9C9;           /* the second pigment: warm cream (the riso cream), so a wash reads as blue ink bleeding into paper */
  --blue: #147BFF;           /* the real iMessage blue: ONLY where iMessage itself paints it (sent bubbles, the send button) */
  --blue-deep: #0B62D6;
  --blue-tint: #E6F0FF;
  --sms: #34C759;            /* the green bubble: SMS / Android, "not iMessage". Where blasts and shortcodes live */
  --sms-deep: #248A3D;
  --sms-in: #E4EBE2;         /* received bubble in an SMS thread: a faint green-cast grey, so the whole thread reads cooler */
  --sms-ink: #0B3A16;
  --bubble-in: #E9E9EB;      /* received bubble in an iMessage thread: exactly iOS */
  --spam: var(--sms);        /* legacy alias: the gray-green villain retired 2026-09-18; the villain is the green bubble */
  --spam-ink: #fff;
  --android: "Roboto", var(--sans);   /* Android type for SMS bubbles (loaded where used) */
  --emoji-android: "Noto Color Emoji";

  /* the desk colours (locked 2026-09-18). Each has a UI value (the traffic light / status), a pen value (ink on paper)
     and a paper value (the stock). UI is for software; pen and paper are for the warm objects. */
  --red: #FF5F57;            /* window close · error */
  --red-pen: #D8322A;        /* red pen: corrections, the crossed-out line, "no" */
  --red-tint: color-mix(in oklab, var(--red) 14%, var(--ground));
  --yellow: #FEBC2E;         /* window minimise · pending */
  --yellow-hl: rgba(255, 230, 0, .42);   /* highlighter, multiply over text */
  --yellow-paper: #FFE68A;   /* sticky-note stock */
  --yellow-tint: color-mix(in oklab, var(--yellow) 18%, var(--ground));
  --green: #28C840;          /* window maximise · live */
  --green-ui: #22A559;       /* confirm, order confirmed, "you keep" */
  --green-paper: #DCEBD6;    /* money green: receipt / ledger paper */
  --green-tint: color-mix(in oklab, var(--green-ui) 14%, var(--ground));
  --graphite: #6B6F7A;       /* pencil: hand marks and doodles that are notes, not signatures */
  --receipt: var(--green-ui); /* legacy alias */
  --note: var(--yellow-paper); /* legacy alias */
  --tape: rgba(255, 233, 150, .55);
  --shopify: #95BF47;
  --slack: #4A154B;

  /* type */
  /* three faces, three jobs (2026-09-06): Pitch = what the machine types (wordmark, labels, fine print),
     Fraunces = what the person says (headlines; Calvin chose it over Cooper Light, and it is free),
     Geist = the phone (body, UI, bubbles). Free stand-in until licence: IBM Plex Mono for Pitch. */
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "Pitch", "Test Pitch", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --hand: "Caveat", "Bradley Hand", cursive;
  --display: "Fraunces", Georgia, serif;
  --display-fvs: "opsz" 9, "SOFT" 100, "WONK" 1;   /* the soft, low-contrast end of Fraunces. For the crisp high-contrast cut: "opsz" 144, "SOFT" 0 */
  --display-w: 350;

  /* shape */
  --r-card: 20px;
  --r-bubble: 18px;
  --shadow-1: 0 1px 2px rgba(2,11,36,.04), 0 8px 30px rgba(2,11,36,.08);
  --shadow-2: 0 2px 6px rgba(2,11,36,.06), 0 18px 50px rgba(2,11,36,.12);
  --shadow-paper: 1px 2px 0 rgba(2,11,36,.05), 0 14px 34px rgba(2,11,36,.11);   /* paper objects: a real desk shadow */

  /* texture + motion */
  --paper-grain: .16;        /* grain on paper objects only; sibling of --panel-grain. the ground stays clean */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-arrive: 320ms;
  --float-amp: 7px;

  /* layout */
  --max: 1200px;
  --gutter: 40px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }
h1, h2, h3, p { margin: 0; }

/* Paper grain — opt-in, on paper objects only.
   The ground is software and stays clean; texture belongs to the warm things sitting
   on it. Same mechanics and same noise as .panel::after so every paper surface in the
   system is the same stock. Add `.grain` to any paper object; `.note` carries it already.
   Sits above the object's own background and below its ink, the way paper does.
   Uses ::after because .tape already owns ::before. */
.grain, .note { position: relative; isolation: isolate; }
.grain::after, .note::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  opacity: var(--paper-grain, .16); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-size: 260px 260px;
}

/* type scale */
.display, .h1, .h2, .h3 { font-family: var(--display); font-weight: var(--display-w); font-variation-settings: var(--display-fvs); }
.h1 { font-family: var(--sans); font-weight: 500; font-variation-settings: normal; letter-spacing: -.035em; font-size: clamp(46px, 5.8vw, 82px); line-height: 1; }   /* Geist: the phone's voice. Alt: Pitch 400 (see _explorations/h1-faces.html) */
.h2 { letter-spacing: -.02em; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; }
.h3 { letter-spacing: -.01em; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-3); }
.lede { font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.lede b, .sub b { color: var(--ink); font-weight: 500; }
em.blue { font-style: normal; color: var(--hero); }

/* text selection (Calvin, 2026-10-17): brand blue with white text. On the brand-blue surfaces (the footer, the pricing
   panel, primary buttons) that would vanish, so there it flips: white with brand-blue text. The phone inside the pricing
   panel is a white screen, so it keeps the normal highlight. */
::selection { background: var(--hero); color: #fff; }
.foot ::selection, .pp-right ::selection, .btn.primary::selection, .btn.primary ::selection { background: #fff; color: var(--hero); }
.pp-right .pp-phone ::selection { background: var(--hero); color: #fff; }

/* container */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; }

/* the lockup (Calvin, 2026-10-12): the client's current two-bar mark + "intellica" in Geist 500, the face of the hero and
   footer. The mark sits on the baseline at the height of the ascenders (l, t). Used on index.html / index-alt.html. */
.lk { display: inline-flex; align-items: baseline; gap: .24em; font-family: var(--sans); font-weight: 500; font-size: 27px;
  letter-spacing: -.035em; line-height: 1; color: var(--ink); text-decoration: none; white-space: nowrap; }
.lk-mark { display: block; flex: none; width: .74em; height: .74em; }
.lk-card { font-size: 21px; }   /* on the stat cards, beside the brands' logos */

/* lockup image (Calvin's, 2026-09-06): full bust + Intellica in a high-contrast serif */
.lockup-img { display: block; height: 29px; width: auto; }   /* a touch smaller in the nav (Calvin, was 34px) */
.hero .lockup-img { height: 64px; }
.footer .lockup-img { height: 26px; }

/* wordmark: lockup 01 "head at x-height" — the head of the mark, CSS-cropped, sits on the baseline at
   x-height like a first letter; the word is Pitch (typed, not branded) with the two i-dots in blue.
   Numbers are in em of the wordmark size so nav and hero share them. */
.lockup { --mark-h: .6; --gap: .22; --shift: .01; --dot: .13; --dot-y: .70;
  display: inline-flex; align-items: baseline; gap: calc(var(--gap) * 1em); font-size: 24px; color: var(--ink); white-space: nowrap; line-height: 1; }
.lockup .crop { --H: calc(var(--mark-h) * 1em / .61); display: block; position: relative; overflow: hidden; flex: none;
  height: calc(var(--mark-h) * 1em); width: calc(var(--H) * .8175 * .65); transform: translateY(calc(var(--shift) * 1em)); align-self: flex-end; }
.lockup .crop img { position: absolute; top: 0; left: calc(var(--H) * .8175 * -.167); height: var(--H); width: auto; max-width: none; }
.lockup .mark { display: block; height: calc(var(--mark-h) * 1em); width: auto; flex: none; }
.wm { font-family: var(--mono); font-weight: 500; letter-spacing: -.02em; font-size: 1em; line-height: 1; color: inherit; }
.wm i { font-style: normal; position: relative; display: inline-block; }
.wm i::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--dot-y) * 1em); width: calc(var(--dot) * 1em); height: calc(var(--dot) * 1em); margin-left: calc(var(--dot) * -.5em + .01em); border-radius: 50%; background: var(--hero); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 500; font-size: 16px; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.btn.primary { background: var(--hero); color: #fff; box-shadow: 0 10px 24px rgba(10,27,255,.22); }
.btn.primary:hover { background: var(--hero-deep); transform: translateY(-1px); }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-1); }
.btn.ghost:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn.small { padding: 10px 16px; font-size: 14px; }

/* nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter);
  background: color-mix(in srgb, var(--ground) 78%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav .links { display: flex; gap: 28px; font-size: 15px; color: var(--ink-2); margin-left: auto; margin-right: 32px; }   /* right-aligned, beside the button (Calvin) */
.nav .links a:hover { color: var(--ink); }
@media (max-width: 800px) { .nav .links { display: none; } .nav { padding: 12px 20px; } :root { --gutter: 20px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* desk colour helpers */
.hl { background: linear-gradient(transparent 12%, var(--yellow-hl) 12%, var(--yellow-hl) 88%, transparent 88%); padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ink-red { color: var(--red-pen); }
.strike-red { position: relative; }
.strike-red::after { content: ""; position: absolute; left: -.1em; right: -.1em; top: 55%; height: .09em; background: var(--red-pen); transform: rotate(-2deg); }
.lights { display: inline-flex; gap: 7px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(2,11,36,.18); }
.lights i:nth-child(1) { background: var(--red); } .lights i:nth-child(2) { background: var(--yellow); } .lights i:nth-child(3) { background: var(--green); }