/* ═══════════════════════════════════════════════════════════════
   chrome.css — the one header and footer used by every page.
   Own tokens and pk- class names, so it renders the same on top of
   tailwind.css, blog.css, tools.css or a plain document page.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --pk-bg:#0C0C0D; --pk-bg-2:#101011; --pk-glass:rgba(12,12,13,.86);
  --pk-text:#FFFFFF; --pk-muted:#C7C3BC; --pk-line:rgba(255,255,255,.10);
  --pk-ember:#FF5123; --pk-ember-txt:#FF6A3D;
  --pk-cta:linear-gradient(135deg,#FF9153 0%,#FF5123 55%,#F5391B 100%);
  --pk-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --pk-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --pk-mono:"IBM Plex Mono",ui-monospace,monospace;
}
:root[data-theme="light"]{
  --pk-bg:#FBFAF8; --pk-bg-2:#F4F2EE; --pk-glass:rgba(251,250,248,.9);
  --pk-text:#141416; --pk-muted:#55504A; --pk-line:rgba(20,20,22,.13);
  --pk-ember-txt:#B32E09;
}
html{scroll-padding-top:84px}
.pk-header,.pk-header *,.pk-foot,.pk-foot *{box-sizing:border-box}

.pk-skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;
  background:var(--pk-ember);color:#1A0800;font:700 14px var(--pk-body);text-decoration:none}
.pk-skip:focus{top:10px}

/* ════════ HEADER ════════ */
header.pk-header{
  position:sticky;top:0;left:0;right:0;z-index:60;width:100%;margin:0;padding:0;
  background:var(--pk-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:0;border-bottom:1px solid var(--pk-line);
  font-family:var(--pk-body);color:var(--pk-text);
}
.pk-bar{max-width:1280px;height:64px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.pk-logo{display:inline-flex;align-items:center;gap:11px;flex:none;color:inherit;text-decoration:none}
.pk-logo:hover{text-decoration:none}
.pk-logo svg{flex:none;display:block;border-radius:23.7%}
.pk-logo-txt{display:flex;flex-direction:column;line-height:1.16;text-align:left}
.pk-logo-txt b{font-family:var(--pk-display);font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--pk-text);white-space:nowrap}
.pk-logo-txt span{font-family:var(--pk-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pk-muted);white-space:nowrap}

.pk-nav{display:flex;align-items:center;gap:4px}
.pk-nav a{padding:8px 13px;border-radius:9px;font-size:14.5px;font-weight:500;line-height:1.3;
  color:var(--pk-muted);text-decoration:none;transition:color .16s,background .16s}
.pk-nav a:hover{color:var(--pk-text);background:rgba(127,127,127,.12);text-decoration:none}
.pk-nav a[aria-current="page"]{color:var(--pk-text);box-shadow:inset 0 -2px 0 var(--pk-ember);border-radius:9px 9px 0 0}

.pk-actions{display:flex;align-items:center;gap:10px;flex:none}
.pk-theme,.pk-burger{
  width:40px;height:40px;flex:none;padding:0;display:inline-grid;place-items:center;cursor:pointer;
  background:rgba(127,127,127,.09);border:1px solid var(--pk-line);border-radius:10px;color:var(--pk-muted);
  transition:color .16s,border-color .16s}
.pk-theme:hover,.pk-burger:hover{color:var(--pk-ember-txt);border-color:rgba(255,81,35,.45)}
.pk-theme svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pk-theme .pk-moon{display:none}
:root[data-theme="light"] .pk-theme .pk-sun{display:none}
:root[data-theme="light"] .pk-theme .pk-moon{display:block}
a.pk-cta,a.pk-fcta,a.pk-menu-cta{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  background:var(--pk-cta);color:#1A0800;font-family:var(--pk-body);font-weight:700;font-size:14px;line-height:1.2;
  padding:11px 18px;border-radius:11px;text-decoration:none;box-shadow:0 10px 26px -12px rgba(255,81,35,.7);
  transition:filter .16s}
a.pk-cta:hover,a.pk-fcta:hover,a.pk-menu-cta:hover{filter:brightness(1.07);text-decoration:none;color:#1A0800}

.pk-burger{display:none}
.pk-burger span{display:block;width:19px;height:14px;position:relative}
.pk-burger i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .24s,opacity .16s}
.pk-burger i:nth-child(1){top:0}.pk-burger i:nth-child(2){top:6px}.pk-burger i:nth-child(3){top:12px}
.pk-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.pk-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.pk-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.pk-menu{position:absolute;left:0;right:0;top:100%;z-index:55;padding:10px 24px 22px;
  background:var(--pk-bg);border-bottom:1px solid var(--pk-line);max-height:calc(100dvh - 64px);overflow-y:auto}
.pk-menu nav{display:flex;flex-direction:column}
.pk-menu nav a{display:flex;align-items:center;min-height:50px;font-family:var(--pk-display);font-size:19px;font-weight:600;
  letter-spacing:-.02em;color:var(--pk-text);text-decoration:none;border-bottom:1px solid var(--pk-line)}
.pk-menu nav a:hover{color:var(--pk-ember-txt)}
a.pk-menu-cta{display:flex;width:100%;min-height:50px;margin-top:16px;border-radius:999px;font-size:15px}
.pk-menu-note{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-family:var(--pk-mono);font-size:10.5px;
  line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--pk-muted)}
.pk-dot{display:inline-block;height:6px;width:6px;border-radius:99px;background:var(--pk-ember);flex:none}
.pk-scrim{position:fixed;inset:64px 0 0;z-index:40;background:rgba(0,0,0,.5)}
body.pk-menu-open{overflow:hidden}

/* ════════ FOOTER ════════ */
footer.pk-foot{display:block;margin:0;padding:56px 0 30px;max-width:none;text-align:left;
  background:var(--pk-bg);border:0;border-top:1px solid var(--pk-line);
  font-family:var(--pk-body);font-size:15px;line-height:1.5;color:var(--pk-muted)}
.pk-foot-in{max-width:1280px;margin:0 auto;padding:0 24px}
.pk-fgrid{display:grid;grid-template-columns:1.55fr repeat(4,1fr) 1.3fr;gap:32px;padding-bottom:40px}
.pk-fbrand .pk-logo{margin-bottom:16px}
.pk-fblurb{margin:0 0 18px;max-width:38ch;font-size:14px;line-height:1.65;color:var(--pk-muted)}
.pk-social{display:flex;gap:8px;margin-top:18px}
.pk-social a{width:38px;height:38px;display:inline-grid;place-items:center;border-radius:10px;
  border:1px solid var(--pk-line);color:var(--pk-muted);transition:color .16s,border-color .16s}
.pk-social a:hover{color:var(--pk-ember-txt);border-color:rgba(255,81,35,.45)}
.pk-social svg{width:16px;height:16px;fill:currentColor;display:block}
footer.pk-foot h2.pk-fh{margin:0 0 16px;font-family:var(--pk-mono);font-size:10.5px;font-weight:600;line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pk-ember-txt)}
.pk-fcol{display:flex;flex-direction:column;gap:11px;align-items:flex-start;min-width:0}
.pk-fcol a{color:var(--pk-muted);font-size:14.5px;line-height:1.4;text-decoration:none;overflow-wrap:anywhere;transition:color .16s}
.pk-fcol a:hover{color:var(--pk-text);text-decoration:none}
.pk-fcol a.pk-more{color:var(--pk-ember-txt);font-weight:600}
.pk-fplain{font-size:14px;line-height:1.6}
.pk-favail{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-family:var(--pk-mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase}
.pk-fbottom{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding-top:24px;border-top:1px solid var(--pk-line);
  font-family:var(--pk-mono);font-size:11px;letter-spacing:.06em;color:var(--pk-muted)}
.pk-flinks{display:flex;flex-wrap:wrap;gap:6px 20px}
.pk-fbottom a{color:inherit;text-decoration:none;transition:color .16s}
.pk-fbottom a:hover{color:var(--pk-ember-txt);text-decoration:none}
.pk-fbuilt{margin-left:auto}

/* the call-to-action band kept above the footer on blog, tool and industry pages */
.pk-band{padding:64px 24px 56px;text-align:center;border-top:1px solid var(--pk-line)}
.pk-band .foot-cta{padding:0;margin:0 auto;max-width:56ch}

/* homepage hero was padded for a fixed bar; the shared bar takes up its own height */
section#top.pt-32{margin-top:-64px;padding-top:calc(64px + 4.5rem)}

/* a real button over the whole card: keeps the card clickable and gives assistive tech and agents a proper control */
.case-card,.cr-card{position:relative}
.pk-open{position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;background:transparent;border:0;border-radius:inherit;cursor:pointer}
.pk-open:focus-visible{outline:2px solid var(--pk-ember);outline-offset:2px}

/* homepage: services and markets */
.pk-hl{padding:72px 24px;border-top:1px solid var(--pk-line)}
.pk-hl-in{max-width:1232px;margin:0 auto}
.pk-hl h2{margin:0 0 12px;font-family:var(--pk-display);font-size:clamp(28px,4vw,44px);line-height:1.08;letter-spacing:-.03em;color:var(--pk-text)}
.pk-hl p{margin:0 0 28px;max-width:66ch;color:var(--pk-muted);font-size:17px;line-height:1.65}
.pk-hl h3{margin:28px 0 12px;font-family:var(--pk-mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pk-ember-txt)}
.pk-hl-g{display:flex;flex-wrap:wrap;gap:10px}
.pk-hl-g a{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border:1px solid var(--pk-line);border-radius:999px;font-size:14.5px;font-weight:500;color:var(--pk-text);text-decoration:none;transition:border-color .16s,color .16s}
.pk-hl-g a:hover{border-color:rgba(255,81,35,.5);color:var(--pk-ember-txt);text-decoration:none}

/* author box on blog posts */
.pk-author{display:flex;gap:16px;align-items:flex-start;margin:44px 0 0;padding:22px;border:1px solid var(--pk-line);border-radius:16px}
.pk-author img{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover}
.pk-author h2{margin:0 0 6px;font-size:17px}
.pk-author p{margin:0;font-size:15px;line-height:1.6;color:var(--pk-muted)}
.pk-author a{color:var(--pk-ember-txt)}

/* document pages: the privacy and data-deletion copy on the site's own surface */
body.pk-doc{background:var(--pk-bg);color:var(--pk-muted)}
main.pk-doc-main{display:block;background:var(--pk-bg)}

@media (max-width:1040px){
  .pk-nav{display:none}
  .pk-burger{display:inline-grid}
  .pk-fgrid{grid-template-columns:1fr 1fr 1fr;gap:36px}
  .pk-fbrand{grid-column:1/-1}
}
@media (max-width:640px){
  .pk-bar{padding:0 16px;gap:10px}
  .pk-actions{gap:8px}
  .pk-theme,.pk-burger{width:44px;height:44px}
  a.pk-cta{padding:12px 13px;font-size:13px;min-height:44px}
  .pk-fgrid{grid-template-columns:1fr 1fr;gap:30px 20px}
  .pk-fcol a,.pk-fbottom a{display:inline-flex;align-items:center;min-height:44px}
  .pk-fcol{gap:0}
  .pk-fcol:last-child{grid-column:1/-1}
  .pk-fcol:last-child .pk-fplain,.pk-favail{margin-top:8px}
  .pk-social a{width:44px;height:44px}
  .pk-fbuilt{margin-left:0;width:100%}
  footer.pk-foot{padding-top:44px}
}
/* Logo rule: the full logo (icon, name and line) or the icon alone, never part of it.
   Phones up to 560px show the icon only; the name stays readable to screen readers. */
@media (max-width:560px){
  .pk-logo{min-height:44px}
  .pk-bar .pk-logo-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:310px){
  a.pk-cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pk-burger i,.pk-nav a,.pk-social a{transition:none}
}
@media print{
  .pk-header,.pk-foot,.pk-band,.pk-skip{display:none!important}
}
/* about page */
.pk-about-head{display:flex;gap:32px;align-items:center}
.pk-about-photo{flex:none;width:190px;height:216px;object-fit:cover;border-radius:18px}
@media (max-width:640px){.pk-about-head{flex-direction:column;align-items:flex-start;gap:20px}.pk-about-photo{width:150px;height:171px}}
.pk-author a{text-decoration:underline;text-underline-offset:3px}
.tool-head.pk-about-head{max-width:none}
.pk-about-head .lede{max-width:62ch}
.pk-about-head h1{max-width:18em}

/* ════════ layout fixes, mobile first ════════ */
/* the label above a page headline always gets breathing room */
.tool-head .eyebrow,.th-head .eyebrow,.bi-head .eyebrow{display:inline-flex;margin-bottom:18px}
.tool-head .eyebrow + h1,.th-head .eyebrow + h1,.bi-head .eyebrow + h1{margin-top:0}
.pk-about-head .eyebrow{margin-bottom:14px}
.post-head .tags{margin-bottom:18px}
.post-head .tags .tag{display:inline-flex;align-items:center;min-height:32px}

/* tables never push the page sideways: stacked rows on phones, a normal table from tablet up */
.pk-table{margin-top:8px;border:1px solid var(--pk-line);border-radius:14px;overflow:hidden}
.pk-table table{width:100%;border-collapse:collapse;font-size:15px}
.pk-table thead{display:none}
.pk-table tr{display:block;padding:14px 16px;border-bottom:1px solid var(--pk-line)}
.pk-table tr:last-child{border-bottom:0}
.pk-table td{display:block;padding:2px 0;color:var(--pk-muted);line-height:1.5}
.pk-table td:last-child{margin-top:4px;font-weight:600}
.pk-table a{color:var(--pk-ember-txt)}
@media (min-width:641px){
  .pk-table thead{display:table-header-group}
  .pk-table tr{display:table-row;padding:0}
  .pk-table th,.pk-table td{display:table-cell;padding:12px 16px;text-align:left;border-bottom:1px solid var(--pk-line)}
  .pk-table tr:last-child td{border-bottom:0}
  .pk-table td:last-child{margin-top:0}
  .pk-table th{font-family:var(--pk-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--pk-muted);font-weight:600}
}
/* any other wide table scrolls inside its own box */
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* long words and URLs wrap instead of widening the page */
main h1,main h2,main h3,main p,main li{overflow-wrap:break-word}
main td,main th{overflow-wrap:anywhere}
main img,main video,main iframe{max-width:100%}