/**
 * Shared styles for the 2026 homepage, offering pages and pricing experience.
 * Loaded conditionally by inc/refresh-2026.php.
 */

/* ==================== Homepage hero and team scroller ==================== */
/* ============ HERO TEXT ============ */
@media (max-width: 1024px) {
  .klingit-refresh-2026--homepage h1.wp-block-heading.has-decoration-big-font-size {
    font-size: clamp(2.25rem, 6.5vw, 4rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.015em !important;
  }
}
@media (max-width: 781px) {
  .klingit-refresh-2026--homepage h1.wp-block-heading.has-decoration-big-font-size {
    font-size: clamp(2rem, 8.6vw, 3rem) !important;
    line-height: 1.08 !important;
  }
  .klingit-refresh-2026--homepage .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
}
/* ============ SCROLLER ============ */
/* Grid-item safety + vertical centring against the text column */
.ks-section {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-top: 0;
  align-self: center;
}
.ks-wrap {
  --ks-gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 3 / 2.4;    /* shorter: sits level with the text block */
  max-height: 68vh;         /* stops it dominating on big screens */
  min-height: 320px;
  overflow: hidden;
  margin-inline: auto;
}
.ks-wrap * { box-sizing: border-box; }
.ks-hero {
  display: flex;
  gap: var(--ks-gap);
  height: 100%;
  width: 100%;
}
.ks-col {
  flex: 1 1 0;
  overflow: hidden;
  min-width: 0;
}
.ks-track {
  display: flex;
  flex-direction: column;
  gap: var(--ks-gap);
  transform: translateZ(0);
}
.ks-col--down .ks-track { animation: ksDown 60s linear infinite; }
.ks-col--up   .ks-track { animation: ksUp 60s linear infinite; }
@keyframes ksDown {
  0%   { transform: translateY(0) translateZ(0); }
  100% { transform: translateY(calc(-50% - (var(--ks-gap) / 2))) translateZ(0); }
}
@keyframes ksUp {
  0%   { transform: translateY(calc(-50% - (var(--ks-gap) / 2))) translateZ(0); }
  100% { transform: translateY(0) translateZ(0); }
}
.ks-card {
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #e0dbd0;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.ks-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ks-wrap:hover .ks-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ks-track { animation: none !important; }
}
/* ---- Below the Grid's stacking point: one column, full width ---- */
@media (max-width: 781px) {
  .ks-section { padding-top: 40px; }
  .ks-wrap {
    --ks-gap: 6px;
    aspect-ratio: 3 / 2.6;
    max-height: none;
    min-height: 300px;
  }
  .ks-col--down .ks-track,
  .ks-col--up .ks-track { animation-duration: 38s; }
}
@media (max-width: 400px) {
  .ks-section { padding-top: 32px; }
  .ks-wrap {
    aspect-ratio: 3 / 2.8;
    min-height: 280px;
  }
}

/* ==================== Portfolio hover cards ==================== */
.portfolio-item {
  position: relative;
  overflow: hidden;
}
.portfolio-item a {
  display: block;
  position: relative;
}
.portfolio-item .base-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portfolio-item .hover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.portfolio-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.portfolio-label {
  background: #F9F4EE;
  color: #1E1E1E;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 8px 16px;
  border-radius: 999px;
  text-transform: uppercase;
}
.portfolio-item:hover .hover-image {
  opacity: 1;
}
.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}

/* ==================== Offering links ==================== */
.kl-offer {
  --kl-ink: #1E1E1E;
  --kl-card: #F2E9D5;
  --kl-card-hover: #EFE4CB;
  --kl-warm: 64, 44, 20;
  --kl-poly: "PolySans Median", "PolySans-Median", "PolySans", "Poly Sans",
              "Inter", system-ui, sans-serif;
  --kl-inter: "Inter", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--kl-inter);
  -webkit-font-smoothing: antialiased;
}
.kl-offer .kl-offer__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title link"
    "body  link";
  align-items: start;
  column-gap: 48px;
  background: var(--kl-card);
  border: 0 !important;
  border-radius: 20px;
  box-shadow: none;
  padding: 38px 44px;
  text-decoration: none;
  color: var(--kl-ink);
  transition: background 0.3s ease, transform 0.3s ease;
}
.kl-offer .kl-offer__card:hover {
  background: var(--kl-card-hover);
  transform: translateY(-3px);
}
.kl-offer .kl-offer__title {
  grid-area: title;
  font-family: var(--kl-poly) !important;
  font-weight: 500 !important;
  font-synthesis: none;
  font-size: clamp(1.5rem, 1.7vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--kl-ink);
  margin: 0;
  padding: 0;
}
.kl-offer .kl-offer__body {
  grid-area: body;
  display: block;
  max-width: 62ch;
  font-family: var(--kl-inter);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(30, 30, 30, 0.72);
  padding-top: 14px;
}
.kl-offer .kl-offer__link {
  grid-area: link;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 3px;
  font-family: var(--kl-inter);
  font-weight: 500;
  font-size: 0.9375rem;
  white-space: nowrap;
  color: var(--kl-ink);
  border-bottom: 1px solid rgba(var(--kl-warm), 0.35);
  transition: border-color 0.3s ease;
}
.kl-offer .kl-offer__card:hover .kl-offer__link {
  border-bottom-color: var(--kl-ink);
}
.kl-offer .kl-offer__arrow {
  font-size: 0.875rem;
  transition: transform 0.3s ease;
}
.kl-offer .kl-offer__card:hover .kl-offer__arrow {
  transform: translateX(5px);
}
.kl-offer .kl-offer__card:focus-visible {
  outline: 2px solid var(--kl-ink);
  outline-offset: 4px;
}
@media (max-width: 781px) {
  .kl-offer {
    gap: 12px;
  }
  .kl-offer .kl-offer__card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "body"
      "link";
    padding: 30px 26px;
  }
  .kl-offer .kl-offer__title {
    font-size: 1.4375rem;
  }
  .kl-offer .kl-offer__link {
    align-self: start;
    margin-top: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kl-offer .kl-offer__card,
  .kl-offer .kl-offer__arrow,
  .kl-offer .kl-offer__link { transition: none; }
  .kl-offer .kl-offer__card:hover { transform: none; }
}

/* ==================== Agent workflow illustration ==================== */
.klingit-agent-workflow{
    --fantasy:#F9F5EC;
    --eggshell:#F2E9D5;
    --paper:#FFFFFF;
    --ink:#1E1E1E;

    --sunrise:#FF6D42;
    --sunrise-text:#B94729;
    --orange:#F0B489;
    --green:#B5CEB5;
    --blue:#A5C7F9;
    --violet:#C7C0E8;
    --pink:#FDC2EE;

    --avatar-bg:#E7DFC7;
    --stroke:rgba(30,30,30,.20);
    --rule:rgba(30,30,30,.14);
    --rule-soft:rgba(30,30,30,.08);
    --mute:rgba(30,30,30,.68);
    --mute-soft:rgba(30,30,30,.64);

    --font-display:'PolySans','Poly Sans','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    --font-ui:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  }
  .klingit-agent-workflow *{ box-sizing:border-box; }
  /* margin-inline keeps the 1080px panels centred inside the 1240px content
     column; without it they sat ~80px left of the centred heading above. */
  .klingit-agent-workflow .stack{ width:100%; max-width:1080px; margin-inline:auto; display:flex; flex-direction:column; gap:20px; }

  /* ---------- panel scaffold ---------- */
  .klingit-agent-workflow .panel{ background:var(--fantasy); border:1px solid var(--stroke); }
  .klingit-agent-workflow .panel-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:13px 28px; border-bottom:1px solid var(--stroke);
    font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--mute-soft); font-weight:500;
  }
  .klingit-agent-workflow .panel-body{ display:grid; grid-template-columns:264px 1fr; gap:52px; padding:38px 28px 42px; }

  .klingit-agent-workflow .step-index{ font-family:var(--font-display); font-size:12.5px; font-weight:500; color:var(--mute-soft); margin-bottom:18px; }
  .klingit-agent-workflow .step-title{ font-family:var(--font-display); font-size:26px; font-weight:500; line-height:1.14; letter-spacing:-.015em; margin:0 0 14px; }
  .klingit-agent-workflow .step-desc{ font-size:13px; line-height:1.62; color:var(--mute); margin:0; max-width:34ch; }
  .klingit-agent-workflow .step-role{
    margin-top:22px; padding-top:14px; border-top:1px solid var(--rule);
    font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-soft); font-weight:500;
  }

  /* ---------- one: the system ---------- */
  .klingit-agent-workflow .system{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:30px; }
  .klingit-agent-workflow .sys-item{ padding:16px 0 18px; border-top:1px solid var(--rule); }
  .klingit-agent-workflow .system .sys-item:nth-child(-n+3){ border-top:none; padding-top:0; }
  .klingit-agent-workflow .sys-swatch{ width:14px; height:14px; margin-bottom:12px; }
  .klingit-agent-workflow .sys-name{ font-family:var(--font-display); font-size:13px; font-weight:500; margin-bottom:5px; }
  .klingit-agent-workflow .sys-desc{ font-size:11.5px; line-height:1.5; color:var(--mute); }

  /* ---------- two: the console ---------- */
  .klingit-agent-workflow .console{ background:var(--paper); border:1px solid var(--stroke); border-radius:6px; overflow:hidden; }
  .klingit-agent-workflow .console-bar{
    display:flex; align-items:center; gap:14px; padding:11px 16px;
    background:var(--eggshell); border-bottom:1px solid var(--rule);
  }
  .klingit-agent-workflow .traffic{ display:flex; gap:6px; }
  .klingit-agent-workflow .traffic span{ width:9px; height:9px; border-radius:50%; display:block; }
  .klingit-agent-workflow .traffic span:nth-child(1){ background:var(--sunrise); }
  .klingit-agent-workflow .traffic span:nth-child(2){ background:var(--orange); }
  .klingit-agent-workflow .traffic span:nth-child(3){ background:var(--green); }
  .klingit-agent-workflow .console-title{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-soft); font-weight:500; }

  .klingit-agent-workflow .opbar-wrap{ padding:16px 16px 4px; }
  .klingit-agent-workflow .opbar{
    display:flex; align-items:center; gap:12px;
    background:var(--fantasy); border:1px solid var(--rule-soft); border-radius:4px; padding:10px 12px;
  }
  .klingit-agent-workflow .op-avatar{
    width:32px; height:32px; border-radius:50%; background:var(--avatar-bg);
    position:relative; overflow:hidden; border:1px solid var(--sunrise); flex:none;
  }
  .klingit-agent-workflow .op-avatar img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center top; }
  .klingit-agent-workflow .op-meta{ line-height:1.25; flex:none; }
  .klingit-agent-workflow .op-meta .n{ font-family:var(--font-display); font-size:12.5px; font-weight:500; }
  .klingit-agent-workflow .op-meta .r{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute-soft); font-weight:500; }
  .klingit-agent-workflow .op-input{
    flex:1; min-width:0; background:var(--paper); border:1px solid var(--rule-soft); border-radius:3px;
    padding:9px 12px; font-size:12.5px; color:var(--ink); white-space:nowrap; overflow:hidden;
  }
  .klingit-agent-workflow .caret{ display:inline-block; width:1.5px; height:12px; background:var(--sunrise); vertical-align:-2px; margin-left:1px; animation:blink 1s step-start infinite; }
  @keyframes blink{ 50%{ opacity:0; } }
  .klingit-agent-workflow .run-btn{
    background:var(--sunrise); color:var(--ink); border:none; border-radius:3px;
    padding:10px 20px; font-family:var(--font-ui); font-size:10.5px; font-weight:500;
    letter-spacing:.08em; text-transform:uppercase; flex:none;
    transition:transform .12s ease, filter .12s ease;
  }
  .klingit-agent-workflow .run-btn.pressed{ transform:scale(.94); filter:brightness(1.06); }

  .klingit-agent-workflow .activity{ padding:12px 16px 0; font-size:10.5px; color:var(--mute-soft); min-height:16px; letter-spacing:.02em; }
  .klingit-agent-workflow .activity .mark{ display:inline-block; width:5px; height:5px; background:var(--green); margin-right:8px; vertical-align:middle; }

  .klingit-agent-workflow .grid-wrap{ position:relative; padding:12px 16px 18px; }
  .klingit-agent-workflow .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; position:relative; z-index:1; }
  .klingit-agent-workflow .agent{
    background:var(--eggshell); border:1px solid transparent; border-radius:4px;
    padding:14px 10px 12px; text-align:center; transition:border-color .2s ease, background .2s ease;
  }
  .klingit-agent-workflow .agent.active{ border-color:var(--sunrise); background:var(--fantasy); }
  .klingit-agent-workflow .agent-icon{
    width:30px; height:30px; border-radius:6px; margin:0 auto 9px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:12px; font-weight:500; color:var(--ink);
  }
  .klingit-agent-workflow .agent-name{ font-family:var(--font-display); font-size:11px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; margin-bottom:7px; line-height:1.2; }
  .klingit-agent-workflow .agent-badges{ display:flex; align-items:center; justify-content:center; gap:6px; }
  .klingit-agent-workflow .live-dot{ width:5px; height:5px; background:var(--green); display:block; }
  .klingit-agent-workflow .live-badge{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; color:var(--mute); }
  .klingit-agent-workflow .agent.running .live-dot{ background:var(--sunrise); }
  .klingit-agent-workflow .agent.running .live-badge{ color:var(--sunrise-text); }
  .klingit-agent-workflow .run-tag{ font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--sunrise-text); height:13px; margin-top:5px; font-weight:500; }
  .klingit-agent-workflow .shipped{ font-size:9px; color:var(--mute-soft); font-variant-numeric:tabular-nums; }
  .klingit-agent-workflow .beam{ position:absolute; width:6px; height:6px; background:var(--sunrise); opacity:0; z-index:2; }

  .klingit-agent-workflow .refine-strip{
    display:flex; align-items:center; gap:14px; margin-top:14px;
    background:var(--paper); border:1px solid var(--stroke); border-radius:6px; padding:14px 16px;
  }
  .klingit-agent-workflow .refine-avatar{
    width:34px; height:34px; border-radius:50%; background:var(--avatar-bg);
    position:relative; overflow:hidden; flex:none; border:1px solid var(--green);
  }
  .klingit-agent-workflow .refine-avatar img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center top; }
  .klingit-agent-workflow .refine-text{ flex:1; font-size:12.5px; line-height:1.55; color:var(--mute); }
  .klingit-agent-workflow .refine-text strong{ color:var(--ink); font-weight:500; }
  .klingit-agent-workflow .refine-badge{
    flex:none; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
    color:var(--mute); background:var(--fantasy); border:1px solid var(--rule); padding:7px 12px; border-radius:3px;
    transition:color .16s ease, background .16s ease, border-color .16s ease;
  }
  .klingit-agent-workflow .refine-badge.active{ color:var(--sunrise-text); border-color:var(--sunrise); background:var(--paper); }
  .klingit-agent-workflow .zone-note{ margin-top:16px; font-size:11.5px; color:var(--mute-soft); line-height:1.6; }
  .klingit-agent-workflow .zone-note strong{ color:var(--mute); font-weight:500; }

  /* ---------- three: the numbers ---------- */
  .klingit-agent-workflow .metrics{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr) minmax(0,1fr);
    align-items:stretch;
  }
  .klingit-agent-workflow .mc{ padding:20px 24px 20px 0; border-bottom:1px solid var(--rule-soft); }

  /* header band */
  .klingit-agent-workflow .mc.head{
    padding-top:0; padding-bottom:11px;
    border-bottom:1px solid var(--ink);
    font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
    font-weight:500; color:var(--mute-soft);
    display:flex; align-items:flex-end;
  }

  /* highlighted Klingit column, closed on all four sides */
  .klingit-agent-workflow .mc.c-with{
    background:var(--eggshell);
    padding-left:24px; padding-right:24px;
    border-left:1px solid var(--stroke); border-right:1px solid var(--stroke);
  }
  .klingit-agent-workflow .mc.c-with.head{
    padding-top:12px; border-top:1px solid var(--stroke); color:var(--ink);
    gap:8px; align-items:center;
  }
  .klingit-agent-workflow .mc.c-with.head::before{ content:""; width:7px; height:7px; background:var(--sunrise); display:block; }
  .klingit-agent-workflow .metrics .row-last{ border-bottom:none; }
  .klingit-agent-workflow .metrics .row-last.c-with{ border-bottom:1px solid var(--stroke); }

  .klingit-agent-workflow .m-label{ font-size:12.5px; color:var(--mute); display:flex; align-items:center; }
  .klingit-agent-workflow .m-num{
    font-family:var(--font-display); font-size:30px; font-weight:500;
    letter-spacing:-.025em; line-height:1; font-variant-numeric:tabular-nums;
    display:block;
  }
  .klingit-agent-workflow .c-plain .m-num{ color:var(--mute); }
  .klingit-agent-workflow .m-unit{ display:block; font-size:10.5px; letter-spacing:.02em; color:var(--mute-soft); margin-top:8px; }
  .klingit-agent-workflow .metrics-note{ margin-top:22px; font-size:11.5px; color:var(--mute-soft); line-height:1.6; }

  @media (max-width: 860px){
    .klingit-agent-workflow .panel-body{ grid-template-columns:1fr; gap:26px; padding:28px 18px 32px; }
    .klingit-agent-workflow .step-desc{ max-width:52ch; }
    .klingit-agent-workflow .system{ grid-template-columns:repeat(2,1fr); column-gap:24px; }
    .klingit-agent-workflow .system .sys-item:nth-child(-n+3){ border-top:1px solid var(--rule); padding-top:16px; }
    .klingit-agent-workflow .system .sys-item:nth-child(-n+2){ border-top:none; padding-top:0; }
  }
  @media (max-width: 560px){
    .klingit-agent-workflow .stack{ gap:14px; }
    .klingit-agent-workflow .panel-head{ padding:11px 16px; font-size:9px; }
    .klingit-agent-workflow .panel-body{ padding:24px 16px 28px; }
    .klingit-agent-workflow .step-title{ font-size:21px; }
    .klingit-agent-workflow .system{ grid-template-columns:1fr; }
    .klingit-agent-workflow .system .sys-item:nth-child(-n+2){ border-top:1px solid var(--rule); padding-top:16px; }
    .klingit-agent-workflow .system .sys-item:first-child{ border-top:none; padding-top:0; }
    .klingit-agent-workflow .opbar-wrap{ padding:12px 12px 2px; }
    .klingit-agent-workflow .opbar{ flex-wrap:wrap; gap:10px; }
    .klingit-agent-workflow .op-input{ order:3; flex-basis:100%; white-space:normal; font-size:12px; }
    .klingit-agent-workflow .run-btn{ order:2; margin-left:auto; }
    .klingit-agent-workflow .grid-wrap{ padding:10px 12px 14px; }
    .klingit-agent-workflow .grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
    .klingit-agent-workflow .refine-strip{ flex-wrap:wrap; gap:10px; }
    .klingit-agent-workflow .refine-text{ order:3; flex-basis:100%; }
    .klingit-agent-workflow .metrics{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .klingit-agent-workflow .metrics .c-plain{ display:none; }
    .klingit-agent-workflow .mc{ padding:16px 16px 16px 0; }
    .klingit-agent-workflow .mc.c-with{ padding-left:16px; padding-right:16px; }
    .klingit-agent-workflow .m-num{ font-size:24px; }
  }
  @media (prefers-reduced-motion: reduce){ .klingit-agent-workflow *{ animation:none !important; transition:none !important; } }

/* ==================== Comparison table ==================== */
.klingit-compare,
.klingit-compare * {
  box-sizing: border-box;
}

.klingit-compare {
  width: 100%;
  font-family: Inter, sans-serif;
  background: #F6ECD8;
  border-radius: 20px;
  position: relative;
}

.klingit-compare__scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 20px;
  -webkit-overflow-scrolling: touch;
}

.klingit-compare table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.klingit-compare th:first-child,
.klingit-compare td:first-child {
  width: 34%;
}

.klingit-compare th {
  font-size: 13px;
  font-weight: 500;
  color: #6A655C;
  padding: 22px 8px;
  text-align: center;
  border-bottom: 1px solid #E0D5BE;
  background: #F6ECD8;
}

.klingit-compare td {
  padding: 30px 10px;
  border-bottom: 1px solid #E7DDC7;
  text-align: center;
  vertical-align: middle;
}

.klingit-compare .name {
  text-align: left;
  padding-left: 18px;
}

.klingit-compare .name strong {
  display: block;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #111;
}

.klingit-compare .name p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #666;
  max-width: 340px;
}

.klingit-compare .yes,
.klingit-compare .maybe,
.klingit-compare .no {
  font-family: Inter, sans-serif;
  font-size: 25px;
  line-height: 1;
  font-weight: 600;
}

.klingit-compare .yes {
  color: #55785F;
}

.klingit-compare .maybe {
  color: #666666;
}

.klingit-compare .no {
  color: #222;
}

/* Highlight row: filled instead of stroked */
.klingit-compare .best td {
  background: #F9F5EC;
  border-top: none;
  border-bottom: none;
}

.klingit-compare .best td:first-child {
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}

.klingit-compare .best td:last-child {
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}

/* ---------- MOBILE: horizontal scroll with sticky first column ---------- */
@media (max-width: 768px) {

  .klingit-compare table {
    table-layout: fixed;
    width: auto;
    min-width: 592px;
  }

  .klingit-compare th:first-child,
  .klingit-compare td:first-child {
    width: 124px;
  }

  .klingit-compare th:not(.name),
  .klingit-compare td:not(.name) {
    width: 78px;
  }

  .klingit-compare th.name,
  .klingit-compare td.name {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #F6ECD8;
    padding: 16px 10px 16px 14px;
    box-shadow: 6px 0 10px -8px rgba(0, 0, 0, 0.18);
  }

  .klingit-compare .best td.name {
    background: #F9F5EC;
  }

  .klingit-compare .name strong {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin-bottom: 0;
    hyphens: none;
  }

  .klingit-compare .name p {
    display: none;
  }

  .klingit-compare th {
    font-size: 12px;
    font-weight: 500;
    padding: 16px 4px;
  }

  .klingit-compare td {
    padding: 18px 4px;
  }

  .klingit-compare .yes,
  .klingit-compare .maybe,
  .klingit-compare .no {
    font-size: 20px;
  }
}

/* ==================== Testimonials ==================== */
.klg-quotes{
  --klg-cream:#F3F0E7;
  --klg-ink:#111111;
  --klg-accent:#E9FF48;
  --klg-gap:clamp(12px,2.2vw,28px);
  --klg-card:clamp(230px,26vw,380px);
  --klg-radius:14px;
  --klg-duration:50s;   /* lower = faster */
  --klg-fade:6%;        /* edge fade width; set to 0% to remove */
  position:relative;
  padding:clamp(28px,5vw,64px) 0;
  overflow:hidden;
}
.klg-quotes__viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--klg-fade),#000 calc(100% - var(--klg-fade)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--klg-fade),#000 calc(100% - var(--klg-fade)),transparent 100%);
}
.klg-quotes__track{
  display:flex;
  gap:var(--klg-gap);
  width:max-content;
  animation:klg-marquee var(--klg-duration) linear infinite;
  will-change:transform;
}
/* Pause on hover, and whenever anything inside has keyboard focus. */
.klg-quotes__viewport:hover .klg-quotes__track,
.klg-quotes__viewport:focus-within .klg-quotes__track,
.klg-quotes.is-open .klg-quotes__track{
  animation-play-state:paused;
}
.klg-quotes__set{
  display:flex;
  gap:var(--klg-gap);
  margin:0;
  padding:0;
  list-style:none;
}
/* Moves right. The extra gap offset keeps the loop seamless. */
@keyframes klg-marquee{
  from{ transform:translate3d(calc(-50% - (var(--klg-gap) / 2)),0,0); }
  to{ transform:translate3d(0,0,0); }
}
.klg-quote{
  flex:0 0 var(--klg-card);
  min-width:0;
  margin:0;
  list-style:none;
}
/* Safety net: constrain the image even when it is not wrapped in the button,
   so an authoring change can never let a 2160px source stretch the track. */
.klg-quote > img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--klg-radius);
}
.klg-quote__btn{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  border-radius:var(--klg-radius);
  overflow:hidden;
  cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, opacity .35s ease;
}
.klg-quote__btn img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--klg-radius);
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}
.klg-quote__btn:hover,
.klg-quote__btn:focus-visible{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 18px 40px rgba(17,17,17,.16);
  outline:none;
}
.klg-quote__btn:focus-visible{box-shadow:0 0 0 3px var(--klg-ink),0 18px 40px rgba(17,17,17,.16);}
/* Dim the others while one is hovered. */
.klg-quotes__viewport:hover .klg-quote__btn:not(:hover){opacity:.65;}

/* Lightbox */
.klg-lb{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,2vw,24px);
  padding:clamp(16px,4vw,48px);
  background:rgba(17,17,17,.88);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .25s ease;
}
.klg-lb[hidden]{display:none;}
.klg-lb.is-open{opacity:1;}
.klg-lb__figure{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  max-width:min(88vw,720px);
}
.klg-lb__img{
  display:block;
  width:100%;
  height:auto;
  max-height:76vh;
  object-fit:contain;
  border-radius:14px;
  transform:scale(.96);
  transition:transform .25s ease;
}
.klg-lb.is-open .klg-lb__img{transform:scale(1);}
.klg-lb__count{
  font:500 14px/1 system-ui,-apple-system,"Inter",sans-serif;
  letter-spacing:.08em;
  color:#F3F0E7;
}
.klg-lb__nav,
.klg-lb__close{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:clamp(40px,6vw,56px);
  height:clamp(40px,6vw,56px);
  border:0;
  border-radius:999px;
  background:#F3F0E7;
  color:#111;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.klg-lb__nav:hover,
.klg-lb__close:hover{background:#E9FF48;transform:scale(1.06);}
.klg-lb__nav:focus-visible,
.klg-lb__close:focus-visible{outline:3px solid #E9FF48;outline-offset:3px;}
.klg-lb__close{
  position:absolute;
  top:clamp(12px,3vw,28px);
  right:clamp(12px,3vw,28px);
  font-size:30px;
}

@media (max-width:640px){
  .klg-quotes{--klg-card:min(72vw,320px);--klg-duration:38s;}
  .klg-lb__nav{position:absolute;bottom:clamp(16px,5vw,32px);}
  .klg-lb__nav--prev{left:22%;}
  .klg-lb__nav--next{right:22%;}
  .klg-lb__figure{max-width:92vw;}
  .klg-lb__img{max-height:66vh;}
}

/* Reduced motion: stop the drift, let people scroll it by hand instead. */
@media (prefers-reduced-motion:reduce){
  .klg-quotes__track{animation:none;transform:none;}
  .klg-quotes__viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
  .klg-quote__btn,.klg-lb,.klg-lb__img{transition:none;}
}

/* ==================== Homepage pricing cards ==================== */
.kl-pricing {
  --kl-ink: #1E1E1E;
  --kl-card: #F2E9D5;
  --kl-card-hover: #EFE4CB;
  --kl-warm: 64, 44, 20;
  --kl-poly: "PolySans Median", "PolySans-Median", "PolySans", "Poly Sans",
              "Inter", system-ui, sans-serif;
  --kl-inter: "Inter", system-ui, sans-serif;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  font-family: var(--kl-inter);
  -webkit-font-smoothing: antialiased;
}

.kl-pricing .kl-card {
  display: flex;
  flex-direction: column;
  background: var(--kl-card);
  border: 0 !important;
  border-radius: 20px;
  box-shadow: none;
  padding: 44px 44px 38px;
  text-decoration: none;
  color: var(--kl-ink);
  transition: background 0.3s ease, transform 0.3s ease;
}

.kl-pricing .kl-card:hover {
  background: var(--kl-card-hover);
  transform: translateY(-3px);
}

.kl-pricing .kl-eyebrow {
  display: block;
  font-family: var(--kl-poly);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(30, 30, 30, 0.72);
}

.kl-pricing .kl-title {
  font-family: var(--kl-poly) !important;
  font-weight: 500 !important;
  font-synthesis: none;
  font-size: clamp(1.5rem, 1.7vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--kl-ink);
  margin: 0;
  padding: 20px 0 0;
  max-width: 18ch;
}

.kl-pricing .kl-body {
  display: block;
  max-width: 44ch;
  font-family: var(--kl-inter);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(30, 30, 30, 0.72);
  padding-top: 18px;
}

.kl-pricing .kl-foot {
  display: block;
  margin-top: auto;
  padding-top: 36px;
}

.kl-pricing .kl-pricerow {
  display: block;
  padding-top: 22px;
  border-top: 1px solid rgba(var(--kl-warm), 0.18);
}

.kl-pricing .kl-price {
  font-family: var(--kl-poly);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: -0.015em;
  color: var(--kl-ink);
}

.klingit-homepage-price-context .kl-price.wp-block-kg-price-tag,
.klingit-homepage-price-context .kl-inline-price.wp-block-kg-price-tag {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.2rem;
  line-height: inherit;
}

.klingit-homepage-price-context .kl-price.wp-block-kg-price-tag .prefix,
.klingit-homepage-price-context .kl-price.wp-block-kg-price-tag .price-value,
.klingit-homepage-price-context .kl-price.wp-block-kg-price-tag .suffix,
.klingit-homepage-price-context .kl-price.wp-block-kg-price-tag .currency-label,
.klingit-homepage-price-context .kl-inline-price.wp-block-kg-price-tag .prefix,
.klingit-homepage-price-context .kl-inline-price.wp-block-kg-price-tag .price-value,
.klingit-homepage-price-context .kl-inline-price.wp-block-kg-price-tag .suffix,
.klingit-homepage-price-context .kl-inline-price.wp-block-kg-price-tag .currency-label {
  font: inherit;
  line-height: inherit;
  transform: none;
}

.klingit-homepage-price-context .kl-inline-price.wp-block-kg-price-tag {
  font: inherit;
  color: inherit;
  vertical-align: baseline;
}

.kl-pricing .kl-unit {
  font-family: var(--kl-inter);
  font-weight: 400;
  font-size: 0.9375rem;
  color: rgba(30, 30, 30, 0.72);
}

.kl-pricing .kl-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding-bottom: 3px;
  font-family: var(--kl-inter);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--kl-ink);
  border-bottom: 1px solid rgba(var(--kl-warm), 0.35);
  transition: border-color 0.3s ease;
}

.kl-pricing .kl-card:hover .kl-link {
  border-bottom-color: var(--kl-ink);
}

.kl-pricing .kl-arrow {
  font-size: 0.875rem;
  transition: transform 0.3s ease;
}

.kl-pricing .kl-card:hover .kl-arrow {
  transform: translateX(5px);
}

.kl-pricing .kl-card:focus-visible {
  outline: 2px solid var(--kl-ink);
  outline-offset: 4px;
}


@media (max-width: 781px) {
  .kl-pricing {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .kl-pricing.kl-pricing--single {
    grid-template-columns: minmax(0, 1fr);
  }
  .kl-pricing .kl-card {
    padding: 32px 26px 30px;
  }
  .kl-pricing .kl-title {
    font-size: 1.4375rem;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kl-pricing .kl-card,
  .kl-pricing .kl-arrow,
  .kl-pricing .kl-link { transition: none; }
  .kl-pricing .kl-card:hover { transform: none; }
}

/* ==================== Shared accessibility and interaction polish ==================== */
html.klingit-modal-open {
  overflow: hidden;
}

.ks-wrap:focus-within .ks-track {
  animation-play-state: paused;
}

.portfolio-item a:focus-visible {
  outline: 3px solid var(--wp--preset--color--dark, #212427);
  outline-offset: 3px;
}

.portfolio-item a:focus-visible .hover-image,
.portfolio-item a:focus-visible .portfolio-overlay {
  opacity: 1;
}

@media (hover: none) {
  .portfolio-overlay {
    opacity: 1;
  }
}

/* ==================== 2026 code-owned navigation ==================== */
.klingit-refresh-menu .klingit-refresh-submenu__eyebrow {
  margin: 0 0 1.25rem;
  color: color-mix(in srgb, currentColor 58%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Service/Our Work cards. The submenu styles in the header block already supply
   the card hover treatment and the intro min-height; these rules only make the
   cards fill their grid cell so a two-line title cannot leave neighbours short. */
.klingit-refresh-menu .klingit-refresh-nav-grid .wp-block-klingit-basic-column {
  min-width: 0;
}

.klingit-refresh-menu .klingit-refresh-nav-grid .wp-block-klingit-basic-block-link {
  display: flex;
  flex: 1;
  box-sizing: border-box;
}

.klingit-refresh-menu .klingit-refresh-nav-grid .wp-block-klingit-basic-block-link > .wp-block-group {
  width: 100%;
  align-items: flex-start;
}

/* Keep the arrow pinned to the top-right corner as titles wrap. */
.klingit-refresh-menu .klingit-refresh-nav-grid .wp-block-image {
  margin: 0;
  flex: 0 0 auto;
}

.klingit-refresh-menu .klingit-refresh-submenu__grid {
  gap: clamp(1rem, 2.5vw, 2.5rem);
  margin: 0;
}

.klingit-refresh-menu .klingit-refresh-submenu__grid--compact {
  max-width: 34rem;
}

.klingit-refresh-menu .klingit-refresh-submenu__grid .wp-block-heading {
  margin: 0;
  font-size: clamp(1.15rem, 1.75vw, 1.5rem);
  line-height: 1.2;
}

.klingit-refresh-menu .klingit-refresh-submenu__grid a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.2em;
}

.klingit-refresh-menu .klingit-refresh-submenu__grid a:hover,
.klingit-refresh-menu .klingit-refresh-submenu__grid a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 781px) {
  .klingit-refresh-menu .klingit-refresh-submenu__grid {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* ==================== Pricing pages ==================== */
.klingit-refresh-2026--pricing {
  background: #faf7f1;
  scroll-padding-bottom: calc(8.5rem + env(safe-area-inset-bottom));
}

.klingit-pricing-page {
  --kp-bg: #faf7f1;
  --kp-card: #ffffff;
  --kp-ink: #1f2430;
  --kp-copy: #6b6558;
  --kp-border: #e6dccb;
  --kp-orange: #ff6d42;
  /* Figma "02 Pricing — Production" (540:968): eyebrow text and note border are #FF6D42. */
  --kp-orange-text: #ff6d42;
  --kp-orange-soft: #ffdfd6;
  --kp-green: #b5ceb5;
  --kp-blue: #a5c7f9;
  --kp-muted: #f0e9db;
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: calc(8.5rem + env(safe-area-inset-bottom));
  background: var(--kp-bg);
  color: var(--kp-ink);
}

.klingit-pricing-page *,
.klingit-pricing-page *::before,
.klingit-pricing-page *::after {
  box-sizing: border-box;
}

.klingit-pricing-page .kp-shell {
  width: min(calc(100% - 2rem), 68.25rem);
  margin-inline: auto;
  padding-block: clamp(4rem, 7vw, 5.5rem) 4rem;
}

.klingit-pricing-page .kp-section {
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
}

/* Core's flow layout puts `margin-block-start: 24px` on every group child after
   the first. Inside a horizontal (row/grid) container that is always wrong: it
   drops the second and later items ~24px below their siblings. Every container
   listed here spaces its children itself — with `gap`, with its own padding, or
   with a border — so the flow margin is reset.
   Column layouts (.kp-hero, .kp-card__body) are deliberately left alone — they
   still rely on the flow rhythm.
   .kp-card: head and body are separated by the head's rule plus the body's own
   padding (Figma: ~20px under the rule). The flow margin doubled that gap.
   .kp-guide: rows are separated by a 1px border and sized by their own padding
   (Figma "Guide item": 12px/18px/12px in a 71px band). The flow margin pushed
   each border 24px above its row, so the statement sat high in the band instead
   of centred in it. */
.klingit-pricing-page .kp-hero__actions > *,
.klingit-pricing-page .kp-proof > *,
.klingit-pricing-page .kp-market > *,
.klingit-pricing-page .kp-grid > *,
.klingit-pricing-page .kp-card__footer > *,
.klingit-pricing-page .kp-callout > *,
.klingit-pricing-page .kp-tags > *,
.klingit-pricing-page .kp-card > *,
.klingit-pricing-page .kp-guide > *,
.klingit-pricing-page .kp-guide__item > *,
.klingit-pricing-page .kp-sticky-cta > *,
.klingit-pricing-page .kp-commitment-tabs > [role="tablist"] > * {
  margin-block-start: 0;
  margin-top: 0;
}

.klingit-pricing-page .kp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 68.25rem;
  margin-inline: auto;
  text-align: center;
}

.klingit-pricing-page .kp-eyebrow {
  margin: 0 0 1rem;
  color: var(--kp-orange-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.klingit-pricing-page .kp-hero h1 {
  max-width: 66rem;
  margin: 0;
  font-family: var(--wp--preset--font-family--heading, "PolySans", sans-serif);
  font-size: clamp(2.25rem, 4.25vw, 3.75rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

.klingit-pricing-page .kp-hero__intro {
  max-width: 52rem;
  margin: 1.25rem auto 0;
  color: var(--kp-copy);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.klingit-pricing-page .kp-hero__actions,
.klingit-pricing-page .kp-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
}

.klingit-pricing-page .kp-hero__actions {
  margin-top: 1.5rem;
}

.klingit-pricing-page .kp-proof {
  margin-top: 1.5rem;
}

.klingit-pricing-page .kp-chip,
.klingit-pricing-page .kp-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.875rem;
  margin: 0;
  padding: 0.35rem 0.8rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.1;
}

.klingit-pricing-page .kp-market {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  color: var(--kp-copy);
  font-size: 0.78rem;
}

.klingit-pricing-page .kp-market .wp-block-kg-currency-switcher {
  position: relative;
  margin: 0;
}

/* kg-core draws the switcher chevron as a ::before with `order: 999`, i.e. a flex
   item after the select. With the select styled as a pill, that put the chevron
   outside the pill, and clicking it did nothing because it is not part of the
   select. Take it out of the flex flow, place it over the select's right padding,
   and let clicks through to the select underneath. */
.klingit-pricing-page .kp-market .wp-block-kg-currency-switcher::before {
  position: absolute;
  top: 50%;
  right: 0.85rem;
  translate: 0 -50%;
  pointer-events: none;
}

.klingit-pricing-page .kp-market select {
  min-height: 2.25rem;
  padding: 0.45rem 2.25rem 0.45rem 0.9rem;
  border: 1px solid var(--kp-border);
  border-radius: 999px;
  background-color: var(--kp-card);
  color: var(--kp-ink);
  font: inherit;
}

.klingit-pricing-page .kp-anchor {
  display: block;
  scroll-margin-top: 6rem;
}

.klingit-pricing-page .kp-heading {
  margin-bottom: 1.5rem;
  text-align: center;
}

.klingit-pricing-page .kp-heading h2,
.klingit-pricing-page .kp-heading h3 {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading, "PolySans", sans-serif);
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.klingit-pricing-page .kp-heading p {
  max-width: 52rem;
  margin: 0.75rem auto 0;
  color: var(--kp-copy);
  line-height: 1.5;
}

.klingit-pricing-page .kp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
}

.klingit-pricing-page .kp-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.klingit-pricing-page .kp-grid--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Figma "01 Pricing — Overview": the four offering titles are set in caps. */
.klingit-pricing-page .kp-grid--four .kp-card__head h3 {
  text-transform: uppercase;
}

/* Client request (19 Aug): the four offering cards are left aligned throughout —
   kicker, title, price and the CTA pair. This is a deliberate deviation from Figma
   "01 Pricing — Overview", which centres the head. Nothing gains padding: every
   part inherits the card's own inline padding, so every row lines up. */
.klingit-pricing-page .kp-grid--four .kp-card__head {
  text-align: left;
}

/* Figma "How we price": plain cards — no head rule, left aligned, smaller title. */
.klingit-pricing-page .kp-grid--plain .kp-card__head {
  min-height: 0;
  padding-bottom: 0;
  border-bottom: 0;
  text-align: left;
}

.klingit-pricing-page .kp-grid--plain .kp-card__head h3 {
  font-family: inherit;
  font-size: 0.99rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}

.klingit-pricing-page .kp-grid--plain .kp-card__body {
  padding-top: 0.35rem;
}

.klingit-pricing-page .kp-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--kp-border);
  border-radius: 0.75rem;
  background: var(--kp-card);
}

/* Figma: every pricing card uses the same #E6DCCB border. The recommended tier
   is signalled by its orange button only, never by the card border. */

.klingit-pricing-page .kp-card__head {
  min-height: 6rem;
  padding: 1.4rem 1.6rem 1.15rem;
  border-bottom: 1px solid color-mix(in srgb, var(--kp-ink) 35%, transparent);
  text-align: center;
}

.klingit-pricing-page .kp-card__head h2,
.klingit-pricing-page .kp-card__head h3 {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading, "PolySans", sans-serif);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.klingit-pricing-page .kp-card__kicker {
  margin: 0 0 0.45rem;
  color: var(--kp-orange-text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Figma: the price sits in the card head, directly under the tier title. */
.klingit-pricing-page .kp-card__head .kp-card__price {
  margin: 0.4rem 0 0;
  color: var(--kp-ink);
  font-size: 0.75rem;
  font-weight: 600;
}

.klingit-pricing-page .kp-card__head .kp-card__price .suffix,
.klingit-pricing-page .kp-card__head .kp-card__price .prefix {
  font-weight: 400;
}

.klingit-pricing-page .kp-card__head .kp-card__price .suffix {
  margin-left: -0.2rem;
}

.klingit-pricing-page .kp-card__summary {
  margin: 0.35rem 0 0;
  color: var(--kp-copy);
  font-size: 0.8rem;
  line-height: 1.25;
}

.klingit-pricing-page .kp-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.4rem 1.6rem 1.25rem;
  color: var(--kp-copy);
  font-size: 0.84rem;
  line-height: 1.42;
}

.klingit-pricing-page .kp-card__body > :first-child {
  margin-top: 0;
}

.klingit-pricing-page .kp-card__body > :last-child {
  margin-bottom: 0;
}

/* Figma "Proposal after a call" pill: #FFDFD6 fill, #FF6D42 text, 11px/500.
   Figma "01 Pricing — Overview" (Frame 110, itemSpacing) puts 15.5px between the
   copy above the pill and the pill, and ~13px below it. When the pill is the
   first thing in the body — the marketing tiers — the `:first-child` rule below
   drops the top margin again, which is what Figma "03 Pricing — Marketing"
   shows. */
.klingit-pricing-page .kp-card__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0.95rem 0 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--kp-orange-soft);
  color: var(--kp-orange);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
}

.klingit-pricing-page .kp-card__lead-note {
  margin: 0 0 0.6rem;
  color: var(--kp-copy);
  font-size: 0.78rem;
  line-height: 1.4;
}

.klingit-pricing-page .kp-card__bullets-label {
  margin: 0 0 0.35rem;
  color: var(--kp-ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.klingit-pricing-page .kp-card__bullets-label + ul {
  margin-top: 0;
}

.klingit-pricing-page .kp-card__body ul {
  margin: 0.75rem 0 1rem;
  padding-left: 1.15rem;
}

.klingit-pricing-page .kp-card__body li + li {
  margin-top: 0.45rem;
}

/* Client request (19 Aug): card CTAs are left aligned across the pricing pages,
   lining up with the copy above them rather than hanging off the right edge. */
.klingit-pricing-page .kp-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1rem;
}

.klingit-pricing-page .kp-price-text {
  margin: 0;
  color: var(--kp-ink);
  font-size: 0.9rem;
  font-weight: 600;
}

.klingit-pricing-page .kp-inline-price.wp-block-kg-price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  font: inherit;
  color: inherit;
  vertical-align: baseline;
}

.klingit-pricing-page .kp-inline-price.wp-block-kg-price-tag > span {
  font: inherit;
  line-height: inherit;
  transform: none;
}

/* kg-core sizes a leading currency symbol at 2.4375rem; inline prices sit in
   running copy and must stay at the surrounding text size. */
.klingit-pricing-page .kp-inline-price.wp-block-kg-price-tag > span.currency-label,
.klingit-pricing-page .kp-inline-price.wp-block-kg-price-tag > span.currency-label[style*="order: -1"] {
  font: inherit;
  line-height: inherit;
  transform: none;
}

.klingit-pricing-page .kp-price,
.klingit-pricing-page .kp-price .wp-block-kg-price-tag {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem;
  color: var(--kp-ink);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
}

.klingit-pricing-page .kp-price .price-value,
.klingit-pricing-page .kp-price .currency-label,
.klingit-pricing-page .kp-price .prefix,
.klingit-pricing-page .kp-price .suffix {
  font: inherit;
  line-height: inherit;
  transform: none;
}

.klingit-pricing-page .kp-price .currency-label[style*="order: -1"] {
  font: inherit;
  line-height: inherit;
}

.klingit-pricing-page .wp-block-button__link,
.klingit-pricing-page .kp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  padding: 0.65rem 1.15rem;
  border: 1px solid var(--kp-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--kp-ink);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.klingit-pricing-page .kp-button--primary,
.klingit-pricing-page .is-style-kp-primary .wp-block-button__link {
  border-color: var(--kp-orange);
  background: var(--kp-orange);
  color: var(--kp-ink);
}

.klingit-pricing-page .kp-button--soft,
.klingit-pricing-page .is-style-kp-soft .wp-block-button__link {
  border-color: var(--kp-green);
  background: var(--kp-green);
}

/* Figma node 91-2157: the "Book a call" action inside the overview cards is a
   filled dark pill next to the outlined "See …" link. */
.klingit-pricing-page .kp-button--ink,
.klingit-pricing-page .is-style-kp-ink .wp-block-button__link {
  border-color: var(--kp-ink);
  background: var(--kp-ink);
  color: #ffffff;
}

.klingit-pricing-page .wp-block-button__link:hover,
.klingit-pricing-page .kp-button:hover {
  filter: brightness(0.96);
  text-decoration: none;
}

.klingit-pricing-page .wp-block-button__link:focus-visible,
.klingit-pricing-page .kp-button:focus-visible,
.klingit-pricing-page select:focus-visible,
.klingit-pricing-page [role="tab"]:focus-visible {
  outline: 3px solid var(--kp-blue);
  outline-offset: 3px;
}

.klingit-pricing-page .kp-note {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--kp-orange);
  border-radius: 0.75rem;
  color: var(--kp-copy);
  font-size: 0.82rem;
  line-height: 1.45;
}

.klingit-pricing-page .kp-note--muted {
  border-color: var(--kp-border);
  border-style: dashed;
  background: var(--kp-card);
}

.klingit-pricing-page .kp-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--kp-border);
  border-radius: 0.75rem;
  background: var(--kp-card);
}

.klingit-pricing-page .kp-callout__copy {
  flex: 1 1 20rem;
}

.klingit-pricing-page .kp-callout__copy h3 {
  margin: 0;
  color: var(--kp-ink);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.3;
}

.klingit-pricing-page .kp-callout__copy p {
  margin: 0.25rem 0 0;
  color: var(--kp-copy);
  font-size: 0.82rem;
  line-height: 1.45;
}

.klingit-pricing-page .kp-callout--dashed {
  border-style: dashed;
}

.klingit-pricing-page .kp-callout .kp-callout__price {
  font-size: 1.25rem;
  font-weight: 800;
}

.klingit-pricing-page .kp-callout .kp-callout__price .suffix {
  font-size: 0.82rem;
  font-weight: 400;
}

.klingit-pricing-page .kp-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.klingit-pricing-page .kp-steps {
  counter-reset: kp-step;
}

.klingit-pricing-page .kp-step {
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--kp-border);
  border-radius: 0.75rem;
  background: var(--kp-card);
}

.klingit-pricing-page .kp-step::before {
  counter-increment: kp-step;
  content: counter(kp-step);
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  margin-bottom: 0.75rem;
  place-items: center;
  border-radius: 50%;
  background: var(--kp-blue);
  color: var(--kp-ink);
  font-weight: 700;
}

.klingit-pricing-page .kp-step h3 {
  margin: 0;
  font-size: 1rem;
}

.klingit-pricing-page .kp-step p {
  margin: 0.35rem 0 0;
  color: var(--kp-copy);
  font-size: 0.82rem;
  line-height: 1.35;
}

.klingit-pricing-page .kp-guide {
  overflow: hidden;
  border: 1px solid var(--kp-border);
  border-radius: 0.75rem;
  background: var(--kp-card);
}

.klingit-pricing-page .kp-guide__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.4rem;
  padding: 1rem 1.4rem;
  color: var(--kp-ink);
  font-weight: 600;
  text-decoration: none;
}

.klingit-pricing-page .kp-guide__item + .kp-guide__item {
  border-top: 1px solid color-mix(in srgb, var(--kp-ink) 22%, transparent);
}

.klingit-pricing-page .kp-guide__item span:last-child {
  color: var(--kp-orange-text);
  white-space: nowrap;
}

.klingit-pricing-page .kp-faq {
  margin-top: 1.5rem;
}

.klingit-pricing-page .kp-faq__item {
  padding-block: 1rem;
  border-bottom: 1px solid var(--kp-border);
}

.klingit-pricing-page .kp-faq__item h3 {
  margin: 0;
  font-size: 0.92rem;
}

.klingit-pricing-page .kp-faq__item p {
  margin: 0.35rem 0 0;
  color: var(--kp-copy);
  font-size: 0.84rem;
  line-height: 1.45;
}

/* Override the general tab block's carousel treatment for compact commitment tabs. */
.klingit-pricing-page .kp-commitment-tabs .wp-block-kg-tab-panel-headers {
  display: none !important;
}

.klingit-pricing-page .kp-commitment-tabs > [role="tablist"] {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto 2rem !important;
  padding: 0.2rem !important;
  overflow-x: auto;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 75%, transparent);
  list-style: none;
}

.klingit-pricing-page .kp-commitment-tabs > [role="tablist"] [role="tab"] {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 4rem;
  padding: 0.55rem 0.9rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--kp-ink);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.klingit-pricing-page .kp-commitment-tabs > [role="tablist"] [role="tab"].is-active {
  background: var(--kp-blue) !important;
}

.klingit-pricing-page .kp-commitment-tabs > .wp-block-kg-tab-panels {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

.klingit-pricing-page .kp-commitment-tabs > .wp-block-kg-tab-panels > .wp-block-kg-tab-panel {
  display: none;
  width: 100% !important;
  block-size: auto !important;
}

.klingit-pricing-page .kp-commitment-tabs > .wp-block-kg-tab-panels > .wp-block-kg-tab-panel.is-active {
  display: block;
}

.klingit-pricing-page .kp-sticky-cta {
  position: relative;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(calc(100% - 2rem), 67.5rem);
  min-height: 6.5rem;
  margin: 0 auto 1rem;
  padding: 1.25rem 2rem;
  border-radius: 0.75rem;
  background: var(--kp-ink);
  color: #fff;
  box-shadow: 0 0.75rem 2.5rem rgba(31, 36, 48, 0.2);
}

.klingit-pricing-sticky-ready .klingit-pricing-page .kp-sticky-cta {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 50%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(100% + 2rem));
  transition: opacity 180ms ease, transform 180ms ease;
}

.klingit-pricing-sticky-ready .klingit-pricing-page .kp-sticky-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.klingit-pricing-page .kp-sticky-cta h2,
.klingit-pricing-page .kp-sticky-cta p {
  margin: 0;
}

.klingit-pricing-page .kp-sticky-cta h2 {
  color: inherit;
  font-size: 1.15rem;
}

.klingit-pricing-page .kp-sticky-cta p {
  margin-top: 0.3rem;
  color: #c7c9d6;
  font-size: 0.82rem;
}

.klingit-pricing-page .kp-sticky-cta .wp-block-button__link {
  border-color: var(--kp-green);
  background: var(--kp-green);
  color: var(--kp-ink);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .klingit-pricing-page .kp-grid,
  .klingit-pricing-page .kp-grid--two,
  .klingit-pricing-page .kp-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .klingit-pricing-page .kp-grid--three-mobile-stack {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .klingit-pricing-page {
    padding-bottom: calc(9.5rem + env(safe-area-inset-bottom));
  }

  .klingit-pricing-page .kp-shell {
    width: min(calc(100% - 1.25rem), 68.25rem);
    padding-top: 3.5rem;
  }

  .klingit-pricing-page .kp-section {
    margin-top: 3.5rem;
  }

  .klingit-pricing-page .kp-hero h1 {
    font-size: clamp(2.15rem, 11vw, 3rem);
  }

  .klingit-pricing-page .kp-grid,
  .klingit-pricing-page .kp-grid--two,
  .klingit-pricing-page .kp-grid--four {
    grid-template-columns: 1fr;
  }

  .klingit-pricing-page .kp-card__head,
  .klingit-pricing-page .kp-card__body {
    padding-inline: 1.15rem;
  }

  .klingit-pricing-page .kp-market {
    flex-direction: column;
  }

  .klingit-pricing-page .kp-sticky-cta {
    align-items: stretch;
    gap: 0.8rem;
    min-height: 0;
    padding: 1rem;
  }

  .klingit-pricing-page .kp-sticky-cta p {
    display: none;
  }

  .klingit-pricing-page .kp-sticky-cta .wp-block-buttons,
  .klingit-pricing-page .kp-sticky-cta .wp-block-button,
  .klingit-pricing-page .kp-sticky-cta .wp-block-button__link {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .klingit-pricing-sticky-ready .klingit-pricing-page .kp-sticky-cta {
    transition: none;
  }
}

@media print {
  .klingit-pricing-page {
    padding-bottom: 0;
  }

  .klingit-pricing-page .kp-sticky-cta,
  .klingit-pricing-sticky-ready .klingit-pricing-page .kp-sticky-cta {
    position: static;
    width: auto;
    margin: 2rem 0 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

/* ==================== Offering-page pricing preview ==================== */
/*
 * The offering pages show a preview of the tiers on their pricing page (round 6).
 * It reuses the .kp-* card styles, which are all written against the
 * .klingit-pricing-page scope, so the section carries that class too. These rules
 * undo the parts of that scope that assume it owns the whole page, and dial the
 * cards down so the section reads as part of the offering page rather than as the
 * pricing page pasted in.
 */
.klingit-offering-pricing.klingit-pricing-page {
  min-height: 0;
  padding-bottom: var(--wp--preset--spacing--xxx-large);
  background: transparent;
}

.klingit-pricing-page .kp-preview {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

.klingit-pricing-page .kp-preview > * {
  margin-block-start: 0;
  margin-top: 0;
}

/* Tighter than the pricing page: this is a summary inside a longer page. */
.klingit-pricing-page .kp-grid--preview .kp-card {
  border-radius: 14px;
}

.klingit-pricing-page .kp-grid--preview .kp-card__head,
.klingit-pricing-page .kp-grid--preview .kp-card__body {
  padding: 1.25rem 1.25rem 1.375rem;
}

.klingit-pricing-page .kp-grid--preview .kp-card h3 {
  font-size: 1.125rem;
}

.klingit-pricing-page .kp-grid--preview .kp-card__summary,
.klingit-pricing-page .kp-grid--preview .kp-card__body p,
.klingit-pricing-page .kp-grid--preview .kp-card li {
  font-size: 0.8125rem;
}

.klingit-pricing-page .kp-grid--preview .kp-card__bullets-label {
  font-size: 0.625rem;
}

/* The one CTA that replaces the three per-card buttons. */
.klingit-pricing-page .kp-preview__cta {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
}

.klingit-pricing-page .kp-preview__cta a {
  color: var(--kp-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(64, 44, 20, 0.35);
  padding-bottom: 3px;
  transition: border-color 0.3s ease;
}

.klingit-pricing-page .kp-preview__cta a:hover,
.klingit-pricing-page .kp-preview__cta a:focus-visible {
  border-bottom-color: var(--kp-ink);
}

@media (max-width: 781px) {
  .klingit-pricing-page .kp-grid--preview .kp-card__head,
  .klingit-pricing-page .kp-grid--preview .kp-card__body {
    padding: 1.25rem;
  }

  /* The head's min-height exists to align three heads across a row. Once the
     cards stack it only adds dead space under the price. */
  .klingit-pricing-page .kp-grid--preview .kp-card__head {
    min-height: 0;
  }
}