/* ============================================================================
   Digitalegy — "Ink and Bone"
   Design tokens. LIGHT-FIRST — light is the primary theme, dark is the alternate.
   Both ship for the whole site and blog.

   The fixed logo cyan #0FBFBF is 2.16:1 on bone (FAIL) and 8.71:1 on ink (AAA).
   Going light-first does not soften that constraint, it SHARPENS it: raw cyan can
   never carry text or a meaningful icon on the primary theme. It survives as the
   mark's own colour and as a fill behind dark text, nothing else.

   Contrast figures below are COMPUTED (scripts/contrast.py), not asserted, and
   every one is given twice: flat, and at the grain tile's worst-case excursion
   (brand/assets/grain-128.png, +/-8 amplitude at 0.55 overlay opacity).
   WCAG assumes one background value; grain makes it a distribution.
   ========================================================================= */

:root {
  /* ---- RAMPS (literal. Never reference these directly from a component.) -- */

  /* INK — violet-black, hue 286-291. The foundation and the gradient substrate.
     Deliberately OFF the teal axis so the field no longer echoes the logo,
     which is what lets the logo read as an accent placed ON the brand. */
  --ink-950:#0A0910; --ink-900:#100E1A; --ink-800:#171528;
  --ink-700:#201D3A; --ink-600:#2B2650; --ink-500:#3A3468;

  /* PAPER — warm bone, hue 82-92. Never pure white: screen-white reads as
     software, paper reads as expensive. Cheapest premium lever available. */
  --paper-50:#FBF9F4; --paper-100:#F5F2E9; --paper-200:#EAE5D6;
  --paper-300:#D8D1BE; --paper-400:#B9B0A0;

  /* METAL — champagne, hue 81-85. The "expensive" signal. Champagne+cyan is
     a pairing no HubSpot partner is using. */
  --metal-100:#E4CFA3; --metal-300:#CBAE73; --metal-500:#A98A52; --metal-700:#7E6538;

  /* ACCENT — anchored on the UNTOUCHED logo cyan. ~5% of page area, no more. */
  --accent-500:#0FBFBF; /* the logo value. Do not alter. oklch(72.9% .1229 194.8) */
  --accent-600:#0C9C9E; --accent-700:#0A7B7E; --accent-800:#075B60;

  /* ---- SPATIAL SCALE (carried over verbatim from the current theme, which
     already had a proven system — it was only ever missing colour tokens) --- */
  --container:1240px; --columns:12; --column-width:74px; --gutter:32px;
  --space-1:4px;  --space-2:8px;  --space-3:16px; --space-4:24px;
  --space-5:32px; --space-6:48px; --space-7:64px; --space-8:96px;
  --heading-ratio:1.333; /* perfect fourth */

  /* ---- TYPE ---- */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* ---- GRAIN ---- */
  --grain-tile:url("/assets/grain-128.png");
  --grain-opacity:.55;
  --grain-opacity-subtle:.32;
}

/* ============================ SEMANTIC LAYER ==============================
   Components reference ONLY these. Names say role, never colour.

   LIGHT IS THE PRIMARY THEME. The architecture is warm ground, white paper laid
   on it — the luxury-print register, a bone mount board carrying white stock —
   rather than the usual white page with grey cards. That is why the client's
   paper-200 works as the ground: long copy sits on the RAISED surface where
   contrast is best, and the ground carries chrome and headings.

     --surface-base    paper-200  the mount board
     --surface-raised  paper-50   the paper: articles, cards, forms
     --surface-sunken  paper-300  wells and insets

   Ground-to-raised separation is only 1.20:1, which is deliberate and subtle —
   always pair a raised surface with a --border-subtle hairline so the edge, not
   the tone, does the separating.
   ========================================================================= */

:root, :root[data-theme="light"] {
  --surface-base:var(--paper-200);
  --surface-raised:var(--paper-50);
  --surface-sunken:var(--paper-300);
  --surface-inverse:var(--ink-950);

  --text-primary:var(--ink-950);       /* 18.84:1 on raised · 15.74:1 on ground  AAA */
  --text-secondary:var(--ink-700);     /* 15.37:1 on raised · 12.85:1 on ground  AAA */
  --text-muted:var(--ink-500);         /* 10.67:1 on raised ·  8.91:1 on ground  AAA */
  --text-on-accent:var(--paper-50);

  /* accent-800, NOT accent-700 — see guardrail 1 */
  --accent-interactive:var(--accent-800); /* 7.46:1 raised · 6.24:1 ground  AAA/AA */
  --accent-hover:var(--accent-700);
  --focus-ring:var(--accent-800);

  --ornament:var(--metal-700);         /* 5.24:1 on RAISED only — see guardrail 2 */
  --ornament-strong:var(--ink-700);

  --border-subtle:var(--paper-300);    /* decorative — carries the raised edge */
  --border-strong:var(--ink-500);      /* 3:1+ — every stateful border */
}

/* Dark alternate. Guarded so an explicit light choice beats a dark OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-base:var(--ink-950);
    --surface-raised:var(--ink-800);
    --surface-sunken:var(--ink-900);
    --surface-inverse:var(--paper-50);

    --text-primary:var(--paper-50);     /* 18.84:1  AAA */
    --text-secondary:var(--paper-100);  /* 17.71:1  AAA */
    --text-muted:var(--paper-400);      /*  9.23:1  AAA */
    --text-on-accent:var(--ink-950);    /*  8.71:1 on raw cyan  AAA */

    --accent-interactive:var(--accent-500); /* raw logo cyan is safe HERE, 8.71:1 */
    --accent-hover:var(--accent-600);
    --focus-ring:var(--accent-500);

    --ornament:var(--metal-100);        /* 12.98:1  AAA */
    --ornament-strong:var(--metal-300); /*  9.29:1  AAA */

    --border-subtle:var(--ink-600);
    --border-strong:var(--paper-400);
  }
}

/* Explicit dark choice wins over a light OS. */
:root[data-theme="dark"] {
  --surface-base:var(--ink-950);   --surface-raised:var(--ink-800);
  --surface-sunken:var(--ink-900); --surface-inverse:var(--paper-50);
  --text-primary:var(--paper-50);  --text-secondary:var(--paper-100);
  --text-muted:var(--paper-400);   --text-on-accent:var(--ink-950);
  --accent-interactive:var(--accent-500); --accent-hover:var(--accent-600);
  --focus-ring:var(--accent-500);
  --ornament:var(--metal-100);     --ornament-strong:var(--metal-300);
  --border-subtle:var(--ink-600);  --border-strong:var(--paper-400);
}

/* ============================== GUARDRAILS ================================
   This is where token systems fail: someone picks the brand colour for a link
   because it is the brand colour, and ships a 2.16:1 link.

   1. Raw --accent-500 (#0FBFBF) is FORBIDDEN as text or a meaningful icon on ANY
      light surface: 2.16:1 on paper-50, 1.81:1 on the paper-200 ground. It fails
      even the 3.0 large-text and UI thresholds. On light use
      --accent-interactive (accent-800). accent-700 is LARGE TEXT ONLY and is
      never safe over grain — 4.81:1 flat drops to 4.45:1 at the tile's worst
      excursion, below AA. Since light is now the primary theme, this is the most
      load-bearing rule in the file.

   2. --ornament (metal-700) is AA on the RAISED surface (5.24:1) but only 4.38:1
      on the paper-200 GROUND — below AA. So metal is body-legible on cards and
      articles, and decorative on the ground: rules, dividers, 24px+ numerals.
      metal-500 and lighter are decorative everywhere on light.

   3. --border-subtle intentionally fails text contrast. Correct: WCAG 1.4.11
      wants 3:1 for meaningful UI components and state, not decorative hairlines.
      Any border communicating state switches to --border-strong. On light,
      --border-subtle is also doing real work — it is what separates a raised
      surface from a ground only 1.20:1 away.

   4. Body-copy pairs must measure >= 5.5:1 FLAT so the ~6-9% grain loss still
      clears 4.5:1. Verify: python3 scripts/contrast.py

   5. RETIRED, do not reintroduce: #FF4800 (cyan + orange is the actual
      HubSpot-partner tell), #042729, #192733.

   6. Never place text over grain above 0.55 opacity, or below 16px. Behind
      Fraunces display sizes drop to --grain-opacity-subtle. Grain on a LIGHT
      ground darkens as well as lightens — measure both excursions.
   ========================================================================= */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--surface-base);color:var(--text-primary);
  font-family:var(--font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--space-4)}
.measure{max-width:66ch}
a{color:var(--accent-interactive);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;
  line-height:1.08;text-wrap:balance;margin:0 0 var(--space-3)}
h1{font-size:clamp(38px,5.4vw,64px)} h2{font-size:clamp(26px,3.2vw,34px)} h3{font-size:21px}
p{margin:0 0 var(--space-3)}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ornament);
  font-weight:600;margin:0 0 var(--space-2)}
.lede{font-size:19px;color:var(--text-secondary)}
.muted{color:var(--text-muted)}
/* ---- the signature surface ---- */
.surface{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(in oklab 180deg,var(--ink-900) 0%,var(--ink-950) 100%);
  color:var(--paper-50)}
.surface--statement{background:
  radial-gradient(120% 90% at 12% -10%, oklch(35.9% .0877 286.4/.55) 0%, oklch(20.8% .0372 287.5/0) 62%),
  radial-gradient(85% 65% at 88% 12%, oklch(53.0% .0882 197.9/.22) 0%, oklch(43.0% .0710 201.5/0) 58%),
  linear-gradient(in oklab 180deg,var(--ink-900) 0%,var(--ink-950) 100%)}
.grain{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:url(/assets/grain-128.png);background-size:128px 128px;
  mix-blend-mode:overlay;opacity:var(--grain-opacity);z-index:1}
.grain--subtle{opacity:var(--grain-opacity-subtle)}
@supports (-webkit-hyphens:none){.grain{opacity:.40}.grain--subtle{opacity:.24}}
@media (prefers-reduced-transparency:reduce){.grain{display:none}}
@media (prefers-contrast:more){.grain{display:none}}
.surface > *:not(.grain){position:relative;z-index:2}
.surface a{color:var(--accent-500)}
/* ---- chrome ---- */
header.site{border-bottom:1px solid var(--border-subtle);background:var(--surface-raised)}
header.site .wrap{display:flex;align-items:center;gap:var(--space-4);padding-block:var(--space-3)}
.brand{display:flex;align-items:center;color:var(--text-primary);text-decoration:none;flex:none}
.brand svg{width:168px;height:auto}
nav.site{margin-left:auto;display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap}
nav.site a{color:var(--text-secondary);text-decoration:none;font-size:15px;font-weight:500}
nav.site a:hover{color:var(--accent-interactive)}
.btn{display:inline-block;background:var(--accent-interactive);color:var(--text-on-accent);
  padding:12px 22px;border-radius:2px;text-decoration:none;font-weight:600;font-size:15px;border:0;cursor:pointer}
.btn:hover{background:var(--accent-hover);color:var(--text-on-accent)}
.btn--ghost{background:transparent;color:var(--text-primary);
  box-shadow:inset 0 0 0 1px var(--border-strong)}
main{display:block}
section{padding-block:var(--space-8)}
section.tight{padding-block:var(--space-6)}
footer.site{border-top:1px solid var(--border-subtle);background:var(--surface-raised);
  padding-block:var(--space-6);font-size:14px;color:var(--text-muted)}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-5)}
footer.site a{color:var(--text-secondary);text-decoration:none;display:block;padding:3px 0}
footer.site h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ornament);margin:0 0 8px}
.badge{max-width:104px;height:auto;margin-top:var(--space-3)}
/* ---- pricing ---- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-3)}
.tier{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:2px;
  padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.tier .hrs{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ornament);font-weight:600}
.tier .rate{font-family:var(--font-display);font-size:34px;font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1}
.tier .per{font-size:13px;color:var(--text-muted)}
.tier .btn{margin-top:auto;text-align:center}
/* ---- article ---- */
article{background:var(--surface-raised);border:1px solid var(--border-subtle);
  border-radius:2px;padding:var(--space-6) var(--space-5)}
article table{width:100%;border-collapse:collapse;margin:var(--space-4) 0;font-size:15px}
article th,article td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--border-subtle)}
article th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ornament);font-weight:600}
article td{font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto}
/* legal pages: long-form statutory text, read not skimmed */
.legal{max-width:68ch}
.legal h2{font-size:23px;margin-top:var(--space-6)}
.legal h3{font-size:17px;margin-top:var(--space-5);color:var(--text-secondary)}
.legal p,.legal li{font-size:15.5px;line-height:1.72}
.legal ul{padding-left:1.15em} .legal li{margin-bottom:8px}
.legal table{font-size:14px}
.legal blockquote{margin:var(--space-4) 0;padding:14px 18px;border-left:2px solid var(--ornament);
  background:var(--surface-sunken);color:var(--text-secondary);font-size:14.5px}
.legal blockquote p{margin:0;font-size:inherit}
mark.todo{background:#FFE9A8;color:#3F2D00;font-family:var(--font-body);font-size:.86em;
  font-weight:600;letter-spacing:.06em;padding:1px 7px;border-radius:3px;white-space:nowrap}
footer.site .cols a{display:block}
.answer{border-left:3px solid var(--accent-interactive);background:var(--surface-sunken);
  padding:14px 18px;margin:var(--space-4) 0;border-radius:0 8px 8px 0}
.answer p{margin:0;font-size:16.5px;line-height:1.6;color:var(--text-primary)}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3);
  margin:var(--space-5) 0;padding:0}
.metrics div{border-top:2px solid var(--ornament);padding-top:10px}
.metrics dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);margin:0}
.metrics dd{margin:4px 0 0;font-family:var(--font-display);font-size:31px;line-height:1;
  color:var(--text-primary);font-variant-numeric:tabular-nums}
.uplink{margin:var(--space-4) 0}
.uplink a{font-weight:600}
.cardmetric{display:block;margin:2px 0 8px}
.cardmetric b{display:block;font-family:var(--font-display);font-size:27px;line-height:1;
  color:var(--text-primary);font-variant-numeric:tabular-nums}
.cardmetric{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-secondary)}
.bodycta{margin:var(--space-5) 0;padding:var(--space-4);border:1px solid var(--border-subtle);
  border-radius:10px;background:var(--surface-sunken);text-align:center}
article img{border-radius:8px;margin:var(--space-4) 0}
article a{color:var(--accent-interactive)}
.related{border-top:1px solid var(--border-subtle);margin-top:var(--space-6);padding-top:var(--space-4)}
.related h2{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ornament);margin:0 0 10px}
.related ul{margin:0;padding-left:1.1em} .related li{margin-bottom:6px;font-size:15px}
/* ---- landing page: link-free ---- */
body.lp header.site nav.site{display:none}
.lp-shell{display:grid;grid-template-columns:1fr 400px;gap:var(--space-7);align-items:start}
.formpanel{position:relative;isolation:isolate;background:var(--surface-raised);
  border:1px solid var(--border-subtle);border-radius:2px;padding:var(--space-5);overflow:hidden}
.formpanel .grain{opacity:.18}
.formpanel > *:not(.grain){position:relative;z-index:2}
.hsfield{display:block;margin-bottom:var(--space-3)}
.hsfield span{display:block;font-size:13px;font-weight:500;margin-bottom:5px;color:var(--text-secondary)}
.hsfield input,.hsfield select{width:100%;padding:11px 12px;font:inherit;font-size:15px;
  background:var(--surface-base);color:var(--text-primary);
  border:1px solid var(--border-strong);border-radius:2px}
.hp{position:absolute;left:-9999px}
.consent{font-size:12.5px;color:var(--text-muted);margin-top:var(--space-3)}
@media (max-width:820px){.lp-shell{grid-template-columns:1fr}}
.hero-media{width:100%;height:auto;border-radius:2px;display:block}
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-6);align-items:center}
@media (max-width:820px){.grid2{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-4);
  border-top:1px solid rgba(251,249,244,.18);padding-top:var(--space-4);margin-top:var(--space-5)}
.stat b{display:block;font-family:var(--font-display);font-size:38px;font-weight:600;
  color:var(--metal-100);font-variant-numeric:tabular-nums;line-height:1}
.stat span{font-size:13px;color:var(--paper-300)}
/* ---- meetings modal. Built here rather than via HubSpot's CTA tool: Meetings is
   badged "All products and plans", whereas CTAs are Marketing/Content Hub Starter+
   and HubSpot's own docs disagree about whether they survive the downgrade. ---- */
dialog.meet{border:0;padding:0;background:transparent;max-width:min(940px,94vw);width:100%}
dialog.meet::backdrop{background:oklch(8% .02 287 / .72);backdrop-filter:blur(3px)}
.meet-shell{background:var(--surface-raised);border:1px solid var(--border-subtle);
  border-radius:3px;overflow:hidden;position:relative}
.meet-bar{display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle)}
.meet-bar h2{margin:0;font-size:17px}
.meet-close{margin-left:auto;background:transparent;border:1px solid var(--border-strong);
  color:var(--text-primary);border-radius:2px;width:34px;height:34px;font-size:17px;
  cursor:pointer;line-height:1}
.meet-close:hover{background:var(--surface-sunken)}
.meet-frame{width:100%;height:min(76vh,720px);border:0;display:block;background:var(--surface-raised)}
.meet-fallback{padding:var(--space-5);text-align:center}
@media (prefers-reduced-motion:no-preference){
  dialog.meet[open]{animation:meetin .18s ease-out}
  @keyframes meetin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--space-4);top:var(--space-2);z-index:99;background:var(--surface-raised);
  padding:10px 16px;border:1px solid var(--border-strong);border-radius:2px}