/* MARK-FLUID: font sizes are fluid, authored size up to 900px wide growing to 1.14x at 1920px. Source sizes live in git history. */
/* Flex vs Conventional explainer (js/kf-compare.js). Shared by the Flex Space Portal and the Office Space Calculator.
   Colours are literal so the file does not depend on either site's tokens. Flex is brand red; conventional is ink.

   Swiss layout: one gutter (--kfc-pad) for the head, the column headings, every row and the foot, so everything
   shares the same left and right edge. A heavy ink rule on top, hairlines between rows, square boxes, bold Helvetica
   for the figures, no shadows and no gradients. */

html.kfc-lock{overflow:hidden;}
.kfc{--kfc-pad:32px;--kfc-ease:cubic-bezier(0.2,0,0,1);position:fixed;inset:0;z-index:10000;display:flex;justify-content:center;align-items:center;padding:16px;font-family:"Suisse Int'l","Helvetica Neue",Helvetica,Arial,sans-serif;}
.kfc[hidden]{display:none;}
.kfc-backdrop{position:absolute;inset:0;background:rgba(20,18,16,0.55);opacity:0;transition:opacity 200ms var(--kfc-ease);}
.kfc.is-open .kfc-backdrop{opacity:1;}

.kfc-panel{
  position:relative;display:flex;flex-direction:column;width:min(920px,100%);max-height:100%;overflow:hidden;
  background:#fff;color:#1A1A1A;border:1px solid #1A1A1A;border-top:3px solid #1A1A1A;border-radius:0;outline:none;
  opacity:0;transform:translateY(12px);transition:opacity 200ms var(--kfc-ease),transform 260ms var(--kfc-ease);
}
.kfc.is-open .kfc-panel{opacity:1;transform:none;}

/* Close: the same square ink box as every other close button on the site. */
.kfc-close{
  position:absolute;top:16px;right:var(--kfc-pad);z-index:3;display:grid;place-items:center;box-sizing:border-box;width:40px;height:40px;padding:0;
  border:1px solid #1A1A1A;border-radius:0;background-color:#fff;color:#1A1A1A;font-size:0;line-height:0;cursor:pointer;
  background-image:linear-gradient(#1A1A1A,#1A1A1A);background-repeat:no-repeat;background-position:50% 100%;background-size:100% 0;
  transition:color 200ms var(--kfc-ease),background-size 280ms var(--kfc-ease);
}
.kfc-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;transition:transform 340ms var(--kfc-ease);}
.kfc-close:hover,.kfc-close:focus-visible{color:#fff;background-size:100% 100%;}
.kfc-close:hover svg,.kfc-close:focus-visible svg{transform:rotate(90deg);}
.kfc-close:focus-visible{outline:1.8px solid #A6192E;outline-offset:2px;}

/* Head */
.kfc-head{flex:none;padding:24px calc(var(--kfc-pad) + 56px) 20px var(--kfc-pad);}
.kfc-eyebrow{margin:0 0 8px;font:500 10px/1 "Suisse Int'l","Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:0.14em;text-transform:uppercase;color:#A6192E;}
.kfc-head h2{margin:0;font-size:clamp(24px,3vw,32px);font-weight:500;line-height:1.1;letter-spacing:-0.03em;color:#1A1A1A;}
.kfc-lede{margin:8px 0 0;max-width:56ch;font-size:clamp(14px,calc(12.27px + 0.19vw),15.96px);line-height:1.45;color:#5E5D57;}

/* Column headings and rows share one grid: label | flex | conventional | side by side */
.kfc-colhead,.kfc-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,1.2fr) minmax(0,1.2fr) minmax(150px,1.1fr);column-gap:24px;align-items:center;padding-left:var(--kfc-pad);padding-right:var(--kfc-pad);}
.kfc-colhead{flex:none;margin:0;padding-top:10px;padding-bottom:10px;border-top:1px solid #1A1A1A;border-bottom:1px solid #DBD9D5;font:500 10px/1 "Suisse Int'l","Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:0.12em;text-transform:uppercase;color:#5E5D57;}
.kfc-colhead span:nth-child(2){color:#A6192E;}
.kfc-colhead span:nth-child(3){color:#1A1A1A;}
.kfc-rows{flex:1 1 auto;min-height:0;margin:0;padding:0;list-style:none;overflow-y:auto;overscroll-behavior:contain;}
.kfc-row{padding-top:14px;padding-bottom:14px;border-bottom:1px solid #DBD9D5;opacity:0;}
.kfc.is-open .kfc-row{animation:kfcRowIn 240ms var(--kfc-ease) forwards;animation-delay:calc(80ms + var(--i,0) * 30ms);}
@keyframes kfcRowIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.kfc-label{display:flex;align-items:center;gap:10px;min-width:0;}
.kfc-label svg{flex:none;color:#1A1A1A;}
.kfc-label h3{margin:0;font-size:clamp(14px,calc(12.27px + 0.19vw),15.96px);font-weight:500;line-height:1.25;letter-spacing:-0.01em;}
.kfc-num{flex:none;min-width:20px;font:500 10px/1 "Suisse Int'l","Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:0.06em;color:#8A8880;}

.kfc-cell{min-width:0;cursor:help;}
.kfc-side{display:none;margin-bottom:4px;font:500 10px/1 "Suisse Int'l","Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:0.12em;text-transform:uppercase;}
.kfc-cell--flex .kfc-side{color:#A6192E;}
.kfc-big{margin:0;font-size:clamp(22px,calc(19.28px + 0.3vw),25.08px);font-weight:500;line-height:1.1;letter-spacing:-0.03em;color:#1A1A1A;}
.kfc-big small{font-size:clamp(12px,calc(10.52px + 0.16vw),13.68px);font-weight:400;letter-spacing:0;color:#5E5D57;}
.kfc-cell--flex .kfc-big{color:#A6192E;}
.kfc-text{margin:4px 0 0;font-size:clamp(12px,calc(10.52px + 0.16vw),13.68px);line-height:1.35;color:#5E5D57;}
.kfc-term{border-bottom:1px dotted currentColor;cursor:help;}
.kfc-term:focus-visible{outline:1.8px solid #A6192E;outline-offset:2px;}

/* Pictures: square-ended bars on a hairline track, flex red over conventional ink */
.kfc-visual{min-width:0;}
.kfc-scale,.kfc-levels{display:grid;gap:6px;}
.kfc-track{position:relative;height:6px;background:#E6E4E0;overflow:hidden;}
.kfc-bar{position:absolute;top:0;bottom:0;left:var(--l);width:0;}
.kfc-bar--flex{background:#A6192E;}
.kfc-bar--conv{background:#1A1A1A;}
.kfc.is-open .kfc-bar{animation:kfcGrow 480ms var(--kfc-ease) forwards;animation-delay:calc(200ms + var(--i,0) * 30ms);}
@keyframes kfcGrow{to{width:var(--w);}}
.kfc-axis{display:flex;justify-content:space-between;font-size:clamp(10px,calc(8.76px + 0.14vw),11.4px);line-height:1;color:#8A8880;}
.kfc-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;}
.kfc-meter i{height:6px;background:#E6E4E0;}
.kfc-meter--flex i.on{background:#A6192E;}
.kfc-meter--conv i.on{background:#1A1A1A;}

/* Foot: one line, one action */
.kfc-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--kfc-pad) 20px;border-top:1px solid #1A1A1A;}
.kfc-cta{display:contents;}
.kfc-cta p{margin:0;font-size:clamp(14px,calc(12.27px + 0.19vw),15.96px);line-height:1.4;color:#1A1A1A;}
.kfc-cta-btn{flex:none;min-height:40px;padding:0 18px;border:1px solid #1A1A1A;border-radius:0;background:#1A1A1A;color:#fff;font:inherit;font-size:clamp(13px,calc(11.39px + 0.18vw),14.82px);font-weight:500;cursor:pointer;transition:background-color 150ms var(--kfc-ease),border-color 150ms var(--kfc-ease);}
.kfc-cta-btn:hover,.kfc-cta-btn:focus-visible{background:#A6192E;border-color:#A6192E;}
.kfc-cta-btn:focus-visible{outline:1.8px solid #A6192E;outline-offset:2px;}

/* Banner / footer button */
.kfc-hero-btn{display:inline-flex;align-items:center;gap:9px;margin-top:14.4px;min-height:36px;padding:0 14.4px 0 5.4px;border:1px solid rgba(255,255,255,0.5);border-radius:899.1px;background:rgba(255,255,255,0.08);color:#fff;font:inherit;font-size:clamp(12.6px,calc(11.04px + 0.17vw),14.36px);cursor:pointer;transition:background 150ms,color 150ms,border-color 150ms;}
.kfc-hero-btn:hover{background:#fff;color:#A6192E;border-color:#fff;}
.kfc-hero-btn:focus-visible{outline:1.8px solid #fff;outline-offset:2.7px;}
.kfc-hero-btn-mark{display:inline-flex;align-items:center;justify-content:center;width:25.2px;height:25.2px;border-radius:50%;background:#fff;color:#A6192E;font:500 9px/1 "Suisse Int'l","Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:0.04em;}
.kfc-hero-btn:hover .kfc-hero-btn-mark{background:#A6192E;color:#fff;}

/* Short windows: tighter rows, and the rows scroll under the fixed head and foot rather than the whole panel. */
@media (max-height:720px){
  .kfc-head{padding-top:18px;padding-bottom:12px;}
  .kfc-lede{display:none;}
  .kfc-row{padding-top:9px;padding-bottom:9px;}
  .kfc-text{display:none;}
  .kfc-foot{padding-top:12px;padding-bottom:14px;}
}

/* Narrower windows: drop the pictures first, then stack each row as label over flex | conventional. */
@media (max-width:860px){
  .kfc-colhead,.kfc-row{grid-template-columns:minmax(120px,0.9fr) minmax(0,1fr) minmax(0,1fr);}
  .kfc-colhead span:nth-child(4),.kfc-visual{display:none;}
}
@media (max-width:640px){
  .kfc{--kfc-pad:16px;padding:0;align-items:stretch;}
  .kfc-panel{width:100%;border-left:0;border-right:0;border-bottom:0;}
  .kfc-close{top:12px;}
  .kfc-head{padding:16px calc(var(--kfc-pad) + 52px) 14px var(--kfc-pad);}
  .kfc-lede{display:none;}
  .kfc-colhead{display:none;}
  .kfc-row{grid-template-columns:1fr 1fr;row-gap:8px;padding-top:12px;padding-bottom:12px;}
  .kfc-label{grid-column:1 / -1;}
  .kfc-side{display:block;}
  .kfc-big{font-size:clamp(19px,calc(16.65px + 0.26vw),21.66px);}
  .kfc-text{display:none;}
  .kfc-foot{flex-direction:column;align-items:stretch;gap:10px;}
  .kfc-cta-btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .kfc-backdrop,.kfc-panel,.kfc-close,.kfc-close svg{transition:none;}
  .kfc-row,.kfc.is-open .kfc-row{animation:none;opacity:1;transform:none;}
  .kfc.is-open .kfc-bar{animation:none;width:var(--w);}
}