/* Copied from GraphonAI/graphon-brand by scripts/port-brand-pages.py, then edited on the site (the benchmarks moved to src/styles/bench.css), so the script leaves it alone. */

  /* Paper and ink, five chalky data tones, and one saturated color that means "remembered". */
  :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; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--sans); transition: background .3s, color .3s; }
  a { color: inherit; }
  :root { --gutter: 32px; }
  @media (max-width: 600px) { :root { --gutter: 20px; } }   /* phones: a narrower side margin */
  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
  .mono { font: 400 11px/1.6 var(--mono); letter-spacing: .02em; }
  .muted { color: var(--muted); }
  mark { background: var(--cyan-paint); color: #111; padding: 0 .2em; box-shadow: inset 0 0 0 1px var(--cyan-edge); }

  nav { position: sticky; top: 0; z-index: 10; background: var(--paper); transition: background .3s; }
  .skywash nav:not(.stuck) { background: transparent; }   /* over the hero the sky runs on up behind the header */
  nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; pointer-events: none;
    background: linear-gradient(var(--paper), transparent); opacity: 0; transition: opacity .3s; }   /* once scrolled, a soft fade instead of a rule */
  nav.stuck::after { opacity: 1; }
  nav .wrap { display: flex; align-items: center; height: 56px; gap: 32px; }
  .logo { display: flex; align-items: center; text-decoration: none; }
  .logo img { height: 28px; width: auto; display: block; }
  .logo .lk-white, [data-theme="dark"] .logo .lk-black { display: none; }
  [data-theme="dark"] .logo .lk-white { display: block; }
  .mark { display: grid; grid-template-columns: repeat(2, 8px); gap: 2px; }
  .mark i { width: 8px; height: 8px; background: var(--ink); }
  .mark i:nth-child(4) { background: var(--cyan-paint); box-shadow: inset 0 0 0 1px var(--cyan-edge); }
  nav .links { display: flex; gap: 28px; margin-left: auto; }
  nav .links a { text-decoration: none; font-size: 14px; }
  .btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; font: 500 14px var(--sans); text-decoration: none; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); cursor: pointer; }
  .btn.line { background: transparent; color: var(--ink); }
  .btn:hover { background: var(--cyan-paint); color: #111; border-color: var(--cyan-edge); }

  .hero { padding: 56px 0 0; }
  .hero .eyebrow { margin-bottom: 28px; }
  h1 { font: var(--dw) clamp(56px, 9.4vw, 140px)/.92 var(--display); letter-spacing: calc(-.05em * var(--dt)); font-variation-settings: var(--dfv); margin: 0; max-width: 1200px; }
  .hero .sub p { font-size: 21px !important; max-width: 600px !important; }
  .thesis { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 64px 0 72px; margin-top: 56px; border-top: 1px solid var(--faint); }
  .thesis p { font: 400 clamp(26px, 3vw, 40px)/1.15 var(--display); letter-spacing: calc(-.025em * var(--dt)); font-variation-settings: var(--dfv); margin: 0; max-width: 760px; }
  .thesis .quiet { color: var(--muted); }
  .thesis sup { font-size: .5em; color: var(--muted); }
  .hero .sub { display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: 96px; align-items: start; margin: 32px 0 44px; }
  .hero .lead-col .ctas { margin-top: 28px; }
  .hero .btn { height: 44px; padding: 0 20px; font-size: 15px; }
  .btn.cyan { background: var(--cyan-paint); color: #111; border-color: var(--cyan-edge); }
  .btn.cyan:hover { background: repeating-linear-gradient(176deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 3px), linear-gradient(100deg, #10B4BB, #138F97); color: #111; }
  .hero .sub p { font-size: 19px; max-width: 520px; margin: 0; }
  .ctas { display: flex; gap: 8px; }
  .band { display: block; width: 100%; }
  .band-cap { display: flex; justify-content: flex-end; padding: 12px 0 0;
    font: var(--dw) 22px/1.2 var(--display); letter-spacing: calc(-.01em * var(--dt)); font-variation-settings: var(--dfv); }   /* the soft serif */
  .gm { display: none; }
  .s-genmem .gm { display: flex; }
  section.bet { border-top: 0; }
  /* ---- sky wash: the elephant painting's sky continues up from the band to the header ---- */
  header.hero { position: relative; isolation: isolate; }
  .sky-up { display: none; }
  .sky-pix { position: absolute; left: 0; width: 100%; z-index: -1; pointer-events: none; }   /* the band's squares, carried on up behind the headline */
  @media (max-width: 900px) { .sky-pix { display: none; } }
  .skywash .sky-up { display: block; position: absolute; left: 0; right: 0; bottom: 100%; z-index: -1; pointer-events: none;
    background: url(/painted/images/lively/hero-sky-up.webp) center bottom / 100% auto no-repeat;   /* the same painting, continuing above the band */
    --front: 1.2;   /* where the squares are landing, as a fraction of the width; the painting follows it exactly */
    --rise-mask: linear-gradient(to right, #000 calc(var(--front) * 100% - 4%), transparent calc(var(--front) * 100% + 8%));
    -webkit-mask: linear-gradient(to top, #000 0%, #000 18%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.12) 100%), linear-gradient(to right, transparent 36%, #000 56%), var(--rise-mask);
    -webkit-mask-composite: source-in, source-in; mask: linear-gradient(to top, #000 0%, #000 18%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.12) 100%), linear-gradient(to right, transparent 36%, #000 56%), var(--rise-mask); mask-composite: intersect, intersect; }
  /* full width: the sky spans the whole headline, easing out only at the bottom left where it meets the squares on paper */
  .skyfull .sky-up { --left-mask: radial-gradient(75% 60% at 0% 100%, transparent 25%, #000 100%);
    -webkit-mask: linear-gradient(to top, #000 0%, #000 18%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.12) 100%), var(--left-mask), var(--rise-mask);
    mask: linear-gradient(to top, #000 0%, #000 18%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.12) 100%), var(--left-mask), var(--rise-mask);
    -webkit-mask-composite: source-in, source-in; mask-composite: intersect, intersect; }   /* the mask shorthand resets composite */
  .skywash .bandwrap { -webkit-mask: none !important; mask: none !important; }   /* no soft top edge: the sky runs straight on */
  .skywash .band { -webkit-mask: linear-gradient(#000 82%, transparent); mask: linear-gradient(#000 82%, transparent); }

  section { border-top: 1px solid var(--rule); }
  .sec-head { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 32px 0 56px; }
  h2 { font: var(--dw) clamp(34px, 4.2vw, 60px)/1 var(--display); letter-spacing: calc(-.035em * var(--dt)); font-variation-settings: var(--dfv); margin: 0; max-width: 900px; }

  .story { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; }
  .steps .step { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transition: opacity .4s; }
  .steps .step:first-child { justify-content: flex-start; padding-top: 12vh; }
  .steps .step.on { opacity: 1; }
  /* room under the last step, so it can scroll up level with the pinned figure before the section ends */
  @media (min-width: 901px) { .steps { padding-bottom: max(0px, calc(15vh - 70px)); } }
  .step h3 { font: var(--dw) 34px/1.05 var(--display); letter-spacing: calc(-.03em * var(--dt)); font-variation-settings: var(--dfv); margin: 12px 0 14px; }
  .step p { margin: 0; max-width: 420px; color: var(--muted); }
  .props { margin: 22px 0 0; max-width: 420px; font-size: 12px; }   /* what Graphon brings, as a spec sheet */
  .props div { display: grid; grid-template-columns: 136px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--faint); }
  .props div:last-child { border-bottom: 1px solid var(--faint); }
  .props dt { color: var(--ink); }
  .props dd { margin: 0; color: var(--muted); }
  .edge-key { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; font-size: 11px; color: var(--muted); }
  .edge-key span { display: flex; align-items: center; gap: 8px; }
  .edge-key svg { width: 24px; height: 8px; overflow: visible; }
  .edge-key path { fill: none; stroke: var(--t2); stroke-width: 2; stroke-linecap: round; opacity: .6; }
  .edge-key path.strong { stroke-width: 4.5; }
  .edge-key path.across { stroke: var(--ink); stroke-width: 1; opacity: .3; }
  .legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
  .legend span { display: flex; align-items: center; gap: 6px; }
  .legend i { width: 9px; height: 9px; display: inline-block; }
  .answer { margin-top: 22px; border: 1px solid var(--rule); padding: 16px 18px; max-width: 440px; }
  .answer .q { font-weight: 500; margin-bottom: 8px; }
  .answer p { color: var(--ink); font-size: 15px; margin-top: 12px; }
  .answer .cites { margin-top: 0; min-height: 22px; }
  /* played: the sources the search found fly in under the question, then the answer is written from them */
  .answer.play .cites span, .answer.play p .w { opacity: 0; transition: opacity .3s; }
  .answer.play .cites span.on, .answer.play p .w.on { opacity: 1; }
  .flyer { position: fixed; z-index: 30; pointer-events: none; background: var(--cyan-paint); box-shadow: inset 0 0 0 1px var(--cyan-edge); }
  .cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .cites span { font: 400 10px/1 var(--mono); padding: 6px 8px; background: var(--cyan-paint); color: #111; box-shadow: inset 0 0 0 1px var(--cyan-edge); }
  .stage { position: sticky; top: 96px; height: calc(100vh - 140px); display: flex; flex-direction: column; justify-content: center; }
  .stage canvas { width: 100%; display: block; }
  .stage .cap { display: flex; justify-content: space-between; margin-top: 10px; }

  .nums { display: grid; grid-template-columns: repeat(4, 1fr); }
  .nums > div { padding: 0 24px 72px 0; }
  .nums > div + div { border-left: 1px solid var(--faint); padding-left: 24px; }
  .nums .n { font: var(--dw) 76px/1 var(--display); letter-spacing: calc(-.05em * var(--dt)); font-variation-settings: var(--dfv); }
  .nums .n small { font-size: .45em; }
  .nums .bar { height: 6px; margin-top: 18px; background: var(--c); }
  .nums p { margin: 14px 0 0; color: var(--muted); font-size: 14px; max-width: 220px; }

  .elsewhere { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; padding-bottom: 80px; }
  .slide { aspect-ratio: 16 / 9; border: 1px solid var(--rule); padding: 5% 6%; display: grid; grid-template-columns: 1fr 1fr; gap: 6%; align-items: end; }
  .slide .t { font: var(--dw) clamp(18px, 2.4vw, 34px)/1 var(--display); letter-spacing: calc(-.035em * var(--dt)); font-variation-settings: var(--dfv); }
  .slide canvas { width: 100%; }
  .ui { border: 1px solid var(--rule); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
  .ui .row { display: flex; gap: 10px; align-items: center; font-size: 14px; }
  .ui .row i { width: 10px; height: 10px; background: var(--c); flex: none; }
  .ui .row b { font-weight: 400; margin-left: auto; font: 400 10px var(--mono); padding: 4px 6px; background: var(--cyan-paint); color: #111; box-shadow: inset 0 0 0 1px var(--cyan-edge); }
  .ui .row.dim { color: var(--muted); }
  .lbl { margin-bottom: 10px; }

  .end { padding-top: 96px; padding-bottom: 112px; }   /* keeps the .wrap side margins */
  .end h2 { font-size: clamp(44px, 6vw, 92px); margin-bottom: 36px; letter-spacing: calc(-.045em * var(--dt)); }

  /* ---- softeners: each one switches on with a class on <body> ---- */
  @media (max-width: 900px) {   /* the hero in one column, nothing wider than the screen */
    .hero .sub { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .hero .sub p { font-size: 18px !important; max-width: none !important; }
    .hero-slot { margin-right: 0; max-width: none; }
    .start-row { padding: 0 6px 0 10px; }
    .start-text { font-size: 16px !important; }
    .prompt { font-size: 15px !important; }
    .agents i { width: 26px; height: 26px; }
  }

  /* 1. margin notes, in pen */
  .note { display: none; font: italic 400 14px/1.4 var(--sans); color: var(--muted); white-space: nowrap; pointer-events: none; transform: none !important; }
  .note::before { content: "— "; }
  .note svg { display: none !important; }
  .note.aside { margin-top: 6px; text-align: right; }
  .s-notes .note { display: block; }
  .s-notes .note.inline { display: inline-block; }
  .note.abs { position: absolute; }
  .note svg { position: absolute; overflow: visible; }
  .note path { fill: none; stroke: var(--pen); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .note.step-note { margin-top: 16px; transform: rotate(-2deg); transform-origin: left; }
  .bandwrap, .nums > div, .end > div { position: relative; }

  /* 2. the stray square */
  #stray { display: none; position: fixed; left: 0; top: 0; width: 14px; height: 14px; background: var(--cyan-paint); box-shadow: inset 0 0 0 1px var(--cyan-edge); z-index: 15; pointer-events: none; will-change: transform; }
  .s-stray #stray { display: block; }
  .dock { display: none; width: .42em; height: .42em; margin-left: .12em; vertical-align: .02em; outline: 1.5px dashed var(--muted); outline-offset: -1.5px; }
  .s-stray .dock { display: inline-block; }

  /* 3. voice */
  .voice { display: none; }
  .s-voice .voice { display: revert; }
  .s-voice .plain { display: none; }
  h1 sup { font-size: .35em; vertical-align: 1.4em; color: var(--muted); margin-left: .05em; }
  .footnote { margin-top: 18px; }

  /* 5. a window: a watercolor slot down the left margin, one scene per section */
  #window { display: none; position: fixed; left: 0; top: 0; bottom: 0; width: var(--win); z-index: 12; overflow: hidden; background: #DDE9F2; }
  #window .sky { position: absolute; left: 0; top: 0; width: 100%; height: 112%; object-fit: cover; will-change: transform; }
  #window canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  #window .dusk { position: absolute; inset: 0; background: linear-gradient(#B9A6D6, #E9B8C2 60%, transparent); mix-blend-mode: multiply; opacity: 0; }
  #stray.glow { box-shadow: 0 0 22px 8px rgba(8, 198, 202, .55); }
  body { --win: clamp(110px, 12vw, 210px); }
  .s-window #window { display: block; }
  .s-window { padding-left: var(--win); }
  @media (max-width: 900px) { .s-window #window { display: none; } .s-window { padding-left: 0; } }

  /* painted chapter plates */
  .plate-row { display: none; border-top: 0; }   /* the paintings open on paper, no rule above them */
  .s-plates .plate-row { display: block; }
  .plate-row.flush { border-top: 0; }   /* plate i continues straight on from the bet */
  .plate-row.flush .wrap { padding-top: 0; }
  .frieze { position: relative; margin: 0; aspect-ratio: 1536 / 560; background: var(--faint) center / cover no-repeat; }
  .frieze figcaption { position: absolute; left: 0; right: 0; bottom: -34px; display: flex; justify-content: space-between; align-items: baseline; }
  .frieze .pen { font: italic 400 14px/1.4 var(--sans); color: var(--muted); }
  .plate-row .wrap { padding-top: 40px; padding-bottom: 64px; }

  /* 4. paper */
  body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: 0; transition: opacity .3s;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .35  0 0 0 0 .3  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply; }
  .s-paper::before { opacity: .32; }
  [data-theme="dark"] body::before { mix-blend-mode: screen; }
  [data-theme="dark"] .s-paper::before { opacity: .18; }

  /* ---- intro: scattered points snap into a block, the cyan one arrives last, then the window opens ---- */
  #intro { position: fixed; inset: 0; z-index: 100; background: var(--paper); cursor: pointer; animation: intro-lift 340ms ease 600ms forwards; }
  #intro .block { position: absolute; inset: 0; animation: intro-open 380ms cubic-bezier(.65, 0, .35, 1) 540ms forwards; }
  #intro i { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: var(--c);
    animation: intro-snap 340ms cubic-bezier(.2, .9, .3, 1.3) var(--d) both; }
  #intro i.kept { background: var(--cyan-paint); box-shadow: inset 0 0 0 1.5px var(--cyan-edge); animation-duration: 300ms; }
  @keyframes intro-snap {
    from { transform: translate(calc(var(--gx) + var(--x)), calc(var(--gy) + var(--y))) rotate(var(--r)) scale(.45); opacity: 0; }
    35%  { opacity: 1; }
    to   { transform: translate(var(--gx), var(--gy)) rotate(0) scale(1); opacity: 1; }
  }
  @keyframes intro-open { to { transform: scale(18); opacity: 0; } }
  @keyframes intro-lift { to { opacity: 0; visibility: hidden; } }
  @media (prefers-reduced-motion: reduce) { #intro { display: none; } }

  /* ---- our bet: one painted line, bigger models one way, everything kept the other ---- */
  .bet { padding: 32px 0 96px; }
  .bet-label { margin-bottom: 18px; }
  .bet-h { margin-bottom: 48px; }
  .bet-h .quiet { color: var(--muted); }
  .bet-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
  .bet-cols h3 { font: var(--dw) 30px/1.1 var(--display); letter-spacing: calc(-.02em * var(--dt)); font-variation-settings: var(--dfv); margin: 8px 0 8px; }
  .bet-cols .model h3, .bet-cols .model p { color: var(--muted); }
  .bet-cols p { margin: 0; max-width: 440px; }
  .bet-cols .data { text-align: right; }
  .bet-cols .data p { margin-left: auto; }
  .bet-figure { position: relative; margin-top: 28px; }
  .bet-paint { display: block; width: 100%; aspect-ratio: 1200 / 300; }
  /* captions set on the painting, in paint colors; they arrive with the strokes */
  .on-paint { position: absolute; margin: 0; font: var(--dw) clamp(13px, 1.45vw, 19px)/1.25 var(--display); font-variation-settings: var(--dfv);
    color: rgba(44, 54, 50, .82); opacity: 0; transition: opacity .9s ease; }
  .on-paint.l { left: 6.5%; top: 68%; color: rgba(110, 104, 94, .9); transition-delay: 1.1s; }
  .on-paint.r { right: 21%; top: 68%; text-align: right; transition-delay: 1.7s; }
  .on-paint.inf { left: 89.4%; top: 72%; transform: translateX(-50%); width: auto; white-space: nowrap; line-height: 1.1; font-size: clamp(15px, 1.7vw, 22px); text-align: center; transition-delay: 2.7s; }
  .on-paint.inf .lead { display: block; font-size: .78em; color: rgba(44, 54, 50, .6); margin-bottom: 2px; }
  .bet.play .on-paint { opacity: 1; }
  /* the struck-out headline */
  .struck { position: relative; white-space: nowrap; }
  .strike { position: absolute; left: -1.5%; top: 34%; width: 103%; height: 42%; overflow: visible; pointer-events: none; }
  .strike path { fill: none; stroke: #33463C; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: url(#rough);
    opacity: .88; }
  [data-theme="dark"] .strike path { stroke: #E9E4D8; }
  @media (prefers-reduced-motion: reduce) { .on-paint { transition: none; } }
  .bet.instant .on-paint { transition: none; }   /* ?bet: show it finished */
  @media (max-width: 900px) { .bet-cols { grid-template-columns: 1fr; gap: 16px; } .bet-cols .data { text-align: left; } .struck { white-space: normal; }
    /* a phone breaks the struck line in two, so each line gets its own painted stroke instead of one long one */
    .strike { display: none; }
    .struck { text-decoration: line-through; text-decoration-thickness: .11em; text-decoration-color: rgba(51, 70, 60, .86); text-decoration-skip-ink: none; }
    [data-theme="dark"] .struck { text-decoration-color: rgba(233, 228, 216, .86); }
    /* the two ends of the painted line, named under it */
    .bet-figure { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
    .bet-paint { grid-column: 1 / -1; }
    .on-paint, .on-paint.l, .on-paint.inf { position: static; transform: none; font-size: 16px; line-height: 1.25; }
    .on-paint.r { display: none; }
    .on-paint.inf { text-align: right; white-space: normal; }
    .on-paint.inf br { display: none; } }

  /* ---- banner paintings: full-bleed, with soft cloud edges that dissolve into the paper ---- */
  body { overflow-x: clip; }
  .s-banner .plate-row .frieze[style*="--banner"] { background-image: var(--banner) !important; }   /* a painting composed for a banner, where there is one */
  .s-banner .plate-row .frieze { width: 100vw; margin-left: calc(50% - 50vw); aspect-ratio: 1536 / 720 !important; background-position: center 55% !important;
    -webkit-mask: url(/painted/images/mask/banner.png) 0 0 / 100% 100% no-repeat; mask: url(/painted/images/mask/banner.png) 0 0 / 100% 100% no-repeat; }
  /* plate iii: the kite flies near the top of the painting, so the painting starts just inside the brush edge's fade
     and gives up a little sand at the bottom instead (full width; the kite lands about a quarter of the way down) */
  .s-banner .plate-row .frieze.kite { aspect-ratio: 1536 / 870 !important; background-size: 100% auto !important; background-position: center 7.3vw !important; background-color: transparent;
    /* the painting's own top edge would show as a line, so it fades in under the brush edge */
    -webkit-mask: url(/painted/images/mask/banner.png) 0 0 / 100% 100% no-repeat, linear-gradient(transparent 12.9%, #000 19.5%) !important; -webkit-mask-composite: source-in !important;
    mask: url(/painted/images/mask/banner.png) 0 0 / 100% 100% no-repeat, linear-gradient(transparent 12.9%, #000 19.5%) !important; mask-composite: intersect !important; }
  .s-banner .plate-row .frieze figcaption { padding: 0 max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter))); bottom: -26px; }
  .s-banner .plate-row .wrap { padding-top: 8px; }
  .bandwrap { margin: 0 calc(-1 * max(var(--gutter), (100vw - 1280px) / 2 + var(--gutter))); }
  .s-banner .bandwrap {
    -webkit-mask: url(/painted/images/mask/band.png) 0 0 / 100% 100% no-repeat; mask: url(/painted/images/mask/band.png) 0 0 / 100% 100% no-repeat; }
  .s-banner .bet-paint { -webkit-mask: url(/painted/images/mask/panel.png) 0 0 / 100% 100% no-repeat; mask: url(/painted/images/mask/panel.png) 0 0 / 100% 100% no-repeat; }

  /* ---- get started: a painted wash, rows as brush strokes, soft-serif type ---- */
  .hero-slot { align-self: start; justify-self: end; width: 100%; max-width: 500px; margin-right: -24px; }   /* sits further right, clear of the subhead */
  .start { position: relative; padding: 26px 30px 24px; }
  .start::before { content: ""; position: absolute; inset: -14px -18px; z-index: -1; background: #EEE6D3;   /* warm canvas, soft cloud edges */
    -webkit-mask: url(/painted/images/mask/panel.png) 0 0 / 100% 100% no-repeat; mask: url(/painted/images/mask/panel.png) 0 0 / 100% 100% no-repeat; }
  .hero-slot { position: relative; isolation: isolate; }
  /* the hero, centered: headline, subhead and buttons on the axis, then the two agent bars stacked beneath */
  .hero h1 { text-align: center; max-width: none; }
  .hero .sub { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; justify-items: center; text-align: center; margin-top: 22px; }
  .hero .sub p { margin-left: auto; margin-right: auto; max-width: 860px !important; text-wrap: balance; }
  .hero .lead-col .ctas { justify-content: center; }
  .hero-slot { justify-self: center !important; margin-right: 0 !important; margin-top: 18px; max-width: 560px; text-align: left; }
  .hero .start-label { text-align: center; margin-left: 0 !important; }
  .start-sec + .start-sec { margin-top: 18px; }
  .start-label { font: var(--dw) 15px/1.2 var(--display); font-variation-settings: var(--dfv); color: var(--muted); margin: 0 0 6px 4px; }
  .start-row { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 14px 0 16px;
    border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
  .start-row::before { content: ""; position: absolute; inset: 0 -6px; z-index: -1; background: #D9CBAA; opacity: .55; transition: opacity .2s;
    -webkit-mask: url(/painted/images/mask/stroke.png) 0 0 / 100% 100% no-repeat; mask: url(/painted/images/mask/stroke.png) 0 0 / 100% 100% no-repeat; }
  .start-row.build::before { background: #C9D2C2; }
  /* the build ideas wrap onto a second line rather than run off the row */
  @media (max-width: 1199px) {   /* narrower screens, where the hero columns squeeze the bar: a longer idea wraps onto a second line */
    .start-row.build { height: auto; min-height: 58px; padding-top: 10px; padding-bottom: 10px; }
    .start-row.build .prompt { display: block; white-space: normal; overflow: visible; min-height: 2.4em; line-height: 1.2; }
    .start-row.build .caret { display: inline-block; vertical-align: -2px; }
  }
  .start-row:hover::before { opacity: .85; }
  .start-text { flex: 1; font: var(--dw) 18px/1.2 var(--display); font-variation-settings: var(--dfv); }
  .agents { display: flex; flex: none; }
  .agents i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #F6F1E6;
    box-shadow: 0 0 0 1px rgba(17, 17, 17, .55); color: var(--ink); }
  .agents i + i { margin-left: -7px; }
  .agents svg { width: 16px; height: 16px; fill: currentColor; }
  .copy { position: relative; flex: none; width: 30px; height: 30px; display: grid; place-items: center; }
  .copy svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: .6; }
  .copy svg rect { fill: transparent; }
  .copy em { position: absolute; right: 34px; font: var(--dw) 14px var(--display); font-style: normal; color: var(--ink); white-space: nowrap;
    opacity: 0; transform: translateX(4px); transition: opacity .2s, transform .2s; pointer-events: none; }
  .start-row.copied .copy em { opacity: 1; transform: none; }
  .start-row.copied .copy svg { opacity: 1; }
  .start-row.copied .copy svg rect { fill: var(--cyan); }
  .start-foot { display: inline-block; margin: 8px 0 0 4px; font-size: 13px; color: var(--muted); text-decoration: none; }
  .start-foot:hover { color: var(--ink); }
  .prompt { flex: 1; display: flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden;
    font: var(--dw) 18px/1.2 var(--display); font-variation-settings: var(--dfv); }
  .caret { flex: none; width: 9px; height: 16px; margin-left: 3px; background: var(--cyan-paint); border-radius: 3px 2px 4px 2px; transform: rotate(4deg);   /* a dab of cyan paint */
    box-shadow: inset 2px 0 0 rgba(255, 255, 255, .35); animation: blink 1.1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  @media (max-width: 900px) { .hero-slot { justify-self: stretch; max-width: none; } }
  /* the looks: only "panel" has a parchment wash; the others sit straight on the page's paper */
  .start:not([data-look="panel"]) { padding: 4px 0 0; }
  .start:not([data-look="panel"])::before { display: none; }
  .start:not([data-look="panel"]) .start-label { margin-left: 16px; }
  .start:not([data-look="panel"]) .start-foot { margin-left: 16px; }
  .start[data-look="wash"] .start-row::before { background: var(--ink); opacity: .07; }
  .start[data-look="wash"] .start-row.build::before { background: var(--ink); opacity: .045; }
  .start[data-look="wash"] .start-row:hover::before { opacity: .12; }
  .start[data-look="underline"] .start-row::before { inset: auto -4px 4px -4px; height: 9px; background: var(--ink); opacity: .55; }
  .start[data-look="underline"] .start-row.build::before { background: var(--ink); opacity: .3; }
  .start[data-look="underline"] .start-row:hover::before { opacity: .85; }
  .start[data-look="underline"] .start-row { min-height: 50px; }
  .start[data-look="tint"] .start-row::before { background: #D7A84E; opacity: .26; }
  .start[data-look="tint"] .start-row.build::before { background: #5F86A0; opacity: .2; }
  .start[data-look="tint"] .start-row:hover::before { opacity: .4; }

  /* ---- one font for the hero's buttons and the get-started rows ---- */
  .ui-serif .hero .btn, .ui-serif .start-text, .ui-serif .prompt { font: var(--dw) 17px/1.2 var(--display); font-variation-settings: var(--dfv); letter-spacing: 0; }
  .ui-sans .hero .btn, .ui-sans .start-text, .ui-sans .prompt { font: 500 15px/1.2 var(--sans); font-variation-settings: normal; letter-spacing: 0; }

  /* ---- what graphon does for you: four APIs, each with a painted vignette ---- */
  .does { border-top: 0; padding: 24px 0 96px; }
  .does-label { margin-bottom: 18px; }
  .does-h { max-width: 900px; margin: 0; }
  .does-head { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 44px; }   /* Dev Docs sits at the right edge */
  .docs-btn { height: 44px; padding: 0 20px; font: var(--dw) 17px/1.2 var(--display); font-variation-settings: var(--dfv); }   /* same as the hero's Book a demo */
  .does-lede { font-size: 19px; color: var(--muted); margin: 0 0 44px; }
  .apis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .apis canvas { display: block; width: 100%; aspect-ratio: 4 / 3;
    -webkit-mask: url(/painted/images/mask/panel.png) 0 0 / 100% 100% no-repeat; mask: url(/painted/images/mask/panel.png) 0 0 / 100% 100% no-repeat; }
  .apis .api-art { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    -webkit-mask: url(/painted/images/mask/panel.png) 0 0 / 100% 100% no-repeat; mask: url(/painted/images/mask/panel.png) 0 0 / 100% 100% no-repeat; }
  .does:not([data-art="squares"]) .motif, .does[data-art="squares"] .api-art { display: none; }
  .apis h3 { font: var(--dw) 26px/1.1 var(--display); letter-spacing: calc(-.02em * var(--dt)); font-variation-settings: var(--dfv); margin: 16px 0 8px; }
  .apis p { margin: 0; font-size: 15px; color: var(--muted); }
  .apis blockquote { margin: 12px 0 0; font: italic var(--dw) 16px/1.35 var(--display); font-variation-settings: var(--dfv); color: var(--ink); }
  @media (max-width: 1000px) { .apis { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .apis { grid-template-columns: 1fr; } }

  /* ---- benchmarks: brushed bars, Graphon in painted cyan ---- */
  .bench { border-top: 0; padding: 8px 0 96px; }
  #how { border-top: 0; }   /* like every other section, it opens on paper with no rule (added on the site) */
  .bench-h { margin: 0 0 14px; }
  .bench-lede { font-size: 19px; color: var(--muted); margin: 0 0 44px; }
  .bench .bench-h { margin-bottom: 40px; }
  .bm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .bm h3 { font: var(--dw) 26px/1.1 var(--display); letter-spacing: calc(-.02em * var(--dt)); font-variation-settings: var(--dfv); margin: 0 0 18px; }
  .bm-row { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 12px; height: 38px; }
  .bm-row span { font: var(--dw) 16px/1 var(--display); font-variation-settings: var(--dfv); color: var(--muted); }
  .bm-row.us span { color: var(--ink); }
  .bm-row i { display: block; height: 22px; width: var(--w); background: var(--ink); opacity: .14;
    -webkit-mask: url(/painted/images/mask/stroke.png) 0 0 / 100% 100% no-repeat; mask: url(/painted/images/mask/stroke.png) 0 0 / 100% 100% no-repeat; }
  .bm-row.us i { background: var(--cyan-paint); opacity: 1; }
  .bm-row b { font: var(--dw) 16px/1 var(--display); font-variation-settings: var(--dfv); text-align: right; color: var(--muted); }
  .bench-note { margin: 28px 0 0; }
  @media (max-width: 900px) { .bm { grid-template-columns: 1fr; gap: 32px; } }

  /* footer: on the paper like everything else; links, the SOC 2 seal, then the small print */
  footer { border-top: 0; }
  #book { border-top: 0; }   /* the closing call and the footer sit on open paper, no rules */
  #book .end { padding-bottom: 40px; }   /* the kite painting follows the closing call, so it sits closer */
  #book .note.inline { display: inline-block; }   /* the one note that stays on: the aside by the closing button */
  #book .note.inline::before { content: none; }
  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); }

  @media (max-width: 900px) {
    .hero .sub, .sec-head, .story, .elsewhere { grid-template-columns: 1fr; }
    .stage { position: relative; top: 0; height: auto; order: -1; }
    .steps .step { min-height: 0; padding: 32px 0; opacity: 1; }
    .nums { grid-template-columns: 1fr 1fr; }
    nav .links { display: none; }
    nav .wrap > :last-child { margin-left: auto; }   /* with the links hidden, Book a demo still sits on the right */
    .skywash .sky-up { background-size: cover; }   /* the sky fills the taller one-column hero instead of a strip at its foot */
    .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 */


/* the placeholders: a ghost of a plot, Graphon's square still in cyan */
.ph-art { position: absolute; left: 44px; right: 14px; top: 56px; bottom: 56px; border-left: 1px solid var(--faint); border-bottom: 1px solid var(--faint);
  background: repeating-linear-gradient(0deg, transparent 0 calc(25% - 1px), rgba(17, 17, 17, .05) calc(25% - 1px) 25%); }
.ph-art i { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--muted); opacity: .3; }
.ph-art i.us { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 0; background: var(--cyan-paint); box-shadow: inset 0 0 0 1px var(--cyan-edge); opacity: .55; }
.ph-art p { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; padding: 0 16px; text-align: center;
  font: italic var(--dw) clamp(18px, 1.6vw, 24px)/1.2 var(--display); font-variation-settings: var(--dfv); color: var(--muted); }


/* ---- phones and narrow tablets (added on the site) ---- */
@media (max-width: 900px) {
  /* How it works: the figure stays pinned under the menu bar and each step scrolls up beneath it, so the figure
     changes with the text you are reading rather than off screen. */
  .stage { position: sticky; top: 56px; z-index: 2; height: auto; padding: 8px 0 12px; background: var(--paper); }
  .stage canvas { width: min(100%, 38svh); margin: 0 auto; }
  .stage .cap { width: min(100%, 38svh); margin: 8px auto 0; font-size: 11px; justify-content: flex-end; }
  .stage .cap > :first-child { display: none; }   /* the figure number; the caption on the right is the one that changes */
  .stage::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 24px; pointer-events: none;
    background: linear-gradient(var(--paper), transparent); }   /* the steps fade in from under the figure */
  .steps .step { min-height: 42svh; padding: 28px 0; justify-content: flex-start; opacity: .25; }
  .steps .step:first-child { padding-top: 28px; }
  .steps .step.on { opacity: 1; }
  .steps { padding-bottom: 12svh; }
  .step h3 { font-size: 28px; }

  /* The hero sky: on a narrow screen the desktop mask (paper on the left, painting from the middle) leaves a hard
     vertical edge down the headline; here it fades in gently from the left instead. */
  .skywash .sky-up {
    -webkit-mask: linear-gradient(to top, #000 0%, #000 18%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.1) 100%), linear-gradient(to right, rgba(0,0,0,.15), #000 85%), var(--rise-mask);
    mask: linear-gradient(to top, #000 0%, #000 18%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.1) 100%), linear-gradient(to right, rgba(0,0,0,.15), #000 85%), var(--rise-mask);
    -webkit-mask-composite: source-in, source-in; mask-composite: intersect, intersect; }
}

/* Breathing room between the sections (added on the site): each one starts a little further from the last. */
.painted > section:not(#book) { padding-top: clamp(56px, 6.5vw, 96px); }
@media (max-width: 900px) { .painted > section:not(#book) { padding-top: 64px; } }

#benchmarks { scroll-margin-top: 56px; }   /* the header's Performance link lands the heading just under the menu bar */
/* Benchmarks follows the bet figure straight on, no paper gap between them, and opens with its one-line claim */
#bet { padding-bottom: 24px; }
.painted > section#benchmarks { padding-top: 24px; }   /* outweighs the even section spacing above */
#benchmarks .bench-h { margin-bottom: 16px; }
#benchmarks .bench-lede { max-width: 760px; margin: 0 0 48px; font-size: 21px; line-height: 1.45; color: var(--ink); opacity: .82; }
/* How it works: the headline on the left edge like the other section heads, its mono label sitting just above it */
#how .sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
#how .sec-head .mono { padding: 0; }
/* Benchmarks, the APIs and How it works follow each other with the same short gap, not a screen of paper each */
.painted > section#benchmarks { padding-bottom: 64px; }
.painted > section#does { padding-top: 64px; padding-bottom: 64px; }
.painted > section#how { padding-top: 64px; }
#how .sec-head { padding-top: 0; }
/* and How it works opens straight under its headline: the first step and the figure start at the top, not mid-screen */
#how .sec-head { padding-bottom: 32px; }
@media (min-width: 901px) {
  #how .steps .step:first-child { padding-top: 0; }
  #how .stage { justify-content: flex-start; }
}
@media (max-width: 900px) { #how .steps .step:first-child { padding-top: 16px; } }
/* the search step: its words start at the top, level with the figure, and it runs a screen and a bit so the figure stays pinned while the search plays */
@media (min-width: 901px) {
  #how .steps .step[data-state="ask"] { justify-content: flex-start; }   /* its height is set in painted.js, from the figure's */
  #how .stage { height: auto; align-self: start; }   /* only as tall as the figure, so nothing empty trails it */
  #how .steps { padding-bottom: 0; }
}
@media (min-width: 901px) { #how .ask-pin { position: sticky; top: 96px; } }
/* Benchmarks' head: the heading, and API Platform at the right edge like the APIs' Dev Docs */
#benchmarks .bench-head { margin-bottom: 16px; }
#benchmarks .bench-head .bench-h { margin: 0; }