/* ============================================================
   FOLKSOFT — Compliance cost calculator (shared component)
   Pairs with /assets/js/cost-calculator.js

   Design tokens are read from the host page (:root in each
   standalone page's <style>), with fallbacks so the widget also
   renders correctly when embedded somewhere that lacks them.
============================================================ */

.fsc{
  --fsc-blue:      var(--blue, #1565E0);
  --fsc-blue-700:  var(--blue-700, #0E4FB8);
  --fsc-cyan:      var(--cyan, #06B6D4);
  --fsc-grad:      var(--grad, linear-gradient(120deg,#1565E0 0%,#1E8FDE 55%,#06B6D4 100%));
  --fsc-ink:       var(--ink, #0A1A33);
  --fsc-ink-2:     var(--ink-2, #243453);
  --fsc-body:      var(--body, #51607C);
  --fsc-muted:     var(--muted, #94A1BC);
  --fsc-line:      var(--line, #E4EAF3);
  --fsc-line-2:    var(--line-2, #EEF2F9);
  --fsc-surface:   var(--surface, #FFFFFF);
  --fsc-tint:      var(--bg-tint, #F2F7FE);
  --fsc-blue-tint: var(--blue-tint, #E6F0FE);
  --fsc-blue-edge: var(--blue-edge, #CFE0FB);
  --fsc-abyss:     var(--abyss, #0A1730);
  --fsc-r:         var(--r, 18px);
  --fsc-r-lg:      var(--r-lg, 24px);
  --fsc-display:   var(--display, "Plus Jakarta Sans", system-ui, sans-serif);
  --fsc-sans:      var(--sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  --fsc-ease:      var(--ease, cubic-bezier(.21,.6,.35,1));

  font-family:var(--fsc-sans);
  color:var(--fsc-body);
  display:block;
  container-type:inline-size;
}
.fsc *,.fsc *::before,.fsc *::after{ box-sizing:border-box; }

/* ---------- Shell ---------- */
.fsc-shell{
  background:var(--fsc-surface);
  border:1px solid var(--fsc-line);
  border-radius:var(--fsc-r-lg);
  box-shadow:var(--shadow-lg, 0 44px 100px -34px rgba(10,28,80,.30));
  overflow:hidden;
}

/* ---------- Inputs ---------- */
.fsc-inputs{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:15px 30px;
  align-items:start;
  padding:18px 24px;
  background:var(--fsc-tint);
  border-bottom:1px solid var(--fsc-line);
}
.fsc-field{ min-width:0; }
.fsc-field-wide{ grid-column:1 / -1; }
.fsc-label{
  display:block;
  font-family:var(--fsc-display);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--fsc-body);
  margin-bottom:8px;
}
.fsc-hint{ font-size:12.5px; color:var(--fsc-body); margin-top:6px; }

/* Segmented control — native radios, visually a pill switch.
   Every rule that sets text colour here is written as `.fsc .fsc-seg …`
   rather than `.fsc-seg …`. The site theme carries a global
   `input[type="radio"]:checked + label{ color:#563aff }` (_custom.scss)
   which has the same specificity as a single-class selector and loads
   after this file, so the shorter form loses and the selected pill
   renders purple-on-blue. The extra class wins regardless of order. */
.fsc-seg{
  display:inline-flex;
  padding:4px;
  gap:4px;
  background:var(--fsc-surface);
  border:1px solid var(--fsc-line);
  border-radius:999px;
  box-shadow:var(--shadow-sm, 0 2px 8px rgba(10,26,51,.05));
}
.fsc-seg input{ position:absolute; opacity:0; width:0; height:0; }
.fsc .fsc-seg label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--fsc-display);
  font-weight:600;
  font-size:14px;
  color:var(--fsc-ink-2);
  padding:8px 18px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .28s var(--fsc-ease), color .28s var(--fsc-ease), box-shadow .28s var(--fsc-ease);
}
.fsc .fsc-seg label:hover{ color:var(--fsc-ink); background:var(--fsc-blue-tint); }
.fsc .fsc-seg input:checked + label{
  color:#fff;
  font-weight:700;
  /* Deliberately NOT --fsc-grad: that gradient ends in cyan (#06B6D4),
     which puts white label text at 2.4:1. Blue-to-deep-blue keeps the
     brand read and clears AA (5.3:1 → 7.4:1 across the sweep). */
  background:linear-gradient(120deg, var(--fsc-blue) 0%, var(--fsc-blue-700) 100%);
  box-shadow:var(--shadow-glow, 0 18px 50px -14px rgba(21,101,224,.42));
}
.fsc .fsc-seg input:checked + label:hover{ color:#fff; }
.fsc-seg input:focus-visible + label{ outline:2px solid var(--fsc-blue); outline-offset:2px; }

/* Four-option groups (team size, stage, complexity) fill their column
   and share the width evenly rather than hugging their text. */
.fsc-seg.is-wide{ display:flex; width:100%; }
.fsc .fsc-seg.is-wide label{ flex:1 1 0; padding:8px 8px; font-size:13.5px; }

/* "Also need" chips.
   Sized to match the wide segmented controls directly above them —
   full row, equal columns, same 46px height. Hugging their own text left
   them looking like an afterthought next to two full-width rows of
   pills, which is not the weight a multi-framework choice deserves. */
.fsc-chips{ display:flex; flex-wrap:wrap; gap:10px; width:100%; }
.fsc-chips input{ position:absolute; opacity:0; width:0; height:0; }
.fsc .fsc-chips label{
  flex:1 1 0;
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:var(--fsc-display);
  font-weight:600;
  font-size:13.5px;
  color:var(--fsc-ink-2);
  background:var(--fsc-surface);
  border:1px solid var(--fsc-line);
  border-radius:999px;
  /* 12px matches the wide segment's total: its container contributes 4px
     top and bottom on top of the label's own 8px. Both carry a 1px
     border, so the two controls land on the same height. */
  padding:12px;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .25s, color .25s, background .25s, transform .25s var(--fsc-ease);
}
.fsc-chips label::before{
  content:"";
  width:15px; height:15px;
  flex:none;
  border-radius:5px;
  border:1.5px solid var(--fsc-blue-edge);
  background:var(--fsc-surface);
  transition:background .25s, border-color .25s;
}
.fsc-chips label:hover{ border-color:var(--fsc-blue-edge); color:var(--fsc-ink); transform:translateY(-1px); }
.fsc-chips input:checked + label{
  color:var(--fsc-blue-700);
  background:var(--fsc-blue-tint);
  border-color:var(--fsc-blue-edge);
}
.fsc-chips input:checked + label::before{
  background:var(--fsc-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color:var(--fsc-blue);
}
.fsc-chips input:focus-visible + label{ outline:2px solid var(--fsc-blue); outline-offset:2px; }

/* ---------- Results ---------- */
.fsc-results{ display:grid; grid-template-columns:1fr 1fr; }
.fsc-panel{ padding:22px 26px 22px; position:relative; min-width:0; }
.fsc-panel + .fsc-panel{ border-left:1px solid var(--fsc-line); }
/* A dark panel supplies its own edge on either side — a hairline rule
   butted against navy reads as a seam, not a divider. */
.fsc-panel-dark + .fsc-panel,
.fsc-panel + .fsc-panel-dark{ border-left:0; }

.fsc-panel-head{ display:flex; align-items:center; gap:11px; margin-bottom:6px; }
.fsc-panel-head h3{
  font-family:var(--fsc-display);
  font-weight:700;
  font-size:17px;
  line-height:1.3;
  color:var(--fsc-ink);
  margin:0;
}
.fsc-panel-sub{ font-size:13.5px; color:var(--fsc-body); margin:0 0 12px; }

/* Line items */
.fsc-lines{ list-style:none; margin:0; padding:0; }
.fsc-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:8px 0;
  border-bottom:1px dashed var(--fsc-line-2);
  font-size:14.5px;
}
.fsc-line-label{ color:var(--fsc-ink-2); min-width:0; }
.fsc-line-label small{ display:block; font-size:12px; color:var(--fsc-body); margin-top:2px; }
.fsc-line-val{
  font-family:var(--fsc-display);
  font-weight:700;
  font-size:14.5px;
  color:var(--fsc-ink);
  white-space:nowrap;
  text-align:right;
}
.fsc-line.is-free .fsc-line-val{ color:var(--fsc-blue); }
.fsc-line.is-addon .fsc-line-label{ color:var(--fsc-blue-700); }

/* Total */
.fsc-total{ margin-top:14px; padding-top:14px; border-top:2px solid var(--fsc-line); }
.fsc-total-label{
  font-family:var(--fsc-display);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--fsc-body);
  margin-bottom:6px;
}
.fsc-total-val{
  font-family:var(--fsc-display);
  font-weight:800;
  font-size:clamp(22px,3vw,28px);
  line-height:1.15;
  letter-spacing:-.03em;
  color:var(--fsc-ink);
}
.fsc-total-meta{ display:flex; align-items:center; gap:9px; margin-top:9px; font-size:13.5px; color:var(--fsc-body); }
.fsc-total-meta svg{ width:16px; height:16px; flex:none; color:var(--fsc-blue); }

/* Dark treatment — applied to whichever column should carry it. Kept
   separate from the structural panel classes so the visual weight can
   move between columns without touching the markup's meaning. */
.fsc-panel-dark{ background:var(--fsc-abyss); color:rgba(255,255,255,.72); }
.fsc-panel-dark .fsc-panel-head h3{ color:#fff; }
.fsc-panel-dark .fsc-panel-sub{ color:rgba(255,255,255,.72); }
.fsc-panel-dark .fsc-line{ border-bottom-color:rgba(255,255,255,.1); }
.fsc-panel-dark .fsc-line-label{ color:rgba(255,255,255,.72); }
.fsc-panel-dark .fsc-line-label small{ color:rgba(255,255,255,.66); }
.fsc-panel-dark .fsc-line-val{ color:#fff; }
.fsc-panel-dark .fsc-line.is-free .fsc-line-val{ color:#8FD3E6; }
.fsc-panel-dark .fsc-line.is-addon .fsc-line-label{ color:#A9CBFF; }
.fsc-panel-dark .fsc-total{ border-top-color:rgba(255,255,255,.2); }
.fsc-panel-dark .fsc-total-label{ color:rgba(255,255,255,.72); }
.fsc-panel-dark .fsc-total-val{ color:#fff; }
.fsc-panel-dark .fsc-total-meta{ color:rgba(255,255,255,.62); }
.fsc-panel-dark .fsc-total-meta svg{ color:#8FD3E6; }

.fsc-tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--fsc-display);
  font-weight:700;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 11px;
  border-radius:999px;
  white-space:nowrap;
  color:var(--fsc-blue-700);
  background:var(--fsc-blue-tint);
  border:1px solid var(--fsc-blue-edge);
}
.fsc-panel-dark .fsc-tag{ color:#A9CBFF; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); }

/* ---------- Lead panel ----------
   Was a blurred overlay hiding a price. There is no price behind it any
   more — it is a contact form that sits beside the market figures and
   swaps to a confirmation once submitted. Nothing here obscures the
   market column, so the figures stay readable (and indexable) whether
   or not the visitor fills anything in. */
.fsc-panel-lead{
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--fsc-tint);
}
/* Centred as a column: the icon, copy, fields, button and fine print all
   share one axis. `align-items:center` is what centres the icon and the
   width-capped paragraph; `text-align:center` handles the text inside
   each of them. */
.fsc-lead,
.fsc-thanks{ display:flex; flex-direction:column; align-items:center; text-align:center; }
/* Exactly one of the two is in the DOM flow at a time. */
.fsc-thanks{ display:none; }
.fsc-sent .fsc-lead{ display:none; }
.fsc-sent .fsc-thanks{ display:flex; }
.fsc-thanks:focus{ outline:none; }

.fsc-lead-icon,
.fsc-thanks-icon{
  width:40px; height:40px;
  border-radius:13px;
  display:grid; place-items:center;
  background:var(--fsc-grad);
  box-shadow:0 12px 28px -8px rgba(21,101,224,.6);
  margin-bottom:11px;
}
.fsc-lead-icon svg,
.fsc-thanks-icon svg{ width:22px; height:22px; color:#fff; }

.fsc-lead h4,
.fsc-thanks h4{
  font-family:var(--fsc-display);
  font-weight:700;
  font-size:18px;
  line-height:1.3;
  color:var(--fsc-ink);
  margin:0 0 6px;
}
.fsc-lead p,
.fsc-thanks p{ font-size:14px; color:var(--fsc-body); margin:0 0 14px; max-width:38ch; }
/* A centred column sizes its children to their content, so the form has
   to opt back into the full panel width or the inputs collapse to fit
   their placeholder text. */
.fsc-gate-form{ display:flex; flex-direction:column; gap:8px; width:100%; }
.fsc-gate-form input[type="email"],
.fsc-gate-form input[type="text"]{
  width:100%;
  font-family:var(--fsc-sans);
  font-size:15px;
  text-align:center;
  color:var(--fsc-ink);
  background:#fff;
  border:1.5px solid var(--fsc-line);
  border-radius:12px;
  padding:11px 15px;
  transition:border-color .25s, box-shadow .25s;
}
.fsc-gate-form input::placeholder{ color:var(--fsc-muted); }
.fsc-gate-form input:focus{ outline:none; border-color:var(--fsc-blue); box-shadow:0 0 0 4px rgba(21,101,224,.18); }
.fsc-gate-form button{
  font-family:var(--fsc-display);
  font-weight:600;
  font-size:15px;
  color:#fff;
  background:var(--fsc-grad);
  background-size:160% 160%;
  border:0;
  border-radius:12px;
  padding:12px 22px;
  cursor:pointer;
  box-shadow:var(--shadow-glow, 0 18px 50px -14px rgba(21,101,224,.42));
  transition:transform .3s var(--fsc-ease), background-position .4s var(--fsc-ease), opacity .25s;
}
.fsc-gate-form button:hover:not(:disabled){ transform:translateY(-2px); background-position:100% 50%; }
.fsc-gate-form button:disabled{ opacity:.6; cursor:not-allowed; }
/* Scoped to the two panels so it outranks `.fsc-lead p` — an unqualified
   `.fsc-gate-fine` loses to it on specificity and the fine print renders
   at body size with the wrong margins. */
.fsc-lead .fsc-gate-fine,
.fsc-thanks .fsc-gate-fine{
  font-size:12px;
  color:var(--fsc-body);
  max-width:40ch;
  margin:10px 0 0;
}
.fsc-gate-fine a{ color:var(--fsc-blue); font-weight:600; text-decoration:underline; }
.fsc-gate-err{
  font-size:13px;
  color:#B3261E;
  margin-top:-2px;
  min-height:0;
}
.fsc-gate-err:empty{ display:none; }

.fsc-disclaimer{
  font-size:12.5px;
  line-height:1.6;
  color:var(--fsc-body);
  margin:11px 2px 0;
}
.fsc-disclaimer a{ color:var(--fsc-blue); font-weight:600; }

/* ---------- Scroll-depth slide-in ---------- */
.fsc-slidein{
  position:fixed;
  z-index:60;
  right:24px;
  bottom:24px;
  width:min(360px, calc(100vw - 32px));
  padding:24px 26px 26px;
  font-family:var(--sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  background:var(--abyss, #0A1730);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg, 24px);
  box-shadow:0 40px 90px -30px rgba(4,14,38,.75);
  transform:translateY(calc(100% + 32px));
  opacity:0;
  transition:transform .5s var(--ease, cubic-bezier(.21,.6,.35,1)), opacity .4s ease;
}
.fsc-slidein.is-in{ transform:translateY(0); opacity:1; }
.fsc-slidein-x{
  position:absolute;
  top:12px; right:12px;
  width:30px; height:30px;
  display:grid; place-items:center;
  color:rgba(255,255,255,.5);
  background:transparent;
  border:0;
  border-radius:50%;
  cursor:pointer;
  transition:color .25s, background .25s;
}
.fsc-slidein-x:hover{ color:#fff; background:rgba(255,255,255,.1); }
.fsc-slidein-x svg{ width:15px; height:15px; }
.fsc-slidein-kicker{
  font-family:var(--display, "Plus Jakarta Sans", system-ui, sans-serif);
  font-weight:700;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#8FD3E6;
  margin-bottom:9px;
}
.fsc-slidein h4{
  font-family:var(--display, "Plus Jakarta Sans", system-ui, sans-serif);
  font-weight:700;
  font-size:19px;
  line-height:1.3;
  color:#fff;
  margin:0 0 9px;
  padding-right:24px;
}
.fsc-slidein p{ font-size:14px; line-height:1.6; color:rgba(255,255,255,.66); margin:0 0 18px; }
.fsc-slidein p strong{ color:#fff; font-weight:600; }
.fsc-slidein-cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--display, "Plus Jakarta Sans", system-ui, sans-serif);
  font-weight:600;
  font-size:14.5px;
  color:#fff;
  background:var(--grad, linear-gradient(120deg,#1565E0 0%,#1E8FDE 55%,#06B6D4 100%));
  border-radius:999px;
  padding:12px 22px;
  text-decoration:none;
  transition:transform .3s var(--ease, cubic-bezier(.21,.6,.35,1));
}
.fsc-slidein-cta:hover{ transform:translateY(-2px); }
.fsc-slidein-cta svg{ width:15px; height:15px; }

@media (max-width: 620px){
  .fsc-slidein{ right:16px; left:16px; bottom:16px; width:auto; padding:22px 20px 24px; }
}

/* ---------- No-JS ---------- */
.fsc-noscript{
  padding:28px 30px;
  font-size:15px;
  line-height:1.7;
  color:var(--fsc-body);
  background:var(--fsc-tint);
  border-radius:var(--fsc-r);
  border:1px solid var(--fsc-line);
}

/* ---------- Responsive ---------- */
@container (max-width: 900px){
  .fsc-inputs{ grid-template-columns:1fr; gap:24px; }
  .fsc-results{ grid-template-columns:1fr; }
  .fsc-panel + .fsc-panel{ border-left:0; border-top:1px solid var(--fsc-line); }
  .fsc-panel-dark + .fsc-panel,
  .fsc-panel + .fsc-panel-dark{ border-top:0; }
}
/* Fallback for browsers without container queries */
@media (max-width: 980px){
  .fsc-inputs{ grid-template-columns:1fr; gap:24px; }
  .fsc-results{ grid-template-columns:1fr; }
  .fsc-panel + .fsc-panel{ border-left:0; border-top:1px solid var(--fsc-line); }
  .fsc-panel-dark + .fsc-panel,
  .fsc-panel + .fsc-panel-dark{ border-top:0; }
}
@media (max-width: 620px){
  .fsc-inputs{ padding:18px 18px; }
  .fsc-panel{ padding:20px 18px 20px; }
  .fsc-seg{ width:100%; }
  .fsc-seg label{ flex:1; padding:11px 12px; font-size:13.5px; }
  /* Three equal columns get too narrow for "ISO 27001" at this width —
     let them wrap to two per row instead of squeezing. */
  .fsc .fsc-chips label{ flex:1 1 calc(50% - 5px); padding:13px 10px; }
}

@media (prefers-reduced-motion:reduce){
  .fsc *,
  .fsc-slidein,
  .fsc-slidein *{ transition:none !important; animation:none !important; }
}