/* graftfork.com: one stylesheet for the public pages, the customer pages and the ops console. */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/schibsted-grotesk.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plex-mono-500.woff2) format("woff2")}

:root{
	--paper:#f6f7f9;--surface:#ffffff;--ink:#14191f;--slate:#59636e;--faint:#8a939d;--rule:#dde1e6;--rule-strong:#c5ccd3;
	--brand:#0b5e73;--brand-ink:#ffffff;--brand-soft:color-mix(in srgb,var(--brand) 9%,transparent);
	--term:#121921;--term-fg:#d5dde5;--term-dim:#7f8d9b;--term-rule:#26323e;
	--carry:#23784a;--confirm:#2858a8;--rewrite:#6f4bb8;--drop:#946512;--ask:#b23e2a;
	--add-bg:#e5f3ea;--add-fg:#1d5e39;--del-bg:#fbe9e6;--del-fg:#8e2f20;
	--sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
	--mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular","DejaVu Sans Mono",monospace;
	--x-g:#7ddca3;--x-b:#8fb4f5;--x-p:#c6a8f7;--x-a:#e2b45a;--x-r:#f39a86;
	color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
	--paper:#0f141a;--surface:#161d25;--ink:#e6ebf0;--slate:#9ba7b3;--faint:#6f7b87;--rule:#26303a;--rule-strong:#35414d;
	--brand:#5bb8cf;--brand-ink:#06232b;
	--term:#0a0f14;--term-fg:#d5dde5;--term-dim:#7a8896;--term-rule:#1f2a35;
	--carry:#5cc58a;--confirm:#7aa2ea;--rewrite:#b394f0;--drop:#d6a84a;--ask:#ec8a76;
	--add-bg:#163322;--add-fg:#a6e3bd;--del-bg:#3a1c17;--del-fg:#f3b3a7;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
code,pre,kbd,.mono{font-family:var(--mono)}
code{font-size:.9em}
a{color:var(--brand);text-underline-offset:2px}
:is(a,button,input,textarea,summary,select):focus-visible{outline:2px solid var(--brand);outline-offset:2px}
img,svg{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 28px}}
.read{max-width:760px;margin:0 auto;padding:0 16px}
h1{font-size:clamp(30px,4.2vw,46px);line-height:1.08;letter-spacing:-.028em;font-weight:750;margin:0 0 14px}
h2{font-size:clamp(22px,2.5vw,28px);line-height:1.18;letter-spacing:-.018em;font-weight:700;margin:0 0 12px}
h3{font-size:17px;line-height:1.35;letter-spacing:-.008em;font-weight:650;margin:0 0 6px}
p{margin:0 0 14px}
.muted{color:var(--slate)}
.small{font-size:14px}
.eyebrow{font:500 12.5px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--brand);margin:0 0 12px}

/* ---- Site header ---- */
.site-head{border-bottom:1px solid var(--rule);background:color-mix(in srgb,var(--paper) 92%,transparent);position:sticky;top:0;z-index:20;backdrop-filter:saturate(1.4) blur(8px)}
.site-head .wrap{display:flex;align-items:center;gap:24px;min-height:60px;flex-wrap:wrap}
.mark{display:inline-flex;align-items:center;gap:9px;font-weight:750;font-size:19px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.mark svg{width:22px;height:22px;color:var(--brand)}
.site-nav{display:flex;gap:22px;align-items:center;font-size:14.5px;margin-left:8px}
.site-nav a{color:var(--slate);text-decoration:none;padding:4px 0}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.site-head .cta{margin-left:auto;display:flex;gap:10px;align-items:center}
.site-head .cta .signin{font-size:14.5px;color:var(--slate);text-decoration:none}
@media (max-width:860px){
	.site-head .wrap{gap:0 16px;padding-top:10px}
	.site-nav{order:3;width:100%;margin:0;gap:4px 18px;flex-wrap:wrap;padding:6px 0 10px;font-size:14px}
	.site-head .cta .signin{display:none}
}

/* Header used by the console and customer pages */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;flex-wrap:wrap}
.bar nav{display:flex;gap:20px;align-items:center;font-size:15px}
.bar nav a{color:var(--slate);text-decoration:none}
.bar nav a[aria-current]{color:var(--ink);font-weight:600}
.bar nav a:hover{color:var(--ink)}
@media (max-width:640px){.bar nav .opt{display:none}}

/* ---- Footer ---- */
.site-foot{border-top:1px solid var(--rule);margin-top:96px;padding:48px 0 40px;font-size:14px;color:var(--slate);background:var(--surface)}
.site-foot .cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
@media (max-width:860px){.site-foot .cols{grid-template-columns:1fr 1fr}.site-foot .about{grid-column:1 / -1}}
.site-foot h4{font-size:13px;font-weight:600;color:var(--ink);margin:0 0 12px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-foot a{color:var(--slate);text-decoration:none}
.site-foot a:hover{color:var(--ink);text-decoration:underline}
.site-foot .about p{max-width:26em;margin:10px 0 0}
.site-foot .legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--rule);margin-top:36px;padding-top:20px;font-size:13px;color:var(--faint)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14.5px/1.2 var(--sans);border:0;border-radius:7px;padding:10px 15px;cursor:pointer;background:var(--brand);color:var(--brand-ink);text-decoration:none;white-space:nowrap}
.btn:hover{background:color-mix(in srgb,var(--brand) 88%,var(--ink))}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-strong)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--slate)}
.btn.ask{background:var(--ask);color:#fff}
.btn.small{font-size:13.5px;padding:7px 11px}
.btn[disabled]{opacity:.5;cursor:default}
@media (prefers-color-scheme:dark){.btn.ask{color:#2a0d07}}

/* ---- Page structure for public pages ---- */
.page-hero{padding:64px 0 40px;border-bottom:1px solid var(--rule)}
.page-hero .lede{font-size:19px;line-height:1.55;color:var(--slate);max-width:38em;margin:0}
.page-hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
@media (max-width:640px){.page-hero{padding:40px 0 28px}.page-hero .lede{font-size:17px}}
.section{padding:56px 0;border-bottom:1px solid var(--rule)}
.section:last-of-type{border-bottom:0}
.section > .wrap > .sub,.section .sub{color:var(--slate);font-size:17px;max-width:40em}
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start}
@media (max-width:960px){.split{grid-template-columns:minmax(0,1fr);gap:28px}}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:860px){.grid3,.grid2{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:22px 22px 18px}
.panel h3{margin-bottom:8px}
.panel p{color:var(--slate);font-size:15.5px;margin:0}
.panel p + p{margin-top:10px}
.facts{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.facts li{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--rule)}
.facts li b{font-weight:600}
.facts li span{color:var(--slate)}
@media (max-width:640px){.facts li{grid-template-columns:minmax(0,1fr);gap:4px}}
.checklist{list-style:none;padding:0;margin:16px 0;display:grid;gap:10px}
.checklist li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:baseline}
.checklist li::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--brand);transform:translateY(1px)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat b{display:block;font-size:30px;font-weight:700;letter-spacing:-.025em;line-height:1.1;margin-bottom:6px;font-variant-numeric:tabular-nums}
.stat > span{color:var(--slate);font-size:14.5px}
.callout{border-left:2px solid var(--brand);padding:2px 0 2px 16px;margin:20px 0;color:var(--ink)}
.callout p{margin:0}
.note-draft{background:color-mix(in srgb,var(--drop) 12%,transparent);border:1px dashed var(--drop);border-radius:6px;padding:2px 6px;font-size:.95em}

/* Long-form text: legal pages, docs */
.prose{max-width:720px}
.prose h2{margin-top:44px;font-size:22px}
.prose h3{margin-top:28px}
.prose p,.prose li{color:var(--ink);font-size:16.5px;line-height:1.65}
.prose ul,.prose ol{padding-left:22px;margin:0 0 14px}
.prose li{margin:6px 0}
.prose .updated{font:13px/1.4 var(--mono);color:var(--slate);margin:0 0 24px}
.prose table{border-collapse:collapse;width:100%;font-size:15px;margin:8px 0 18px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.prose th{font-weight:600;font-size:13.5px;color:var(--slate)}
.toc{font-size:14.5px;border-left:1px solid var(--rule);padding-left:16px;position:sticky;top:84px}
.toc a{display:block;color:var(--slate);text-decoration:none;padding:3px 0}
.toc a:hover{color:var(--ink)}
.with-toc{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:56px;align-items:start}
@media (max-width:960px){.with-toc{grid-template-columns:minmax(0,1fr)}.toc{display:none}}

/* FAQ */
.qa details{border-bottom:1px solid var(--rule);padding:18px 0}
.qa details:first-child{border-top:1px solid var(--rule)}
.qa summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--slate);font:400 20px/1 var(--mono)}
.qa details[open] summary::after{content:"\2212"}
.qa details p{color:var(--slate);margin:10px 0 0;max-width:44em}

/* Forms on public pages */
.form{display:grid;gap:14px;background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:24px}
.form label{display:grid;gap:5px;font-size:14.5px;font-weight:600}
.form .hint{font-weight:400;color:var(--slate);font-size:13.5px}
.form input,.form textarea{font:inherit;font-size:15.5px;padding:10px 12px;border:1px solid var(--rule-strong);border-radius:7px;background:var(--paper);color:var(--ink);width:100%}
.form textarea{min-height:84px}
.form .btn{justify-self:start}
.hp{position:absolute;left:-9999px}
.ok-msg{border:1px solid color-mix(in srgb,var(--carry) 45%,var(--rule));background:color-mix(in srgb,var(--carry) 8%,transparent);border-radius:8px;padding:12px 14px;font-size:15px}

/* ---- Route and status pills ---- */
.pill{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px;line-height:1.5;padding:2px 9px;border-radius:999px;white-space:nowrap;color:var(--slate);background:color-mix(in srgb,var(--slate) 12%,transparent)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.carry,.pill.delivered,.pill.pass{color:var(--carry);background:color-mix(in srgb,var(--carry) 12%,transparent)}
.pill.confirm,.pill.sent{color:var(--confirm);background:color-mix(in srgb,var(--confirm) 12%,transparent)}
.pill.rewrite,.pill.review{color:var(--rewrite);background:color-mix(in srgb,var(--rewrite) 13%,transparent)}
.pill.drop{color:var(--drop);background:color-mix(in srgb,var(--drop) 14%,transparent)}
.pill.ask,.pill.stuck,.pill.fail{color:var(--ask);background:color-mix(in srgb,var(--ask) 12%,transparent)}
.pill.paid{color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent)}

/* Sample-data notice */
.sample{font-size:13.5px;color:var(--slate);border:1px dashed var(--rule-strong);border-radius:8px;padding:8px 12px;margin:0 0 20px}

/* ---- Diffs ---- */
.diff{background:var(--surface);border:1px solid var(--rule);border-radius:8px;overflow:auto;font:12.5px/1.55 var(--mono);min-width:0}
.diff .dh{position:sticky;left:0;padding:8px 12px;border-bottom:1px solid var(--rule);color:var(--slate);font:600 13px/1.4 var(--sans);display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px}
.diff pre{margin:0;padding:6px 0}
.diff span{display:block;padding:0 12px;white-space:pre;tab-size:4}
.diff .a{background:var(--add-bg);color:var(--add-fg)}
.diff .d{background:var(--del-bg);color:var(--del-fg)}
.diff .h{color:var(--slate)}
.diff.empty{padding:14px 12px;font-family:var(--sans);font-size:14px;color:var(--slate)}

/* ---- Dialog ---- */
dialog{border:1px solid var(--rule);border-radius:12px;padding:0;background:var(--surface);color:var(--ink);max-width:640px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(10,20,30,.45)}
dialog .dbody{padding:22px 24px}
dialog .dfoot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:14px 24px;border-top:1px solid var(--rule)}
.draft{background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:14px 16px;font-size:15px;white-space:pre-wrap;margin:14px 0 0}
.draft b{display:block;font-size:13.5px;color:var(--slate);font-weight:600;margin-bottom:8px}
dialog .dl{display:grid;gap:6px;font-weight:600;font-size:14px;margin-top:14px}
dialog textarea,dialog input{font:inherit;font-size:15px;padding:9px 11px;border:1px solid var(--rule-strong);border-radius:7px;background:var(--paper);color:var(--ink);width:100%}
dialog textarea{min-height:70px}
footer.site{padding:32px 0 56px;color:var(--slate);font-size:14px;border-top:1px solid var(--rule);margin-top:56px}

/* ---- Explainers: a dark panel with one short, precise animation ----
   The base styles are the end state. Keyframes animate *from* the start, so with motion off, or before the
   script arms the panel, the finished diagram shows. graft.js arms each panel, plays it once when it scrolls
   into view, and wires its replay button. */
.x{background:var(--term);color:var(--term-fg);border-radius:10px;padding:18px 18px 14px;position:relative;overflow:hidden;font-size:14px;margin:0;border:1px solid var(--term-rule)}
.x .xh{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.x .xh span{color:var(--term-dim);font:500 12px/1.4 var(--mono);letter-spacing:.03em;text-transform:uppercase}
.x .replay{font:500 12px/1 var(--mono);color:var(--term-dim);background:transparent;border:1px solid var(--term-rule);border-radius:5px;padding:6px 9px;cursor:pointer}
.x .replay:hover{color:var(--term-fg);border-color:var(--term-dim)}
.x .xf{margin-top:16px;padding-top:12px;border-top:1px solid var(--term-rule);color:var(--term-dim);font-size:13.5px}
.x .xf b{color:var(--term-fg);font-weight:600}
.x code{font-family:var(--mono)}
.x.armed:not(.play) *{animation-play-state:paused!important}
@keyframes x-in{from{opacity:0}}
@keyframes x-up{from{opacity:0;transform:translateY(6px)}}
@keyframes x-left{from{opacity:0;transform:translateX(-10px)}}
@keyframes x-dim{to{opacity:.35}}
@keyframes x-grow{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.x *{animation:none!important;transition:none!important}.x .replay{display:none}*{scroll-behavior:auto!important}}