/* Generated by scripts/port-brand-pages.py from GraphonAI/graphon-brand. Do not edit by hand. */

  /* Research · the video ingestion post, with its video map drawn in the site's palette. */
  :root {
    --paper: #F2F0EB;
    --ink: #111111;
    --muted: #6B6862;
    --rule: #111111;
    --faint: #DCD9D2;
    --cyan: #08C6CA;      /* flat stand-in for canvas drawing; surfaces use --cyan-paint */
    --cyan-paint: repeating-linear-gradient(176deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px 3px, rgba(0, 60, 66, .07) 3px 4px, transparent 4px 6px),
      linear-gradient(100deg, #00ECF0 0%, #0BD3D8 38%, #10B4BB 72%, #16A0A8 100%);
    --cyan-edge: #111111;
    --pen: #2A3FB8;
    --t0: #D98C78;   /* video      · dusty coral   */
    --t1: #D4B160;   /* audio      · faded mustard */
    --t2: #9DB8C9;   /* pdf        · powder blue   */
    --t3: #9FB096;   /* txt · md   · sage          */
    --t4: #B3A5C4;   /* json · xlsx · lavender grey */
    --sans: "Instrument Sans", system-ui, sans-serif;
    --mono: "DM Mono", ui-monospace, monospace;
    --display: "Fraunces", Georgia, serif;   /* the soft serif: rounded and a little wonky */
    --dw: 400;          /* display weight */
    --dt: .35;          /* display tracking multiplier */
    --dfv: "SOFT" 100, "WONK" 1, "opsz" 144;
  }
  [data-theme="dark"] {
    --paper: #0D0D0C;
    --ink: #EEECE6;
    --muted: #8D8A83;
    --rule: #EEECE6;
    --faint: #262624;
    --cyan-edge: transparent;
    --pen: #9AAEFF;
    --t0: #C27A67;
    --t1: #BE9E52;
    --t2: #7F9DB0;
    --t3: #889B80;
    --t4: #988AAE;
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--sans); }
  :root { --gutter: 32px; }
  @media (max-width: 600px) { :root { --gutter: 20px; } }
  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
  .mono { font-family: var(--mono); }
  a { color: var(--ink); }
  body > nav { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--faint); }
  body > nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; }
  .logo img { height: 28px; display: block; }
  body > nav .links { display: flex; gap: 28px; margin-left: auto; margin-right: 32px; }
  body > nav .links a { text-decoration: none; font-size: 14px; }
  @media (max-width: 900px) { body > nav .links { display: none; } }
  .btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; font: 500 14px var(--sans); text-decoration: none; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
  .btn:hover { background: var(--cyan-paint); color: #111; border-color: var(--cyan-edge); }
  .legal { min-height: 50vh; max-width: 760px; padding-top: 72px; padding-bottom: 96px; }
  .legal .eyebrow { font: 400 12px var(--mono); color: var(--muted); margin: 0 0 14px; }
  .legal h1 { font: var(--dw) clamp(40px, 6vw, 64px)/1.02 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.045em * var(--dt)); margin: 0 0 14px; }
  .legal .updated { font: 400 12px var(--mono); color: var(--muted); margin: 0 0 44px; }
  .legal h2 { font: var(--dw) 28px/1.15 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.02em * var(--dt)); margin: 52px 0 14px; padding-top: 20px; border-top: 1px solid var(--faint); }
  .legal h3 { font: 500 17px/1.3 var(--sans); margin: 30px 0 8px; }
  .legal h4 { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 24px 0 8px; }
  .legal p, .legal li { color: #2b2a27; }
  .legal p { margin: 0 0 14px; }
  .legal ul, .legal ol { margin: 0 0 16px; padding-left: 22px; }
  .legal li { margin-bottom: 6px; }
  .legal a { text-underline-offset: 3px; word-break: break-word; }
  /* footer: on the paper like everything else; links, the SOC 2 seal, then the small print */
  footer { border-top: 0; }
  footer a { color: inherit; }
  footer .wrap { padding-top: 28px; padding-bottom: 28px; }
  .foot-links { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-bottom: 28px; border-bottom: 1px solid var(--faint); font-size: 13px; }
  .foot-links a { text-decoration: none; color: var(--muted); }
  .foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .foot-seal { display: flex; align-items: center; gap: 24px; padding: 28px 0; }
  .foot-seal .seal img { display: block; width: 68px; height: auto; }
  .foot-seal p { margin: 0; display: grid; gap: 4px; }
  .foot-seal strong { font: var(--dw) 22px/1.15 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.02em * var(--dt)); }
  .foot-seal .mono { font-size: 12px; color: var(--muted); }
  .foot-seal .mono a { color: var(--ink); text-underline-offset: 3px; }
  .foot-end { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; color: var(--muted); padding-top: 18px; border-top: 1px solid var(--faint); }
  .foot-end .plain { display: none; }   /* the painted page's voice line */
  @media (max-width: 900px) {
    .foot-links { gap: 10px 20px; }
    .foot-seal { gap: 16px; } .foot-seal .seal img { width: 54px; } .foot-seal strong { font-size: 19px; }
    .foot-end { flex-direction: column; gap: 4px; }
  }
  /* Industries menu in the header: opens on click (and on hover where there is a mouse) */
  .menu { position: relative; display: flex; align-items: center; }
  .menu-btn { display: flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; font: inherit; font-size: 14px; color: inherit; cursor: pointer; }
  .menu-btn svg { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .2s; }
  .menu.open .menu-btn svg { transform: rotate(180deg); }
  .menu-list { position: absolute; top: calc(100% + 14px); left: -16px; min-width: 240px; display: grid; padding: 8px 0; background: var(--paper);
    border: 1px solid var(--faint); box-shadow: 0 10px 30px rgba(17, 17, 17, .08); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s, visibility 0s .18s; z-index: 30; }
  .menu.open .menu-list { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
  .menu-list a { padding: 9px 16px; font-size: 14px; text-decoration: none; color: var(--ink); }
  .menu-list a:hover, .menu-list a:focus-visible { background: var(--faint); outline: none; }
  @media (hover: hover) { .menu:hover .menu-list { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; } .menu:hover .menu-btn svg { transform: rotate(180deg); } }
  .menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }   /* keeps the hover alive across the gap */

/* Added by the port: the page shows once this sheet has applied. */
.painted.painted { visibility: visible; }   /* doubled, so it wins whichever sheet loads last */