/* honeyp.ai site system: the tokens and components in DESIGN.md. Every public page loads this first, then
   its own small page-specific rules. Raw colour values live only in :root. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/brand/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/brand/inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/brand/inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/brand/inter-700.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/brand/spacegrotesk-500.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/brand/spacegrotesk-600.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/brand/spacegrotesk-700.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/brand/jetbrainsmono-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/brand/jetbrainsmono-500.woff2) format('woff2')}

:root {
  color-scheme: light;
  --color-bg: #FFFFFF;
  --color-band: #F6F5F2;
  --color-text: #17140F;
  --color-text-2: #4A463F;
  --color-muted: #6B665D;
  --color-border: #E2DFD8;
  --color-border-strong: #B9B4AA;
  --color-primary: #F5A300;
  --color-primary-hover: #FFB521;
  --color-on-primary: #17140F;
  --color-link: #8A5800;
  --color-tint: #FFF4DC;
  --color-stage: #0E0D0B;
  --color-stage-2: #1A1814;
  --color-stage-line: rgba(244,241,236,.12);
  --color-stage-text: #F4F1EC;
  --color-stage-muted: #A7A299;
  --color-stage-honey: #FFC24D;
  --color-allow: #1C7A44;   --color-allow-bg: #E6F3EB;
  --color-reduced: #8A5800; --color-reduced-bg: #FFF4DC;
  --color-block: #B8322A;   --color-block-bg: #FBE8E6;
  --color-overlay: rgba(23,20,15,.06);
  --shadow-window: 0 40px 80px -36px rgba(23,20,15,.55), 0 0 0 1px rgba(23,20,15,.08);
  --shadow-menu: 0 18px 40px -18px rgba(23,20,15,.35);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --text-xs: 13px; --text-sm: 15px; --text-base: 17px; --text-lg: 20px;
  --text-xl: 26px; --text-2xl: 38px; --text-3xl: 52px; --text-hero: clamp(44px, 6.6vw, 88px);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --content: 1180px; --reading: 720px; --gutter: 24px;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 18px;
  --section: var(--space-8);

  /* names the page-specific rules were written with, mapped onto the system */
  --page: var(--color-bg); --surface: var(--color-band); --surface-2: var(--color-band);
  --ink: var(--color-text); --ink-2: var(--color-text-2); --muted: var(--color-muted);
  --line: var(--color-border); --line-2: var(--color-border-strong);
  --honey: var(--color-primary); --honey-2: var(--color-primary-hover); --honey-deep: var(--color-link); --honey-soft: var(--color-tint);
  --green: var(--color-allow); --red: var(--color-block);
  --disp: var(--font-display); --mono: var(--font-mono);
  --bg: var(--color-bg); --bg-2: var(--color-band); --panel: var(--color-bg);
}
@media (min-width: 900px) { :root { --section: 112px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text);
  font: 400 var(--text-base)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
.skip-link, .skip { position: absolute; left: var(--space-2); top: -64px; z-index: 1000; background: var(--color-text);
  color: var(--color-bg); padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none; font-weight: 600; }
.skip-link:focus, .skip:focus { top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-text); letter-spacing: -.02em; text-wrap: balance; }
h1 { font-weight: 600; font-size: clamp(36px, 5.4vw, var(--text-3xl)); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 var(--space-4); }
h2 { font-weight: 600; font-size: var(--text-xl); line-height: 1.25; margin: var(--space-8) 0 var(--space-3); }
h3 { font-weight: 600; font-size: var(--text-lg); line-height: 1.35; margin: var(--space-6) 0 var(--space-2); }
p, li { color: var(--color-text-2); }
strong, b { color: var(--color-text); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-7) 0; }

.wrap { max-width: var(--content); margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
main.wrap { max-width: calc(var(--reading) + 2 * var(--gutter)); padding-block: var(--space-8) var(--space-9); }
.meta { color: var(--color-muted); font-size: var(--text-sm); margin: 0 0 var(--space-6); }
.lede { font-size: var(--text-lg); line-height: 1.5; color: var(--color-text-2); max-width: 56ch; }

/* the "short version" box at the top of reading pages */
.summary { background: var(--color-band); border-radius: var(--radius); padding: var(--space-5) var(--space-5) var(--space-4);
  border-left: 3px solid var(--color-primary); }
.summary ul { margin: var(--space-2) 0 0; padding-left: 20px; }
.summary li { margin: 6px 0; }
.callout { background: var(--color-tint); border-radius: var(--radius); padding: var(--space-4) var(--space-5); }
.toc { columns: 2; column-gap: var(--space-6); padding-left: 20px; font-size: var(--text-sm); }
@media (max-width: 640px) { .toc { columns: 1; } }

/* tables */
.table, .tscroll { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin: var(--space-2) 0; }
th, td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--color-border); color: var(--color-text-2); }
th { color: var(--color-text); font-weight: 600; }

/* code: the engine's own language, so it sits on the stage colour */
pre { background: var(--color-stage); color: var(--color-stage-text); border-radius: var(--radius); padding: var(--space-4) var(--space-5);
  overflow-x: auto; font: 400 13.5px/1.65 var(--font-mono); }
pre code { color: inherit; background: none; border: 0; padding: 0; font: inherit; }
code { font-family: var(--font-mono); font-size: .88em; }
p code, li code, td code, dd code { background: var(--color-band); border: 1px solid var(--color-border); color: var(--color-text);
  padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }

/* two-up panels on reading pages */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
@media (max-width: 600px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.grid2 > div { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4) var(--space-5); background: var(--color-bg); }
.grid2 h3 { margin-top: 0; font-size: var(--text-base); }
.grid2 p { font-size: var(--text-sm); margin: var(--space-2) 0 0; }

/* folds */
details { border-bottom: 1px solid var(--color-border); }
details > summary { cursor: pointer; padding: var(--space-4) 0; font-weight: 600; color: var(--color-text); list-style: none; display: flex; gap: var(--space-3); align-items: baseline; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; margin-left: auto; font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); line-height: 1; color: var(--color-link); }
details[open] > summary::after { content: "–"; }
details > p, details > div { margin: 0 0 var(--space-4); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 10px 20px;
  border: 1px solid transparent; border-radius: var(--radius-sm); font: 600 var(--text-sm)/1.2 var(--font-body); text-decoration: none;
  cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-line, .btn-secondary { background: var(--color-bg); color: var(--color-text); border-color: var(--color-border-strong); }
.btn-line:hover, .btn-secondary:hover { border-color: var(--color-text); }
.btn-lg { min-height: 52px; padding: 14px 26px; font-size: var(--text-base); }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; } .ctas .btn { flex: 1 1 100%; } }

/* forms */
.field { display: grid; gap: 6px; align-content: start; }
.field label, label.lbl { font-weight: 600; font-size: var(--text-sm); color: var(--color-text); }
input[type=text], input[type=email], input[type=url], input[type=number], input[type=search], input:not([type]), select, textarea {
  min-height: 44px; width: 100%; padding: 10px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-text); font: 400 16px/1.4 var(--font-body); }
textarea { min-height: 96px; resize: vertical; }
/* Safari draws its own short select box and ignores the height: a plain box with a drawn chevron instead */
select { -webkit-appearance: none; appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-2) 50%), linear-gradient(135deg, var(--color-text-2) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
input::placeholder, textarea::placeholder { color: var(--color-muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-text); }

/* decision pills: the product's three outcomes */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 6px; font: 600 var(--text-xs)/1.6 var(--font-body); white-space: nowrap; }
.pill.allow, .pill.full { color: var(--color-allow); background: var(--color-allow-bg); }
.pill.reduced, .pill.red { color: var(--color-reduced); background: var(--color-reduced-bg); }
.pill.block, .pill.none { color: var(--color-block); background: var(--color-block-bg); }

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

/* launch cards: an integration announcement with a co-branded banner (names set in our type, no partner logos) */
.launches { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7) var(--space-5); }
@media (min-width: 760px) { .launches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.launch { display: flex; flex-direction: column; min-width: 0; }
.launch-art { aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--radius); background: var(--color-tint);
  border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  padding-inline: var(--space-4); margin-bottom: var(--space-5); }
.launch-art .us { display: inline-flex; align-items: center; gap: 8px; font: 700 clamp(17px, 2vw, 21px)/1 var(--font-display); letter-spacing: -.02em; color: var(--color-text); }
.launch-art .us img { width: 24px; height: 24px; }
.launch-art .us .d { color: var(--color-primary); }
.launch-art .rule { width: 1px; height: 32px; flex: none; background: var(--color-border-strong); }
.launch-art .them { display: inline-flex; align-items: center; gap: 8px; font: 600 clamp(17px, 2vw, 21px)/1 var(--font-display); letter-spacing: -.02em; color: var(--color-text); }
.launch-art .them img { width: 24px; height: 24px; }
.launch-art .them-logo { height: clamp(20px, 2.2vw, 26px); width: auto; max-width: 40%; }
.launch-art .them-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.launch-art .them-stack img { height: clamp(20px, 2.2vw, 26px); width: auto; }
.launch-art:has(.them-stack) .rule { height: 64px; }
.launch h3 { font-size: var(--text-xl); line-height: 1.2; margin: 0 0 var(--space-2); }
.launch p { margin: 0 0 var(--space-4); color: var(--color-text-2); flex: 1; }
.launch .more { font-weight: 600; }
/* in a reading-width column the launches sit as rows: banner beside the text */
@media (min-width: 640px) {
  .launches.rows { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .launches.rows .launch { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: var(--space-5); align-items: start; }
  .launches.rows .launch-art { grid-row: span 3; margin-bottom: 0; }
}