/* OfficeQ Business Break-Even Calculator */

.be-hero{
  padding:46px 0 34px;
  background:linear-gradient(180deg,#fff 0%,#f8fbfd 100%);
  border-bottom:1px solid var(--line);
}

.be-breadcrumb{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:25px;
  color:#71838a;
  font-size:13px;
  font-weight:750;
}

.be-breadcrumb a{color:var(--blue)}

.be-hero-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
}

.be-title-wrap{max-width:720px}

.be-kicker{
  display:block;
  margin-bottom:9px;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.be-title-wrap h1{
  margin:0 0 13px;
  font-size:clamp(38px,5vw,60px);
  line-height:1.02;
  letter-spacing:-.045em;
}

.be-title-wrap p{
  max-width:660px;
  margin:0;
  color:var(--muted);
  font-size:19px;
}

.be-mode-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-width:360px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#eef3f5;
}

.be-mode-btn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  padding:12px 18px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#65777e;
  cursor:pointer;
  text-align:left;
  transition:.18s ease;
}

.be-mode-btn strong{font-size:15px}
.be-mode-btn span{font-size:11px;font-weight:750}

.be-mode-btn.is-active{
  background:#fff;
  color:var(--blue);
  box-shadow:0 4px 15px rgba(21,49,59,.09);
}

.be-tool-section{
  padding:38px 0 68px;
  background:#f6f9fa;
}

.be-mode-panel{display:none}
.be-mode-panel.is-active{display:block}

.be-tool-grid{
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr);
  gap:22px;
  align-items:start;
}

.be-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
}

.be-input-panel{box-shadow:0 10px 32px rgba(21,49,59,.045)}

.be-results-panel{
  position:sticky;
  top:104px;
  box-shadow:0 14px 38px rgba(21,49,59,.08);
}

.be-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:24px 26px;
  border-bottom:1px solid var(--line);
}

.be-panel-head h2{
  margin:3px 0 0;
  font-size:23px;
  letter-spacing:-.025em;
}

.be-step{
  color:var(--blue);
  font-size:11px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.be-live-badge{
  padding:6px 9px;
  border-radius:999px;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
}

.be-fields{padding:24px 26px 5px}

.be-field-row{
  display:grid;
  gap:14px;
}

.be-field-row-2{grid-template-columns:1fr 1fr}

.be-field{
  display:block;
  margin-bottom:18px;
}

.be-field > span{
  display:block;
  margin-bottom:7px;
  color:#304951;
  font-size:13px;
  font-weight:800;
}

.be-field small{
  display:block;
  margin-top:6px;
  color:#7a898f;
  font-size:11px;
}

.be-field input,
.be-field select{
  width:100%;
  height:48px;
  border:1px solid #cbd9df;
  border-radius:11px;
  background:#fff;
  color:var(--ink);
  outline:none;
}

.be-field select{padding:0 12px}
.be-field input{padding:0 12px;font-weight:750}

.be-field input:focus,
.be-field select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(18,105,173,.09);
}

.be-money-input,
.be-percent-input,
.be-plain-input{
  display:flex;
  align-items:center;
  min-width:0;
  height:48px;
  border:1px solid #cbd9df;
  border-radius:11px;
  background:#fff;
  overflow:hidden;
}

.be-money-input:focus-within,
.be-percent-input:focus-within,
.be-plain-input:focus-within{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(18,105,173,.09);
}

.be-money-input > span,
.be-percent-input > span{
  display:grid;
  place-items:center;
  align-self:stretch;
  min-width:42px;
  background:#f3f7f8;
  color:#647980;
  font-size:14px;
  font-weight:850;
}

.be-money-input input,
.be-percent-input input,
.be-plain-input input{
  min-width:0;
  height:46px;
  border:0;
  border-radius:0;
  box-shadow:none!important;
}

.be-percent-input input{text-align:right}

.be-fieldset{
  min-width:0;
  margin:4px 0 22px;
  padding:21px 20px 3px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fbfcfd;
}

.be-fieldset legend{
  padding:0 8px;
  color:#263f47;
  font-size:15px;
  font-weight:900;
}

.be-fieldset > p{
  margin:-2px 0 17px;
  color:#76878d;
  font-size:12px;
}

.be-action-row{
  display:flex;
  gap:10px;
  padding:20px 26px 26px;
  border-top:1px solid var(--line);
}

.be-btn{
  min-height:47px;
  padding:0 17px;
  border-radius:11px;
  border:1px solid transparent;
  font-weight:850;
  cursor:pointer;
}

.be-btn-primary{
  flex:1;
  background:var(--blue);
  color:#fff;
}

.be-btn-primary:hover{background:var(--blue-dark)}

.be-btn-secondary{
  background:#fff;
  border-color:var(--line);
  color:#4e636b;
}

.be-results-head{background:#fbfdfe}

.be-alert{
  margin:22px 24px 0;
  padding:14px 15px;
  border:1px solid #f1c9c5;
  border-radius:11px;
  background:#fff4f2;
  color:#8c3f38;
  font-size:13px;
  font-weight:750;
}

.be-primary-result{
  margin:22px 24px 18px;
  padding:25px;
  border:1px solid #d4e8f5;
  border-radius:17px;
  background:var(--blue-soft);
}

.be-primary-result span{
  display:block;
  color:#547284;
  font-size:13px;
  font-weight:800;
}

.be-primary-result strong{
  display:block;
  margin:3px 0 0;
  color:var(--blue);
  font-size:clamp(44px,6vw,64px);
  line-height:1;
  letter-spacing:-.055em;
}

.be-primary-result small{
  display:block;
  margin-top:7px;
  color:#647c88;
  font-weight:750;
}

.be-metric-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:0 24px;
}

.be-metric{
  min-width:0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
}

.be-metric span{
  display:block;
  min-height:34px;
  color:#6b7d84;
  font-size:11px;
  font-weight:750;
}

.be-metric strong{
  display:block;
  margin-top:3px;
  color:#253e46;
  font-size:20px;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}

.be-takeaway{
  margin:18px 24px 0;
  padding:16px 17px;
  border-left:4px solid var(--blue);
  border-radius:0 11px 11px 0;
  background:#f7fafb;
  color:#405a63;
  font-size:13px;
}

.be-text-button{
  width:calc(100% - 48px);
  margin:12px 24px 24px;
  padding:10px 0 0;
  border:0;
  background:transparent;
  color:var(--blue);
  font-size:12px;
  font-weight:850;
  text-align:left;
  cursor:pointer;
}

.be-safety-card{
  margin:18px 24px 0;
  padding:17px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fbfcfd;
}

.be-safety-copy{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:10px;
  font-size:12px;
}

.be-safety-copy span{color:#6b7e85}
.be-safety-copy strong{color:#2e4c56}

.be-progress{
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:#dfe8ec;
}

.be-progress span{
  display:block;
  height:100%;
  max-width:100%;
  border-radius:inherit;
  background:var(--blue);
  transition:width .25s ease;
}

.be-safety-card small{
  display:block;
  margin-top:8px;
  color:#71838a;
}

.be-scenario-wrap{
  margin:20px 24px 0;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.be-subhead h3{
  margin:0 0 3px;
  font-size:16px;
}

.be-subhead p{
  margin:0 0 14px;
  color:#71838a;
  font-size:11px;
}

.be-table-scroll{overflow-x:auto}

.be-scenario-table{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
}

.be-scenario-table th,
.be-scenario-table td{
  padding:10px 8px;
  border-bottom:1px solid var(--line);
  text-align:right;
  white-space:nowrap;
}

.be-scenario-table th{
  color:#6a7d84;
  font-weight:850;
  background:#f7fafb;
}

.be-scenario-table th:first-child,
.be-scenario-table td:first-child{
  text-align:left;
  font-weight:850;
}

.be-note{
  margin-top:18px;
  padding:14px 17px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:#6a7c83;
  font-size:12px;
}

.be-note strong{color:#344f58}

.be-explainer{
  padding:72px 0;
  border-top:1px solid var(--line);
}

.be-explainer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}

.be-explainer h2,
.be-guide h2{
  margin:0;
  font-size:clamp(30px,4vw,43px);
  line-height:1.1;
  letter-spacing:-.035em;
}

.be-formula-card{
  padding:27px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#f8fbfc;
}

.be-formula-card strong{
  display:block;
  margin-bottom:9px;
  color:var(--blue);
  font-size:13px;
}

.be-formula-card code{
  display:block;
  padding:15px;
  border-radius:10px;
  background:#18323a;
  color:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;
  white-space:normal;
}

.be-formula-card p{
  margin:14px 0 0;
  color:#65777e;
  font-size:13px;
}

.be-guide{
  padding:72px 0 84px;
  background:#f7fafb;
  border-top:1px solid var(--line);
}

.be-guide-head{max-width:720px;margin-bottom:30px}

.be-guide-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.be-guide-grid article{
  padding:24px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}

.be-guide-grid article > span{
  color:var(--blue);
  font-size:12px;
  font-weight:900;
}

.be-guide-grid h3{margin:13px 0 7px;font-size:18px}
.be-guide-grid p{margin:0;color:#697b82;font-size:13px}

@media(max-width:1000px){
  .be-hero-row{align-items:flex-start;flex-direction:column}
  .be-mode-switch{min-width:0;width:100%;max-width:500px}
  .be-tool-grid{grid-template-columns:1fr}
  .be-results-panel{position:static}
}

@media(max-width:700px){
  .be-hero{padding:30px 0 26px}
  .be-title-wrap p{font-size:16px}
  .be-mode-btn{padding:10px 12px}
  .be-tool-section{padding-top:22px}
  .be-field-row-2,.be-metric-grid,.be-explainer-grid,.be-guide-grid{grid-template-columns:1fr}
  .be-panel-head,.be-fields,.be-action-row{padding-left:18px;padding-right:18px}
  .be-primary-result,.be-alert,.be-takeaway,.be-safety-card,.be-scenario-wrap{margin-left:18px;margin-right:18px}
  .be-metric-grid{padding:0 18px}
  .be-text-button{width:calc(100% - 36px);margin-left:18px;margin-right:18px}
  .be-action-row{flex-direction:column}
  .be-btn{width:100%}
  .be-primary-result strong{font-size:48px}
  .be-explainer,.be-guide{padding:55px 0}
}

@media(max-width:420px){
  .be-mode-btn span{display:none}
  .be-mode-btn{align-items:center}
  .be-primary-result{padding:21px}
  .be-primary-result strong{font-size:42px}
}