/* Tokens live on the card so the component stays self-contained for a future Shadow DOM host. */
.TmU2ooVDA3zvNKge2dwz {
  --navy: #2e416d;
  --opaline: #f4fbff;
  --blue: #9fdfff;
  --strata: #3e6ddc;
  --tile-border: #4d77da;
  --lime: #cbf62e;
  --muted: #50648a;
  --error: #a42c35;
  --focus: #497be7;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 600px) 504px;
  gap: 72px;
  align-items: stretch;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 72px;
  border-radius: 12px;
  background: var(--opaline);
  color: var(--navy);
  font-family: Gellix, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
}
.TmU2ooVDA3zvNKge2dwz *,
.TmU2ooVDA3zvNKge2dwz *::before,
.TmU2ooVDA3zvNKge2dwz *::after {
  box-sizing: border-box;
}
/* :where keeps this reset weaker than the button classes, so their size and weight apply. */
.TmU2ooVDA3zvNKge2dwz :where(button, input, select) {
  font: inherit;
}
.TmU2ooVDA3zvNKge2dwz button {
  cursor: pointer;
}
.TmU2ooVDA3zvNKge2dwz button:disabled {
  cursor: wait;
  opacity: 0.65;
}
.TmU2ooVDA3zvNKge2dwz :is(button, input, summary, a):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.TmU2ooVDA3zvNKge2dwz p,
.TmU2ooVDA3zvNKge2dwz h2,
.TmU2ooVDA3zvNKge2dwz h3,
.TmU2ooVDA3zvNKge2dwz dl,
.TmU2ooVDA3zvNKge2dwz dd {
  margin: 0;
}
/* Copy also glues its last two words (noWidow); this lets supporting browsers rebalance earlier lines. */
.TmU2ooVDA3zvNKge2dwz p,
.TmU2ooVDA3zvNKge2dwz h2,
.TmU2ooVDA3zvNKge2dwz h3,
.TmU2ooVDA3zvNKge2dwz dt,
.TmU2ooVDA3zvNKge2dwz label {
  text-wrap: pretty;
}
.Y278YgSGF4236UOkoiUG {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Left column */
.BOg1HyOnbev6IYJRSrhR {
  display: flex;
  flex-direction: column;
  gap: 36px;
  min-width: 0;
  /* The form column carries every pixel the viewport loses, because the estimate panel beside it
     is a fixed 504px. Querying this column (not the viewport) lets the fields drop to one column
     at the width where they actually stop fitting, on the host page as well as here. */
  container: calcForm / inline-size;
}
.VyrJ4jrBrm1sK_N6VAq3 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.JOjvwkzmRbRWU8kCTDfe {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.x9q5cbA1Yy7OL6oT3ljr {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid var(--navy);
  border-radius: 50%;
  position: relative;
  flex: none;
}
.x9q5cbA1Yy7OL6oT3ljr::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--navy);
}
.XQmpmgg_y40fPQYWt6TK {
  font-size: 42px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.84px;
}
.XQmpmgg_y40fPQYWt6TK:focus {
  outline: none;
}
.MdOzqd3kkmMqMynFXGgt {
  font-size: 18px;
  line-height: 1.4;
}
.TLWt8WgkEFVamxsBXpwy {
  font-size: 14px;
  line-height: 1.4;
}
.gCC54h3IpgemuVxIIkAQ {
  color: var(--muted);
}

/* Option buttons (hospital type) */
.GSMYskf5QKg1JjMGdRs_ {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}
.N9dRE2C8SA4JIL1_QjlQ {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
  padding: 14px 24px;
  border: 1px solid var(--blue);
  border-radius: 12px;
  background-image: linear-gradient(
    166deg,
    rgba(159, 223, 255, 0.05) 35%,
    rgba(159, 223, 255, 0.22) 100%
  );
  text-align: center;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    border-color 120ms ease;
}
.N9dRE2C8SA4JIL1_QjlQ:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.rsn3Stj0FSK191AOgUCg {
  background-color: var(--lime);
  background-image: none;
  border-color: var(--lime);
}

/* Final wizard step: phones swap the square Back for an Edit Inputs text link (node 7471:5816). */
.TmU2ooVDA3zvNKge2dwz .gKgdhGdtqVMDbTj_0PMX {
  display: none;
}

/* Hospital type as a select; shown on phones only (see Responsive). */
.a7ds61gZnPsmxUlod4uM {
  display: none;
}
.AenR58jCKExPmIMOtuWc {
  width: 100%;
  padding-right: 28px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  cursor: pointer;
  text-overflow: ellipsis;
}
.GWhpV_pFLqN4tNireJ5Q {
  opacity: 0.45;
}
.uBZF1ZA1uuBf5KaRP45F {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  overflow: visible;
  stroke: var(--navy);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Panel copy relocated under the form on phones (see Responsive); hidden elsewhere. */
.r8I65IwhY_4rkIlBXEzE {
  display: none;
}

/* Fields */
.W25bgEbwacKjHQ1qmhOz {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
  /* Rows are spaced by each field's bottom padding; cancel it after the last row. */
  margin-bottom: -30px;
}
/* Head, input and foot share the grid's row tracks so inputs in a row stay level
   when one hint wraps further than its neighbour. */
.UHIGejjNqxghn7eIjeYR {
  display: grid;
  /* The lone column must be able to shrink below its content's min-content size, or the
     input wrapper keeps its intrinsic width and spills into the next field's column. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid;
  grid-row: span 3;
  min-width: 0;
}
.W25bgEbwacKjHQ1qmhOz > .UHIGejjNqxghn7eIjeYR {
  padding-bottom: 30px;
}
.sL5RKU5W3GyF6EMok36b {
  grid-column: 1 / -1;
}
/* 440px is where two columns stop holding a full-width label: the longest one, "Avg Loaded Nurse
   Salary", needs ~206px, so 2 x 206 + the 16px gutter. Below that the pair stacks. Browsers
   without container queries keep two columns down to the 640px phone breakpoint below. */
@container calcForm (max-width: 440px) {
  .W25bgEbwacKjHQ1qmhOz {
    grid-template-columns: minmax(0, 1fr);
  }
}
.FpZHe__xvfovfDSHNILA {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}
.HRYagulE25uzZJUfnhg2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.HRYagulE25uzZJUfnhg2 > :first-child:not(:empty) {
  margin-top: 10px;
}
.knXWuv4npQjGtKUcasQ2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}
/* Numeric input, from Figma node 6960:5453: option-button surface; a reset button replaces its chevron stepper. */
.F0K7AS5c9iR2IXc1YfYT {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 55px;
  padding: 0 14px;
  border: 1px solid var(--blue);
  border-radius: 12px;
  background-image: linear-gradient(
    166deg,
    rgba(159, 223, 255, 0.05) 35%,
    rgba(159, 223, 255, 0.22) 100%
  );
}
.F0K7AS5c9iR2IXc1YfYT {
  position: relative;
  min-width: 0;
}
/* Unit shown after the typed value: an overlay whose hidden copy of the value pushes it into place. */
.cJMWvbHkOgCpcSkgs0DT {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  max-width: calc(100% - 48px);
  overflow: hidden;
  white-space: pre;
  pointer-events: none;
  font-size: 18px;
  line-height: 1.4;
  opacity: 0.75;
}
/* Unit shown before the typed value; the negative margin closes the flex gap. */
.ReE06s0G3OPKZmHaEFba {
  flex: none;
  margin-right: -8px;
  font-size: 18px;
  line-height: 1.4;
  opacity: 0.75;
  pointer-events: none;
}
.F0K7AS5c9iR2IXc1YfYT:focus-within :is(.ReE06s0G3OPKZmHaEFba, .cJMWvbHkOgCpcSkgs0DT) {
  opacity: 1;
}
.YXhCaDF7sFcLreDc1LWN {
  visibility: hidden;
}
/* Focus is drawn on the rounded wrapper. The bare input would otherwise get the card's
   rectangular :focus-visible outline, which browsers apply to text fields on mouse clicks too. */
.TmU2ooVDA3zvNKge2dwz .BI0QBx7kbjOvBq7jl9eF:focus-visible {
  outline: none;
}
.F0K7AS5c9iR2IXc1YfYT:has(.BI0QBx7kbjOvBq7jl9eF:focus) {
  box-shadow: 0 0 0 3px rgba(73, 123, 231, 0.35);
}
.F0K7AS5c9iR2IXc1YfYT:not(.XyYL8HS_oz_eq93a8AVt):has(.BI0QBx7kbjOvBq7jl9eF:focus) {
  border-color: var(--navy);
}
.BI0QBx7kbjOvBq7jl9eF {
  flex: 1;
  /* A bare text input carries a ~180px intrinsic width that min-width alone does not remove
     from the wrapper's min-content size; flex: 1 grows it back to fill the row. */
  width: 0;
  min-width: 0;
  padding: 14px 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  opacity: 0.75;
  font-size: 18px;
  line-height: 1.4;
}
.BI0QBx7kbjOvBq7jl9eF:focus {
  outline: none;
  opacity: 1;
}
/* Lighter than a typed value so example text is not mistaken for a pre-filled answer. */
.BI0QBx7kbjOvBq7jl9eF::placeholder {
  color: var(--navy);
  opacity: 0.6;
}
.BI0QBx7kbjOvBq7jl9eF:disabled {
  opacity: 0.45;
}
/* Shown only once a value differs from the hospital type's starting value. */
.jeGccg1LxG5NPDRpUoTw {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-right: -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--navy);
}
.jeGccg1LxG5NPDRpUoTw svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.XyYL8HS_oz_eq93a8AVt {
  border-color: var(--error);
}
.hvVXNj3t3VWHdNqAee_g {
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}
.FpZHe__xvfovfDSHNILA .hvVXNj3t3VWHdNqAee_g {
  color: var(--navy);
  opacity: 0.75;
}
.WcLxUUqu_o6oN1PlNdoe {
  font-size: 14px;
  line-height: 1.4;
  color: var(--error);
  min-height: 1.4em;
}
/* Step-level messages take no room until they have something to say. */
.LOev6FmfqBhpOi7gt2Bi:empty {
  display: none;
}
.ZDC031ocfgHUdiKbQrjM {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  cursor: pointer;
}
.HRYagulE25uzZJUfnhg2 .ZDC031ocfgHUdiKbQrjM {
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
}
.HRYagulE25uzZJUfnhg2 .ZDC031ocfgHUdiKbQrjM input {
  width: 16px;
  height: 16px;
}
.ZDC031ocfgHUdiKbQrjM input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--navy);
}

/* Actions */
/* Pinned to the bottom of the column, which stretches to the panel's height. */
.y4rkHYvh1DeG7MsVifgW {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
}
.co9nyb5yFbfoEwaVwrli {
  justify-content: flex-end;
}
.ATybmoq6wRULkODDuBAU {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 19px;
  height: 56px;
  padding: 16px 26px;
  border: 1px solid var(--navy);
  border-radius: 0;
  background: var(--navy);
  color: var(--opaline);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  /* Hover behaviour copied from canopyworks.com's .cta_button: half-second colour change,
     a 5% grow from the left edge, and the outbound arrow turning to point right. */
  transform-origin: 0%;
  transition:
    color 0.5s,
    border 0.5s,
    background-color 0.5s,
    transform 0.5s;
}
.poDbVoY5iRYT6iYZZfcH {
  background: transparent;
  color: var(--navy);
}
.fzUzZs_YqDeYBoA41a6q {
  display: block;
  flex: none;
  overflow: visible;
}
.OOIe7F3_AbvHht2T03Jr {
  transform: scaleX(-1);
}
/* The same arrow turned 45 degrees for links that leave the calculator. */
.drkjF8cxJnMYpDM5VBhw {
  transform: rotate(-45deg);
  transition: transform 0.5s ease;
}
.YAh87sZtwCJojvyxZQmG {
  display: block;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-miterlimit: 10;
  stroke-linecap: round;
}
.gIQOj0qyQG5g4rOICCUM {
  transition:
    transform 0.5s ease,
    opacity 0.3s ease;
}
.Ehasa9GNWeQwN1APAbUW {
  transition: opacity 0.5s ease;
}
/* Hidden until a download succeeds, then drawn in from its short end. */
.pbdmnswDzteoXvuYjdV_ {
  opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition:
    opacity 0.2s ease,
    stroke-dashoffset 0.4s ease;
}
.XJrZIXO6mJnSqvcIpvTr .gIQOj0qyQG5g4rOICCUM,
.XJrZIXO6mJnSqvcIpvTr .Ehasa9GNWeQwN1APAbUW {
  opacity: 0;
}
.XJrZIXO6mJnSqvcIpvTr .pbdmnswDzteoXvuYjdV_ {
  opacity: 1;
  stroke-dashoffset: 0;
  transition:
    opacity 0.2s ease,
    stroke-dashoffset 0.4s ease 0.15s;
}
.TmU2ooVDA3zvNKge2dwz a.ATybmoq6wRULkODDuBAU {
  text-decoration: none;
}
.FhIBLuzxcTp8VgOVIhFt {
  border-color: var(--opaline);
  background: var(--opaline);
  color: var(--navy);
}
.AwaeVfDuFBqK9bBVgA7e {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}
.AwaeVfDuFBqK9bBVgA7e {
  transition: color 0.5s;
}

/* Right panel */
.jpu6i6s02LmNi7d8_VTA {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 556px;
  padding: 24px;
  border-radius: 12px;
  background: var(--navy);
  color: var(--opaline);
}
.sk5ZQxKufwpFWZ5Ac638 {
  padding: 0 0 8px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}
/* Figure and copy at the top, footnote pinned to the bottom of the designed 436px body. */
.wi75wy2em1Giwlr0joHM {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 66px;
  flex: 1;
  min-height: 436px;
}
.JW_F2beZsuzpKVvLmggq {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 148px;
  padding: 30px 24px;
  border: 1px solid var(--tile-border);
  border-radius: 12px;
  background-image: linear-gradient(
    -13.58deg,
    rgba(77, 119, 218, 0.4) 0%,
    rgba(46, 65, 109, 0.4) 100%
  );
  text-align: center;
}
.Dzzqs8E18_UNodcylQGT {
  font-size: 58px;
  line-height: 1.05;
  letter-spacing: -1.16px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* Previous figure shown dimmed while a recalculation is pending. */
.GQMATszEQJz9K_jE45gQ {
  opacity: 0.55;
  transition: opacity 150ms ease;
}
.j_y_RN3mILjlCW8lMDIw {
  max-width: 428px;
  font-size: 24px;
  line-height: 1.4;
  text-align: center;
}
/* .card prefix: outranks the `.card p` margin reset so the auto margin can pin the footnote. */
.TmU2ooVDA3zvNKge2dwz .wNqKSUeB7pybtJiVIxKP {
  width: 100%;
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid var(--tile-border);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

/* Results view (left column), Figma node 7182:2191 */
.YC4dMYygKH4iqTO4wYZp {
  gap: 23px;
}
.PWnZ8nziHTRpTJeOnHjZ {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lXBtKRi8AObAXIoKWkZz {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.25;
}
.lXBtKRi8AObAXIoKWkZz:focus {
  outline: none;
}
.PPxW1sNcIMuD7HzTCjia {
  display: flex;
  flex-direction: column;
}
.gAc3EXySD4skTWepPUnM {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--blue);
  font-size: 18px;
  line-height: 1.4;
}
.gAc3EXySD4skTWepPUnM:last-child {
  margin-bottom: 0;
}
.gAc3EXySD4skTWepPUnM dd {
  font-size: 24px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.BTLDKkGnoSCvyFTO4itP {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 36px;
  line-height: 1.25;
}
.BTLDKkGnoSCvyFTO4itP strong {
  font-weight: 600;
  letter-spacing: -0.72px;
  color: var(--strata);
  white-space: nowrap;
}
.laMnVzW2IjbWyqjYH_IY {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 30px;
}
/* The email note reads as a caption on the buttons, so it sits closer than the column gap. */
.b4W4YSsgbcYG4G1PVcgt {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eoLm8OSTl8GdZ0d5frrN {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* Long work addresses must wrap rather than push the column wider. */
  overflow-wrap: anywhere;
}
.OeGWls544QgCmdZ9ES2d {
  flex: none;
  margin-top: 2px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* Results state of the panel */
.zwa0f_OzZY4xlgm2MENp {
  gap: 28px;
}
.hm6IWE8LOsyJbQ4se1BD {
  border-color: var(--strata);
  background-color: var(--strata);
  background-image: none;
  color: var(--lime);
}
.MNLLTIXUKKewA3RcNMFx {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: -4px;
  text-align: center;
}

/* Hover effects apply only where the primary input can hover, so touch screens never get a
   stuck hover state after a tap. */
@media (hover: hover) {
  .N9dRE2C8SA4JIL1_QjlQ:not(.rsn3Stj0FSK191AOgUCg):hover {
    border-color: var(--navy);
  }
  .jeGccg1LxG5NPDRpUoTw:hover {
    background: rgba(46, 65, 109, 0.08);
    color: var(--strata);
  }
  .ATybmoq6wRULkODDuBAU:hover:not(:disabled) {
    border-color: var(--strata);
    background-color: var(--strata);
    transform: scale(1.05);
  }
  .poDbVoY5iRYT6iYZZfcH:hover:not(:disabled) {
    border-color: var(--strata);
    background-color: transparent;
    color: var(--strata);
  }
  .ATybmoq6wRULkODDuBAU:hover > .drkjF8cxJnMYpDM5VBhw {
    transform: rotate(0deg);
  }
  /* The download arrow dips toward its tray, the counterpart of the outbound arrow's turn. */
  .ATybmoq6wRULkODDuBAU:hover:not(:disabled) .gIQOj0qyQG5g4rOICCUM {
    transform: translateY(2px);
  }
  .ATybmoq6wRULkODDuBAU:hover:not(:disabled) .Ehasa9GNWeQwN1APAbUW {
    opacity: 0;
  }
  /* The site's dark-theme primary: skyeon fill, strata border, text stays nocturne. */
  .FhIBLuzxcTp8VgOVIhFt:hover:not(:disabled) {
    border-color: var(--strata);
    background-color: var(--blue);
    color: var(--navy);
  }
  .AwaeVfDuFBqK9bBVgA7e:hover {
    color: var(--strata);
  }
}

/* Responsive */
@media (max-width: 1180px) {
  .TmU2ooVDA3zvNKge2dwz {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px;
  }
  /* Stacked: the estimate leads, and no longer needs to match the form column's height. */
  .jpu6i6s02LmNi7d8_VTA {
    order: -1;
    min-height: 0;
  }
  .wi75wy2em1Giwlr0joHM {
    gap: 40px;
    min-height: 0;
  }
}
/* Phones, from the Figma mobile frames (node 7469:5349). */
@media (max-width: 640px) {
  /* overflow: clip (not hidden) rounds the docked estimate bar's corners without creating a
   * scroll container, which would stop position: sticky from tracking the viewport. */
  .TmU2ooVDA3zvNKge2dwz {
    padding: 24px;
    gap: 32px;
    overflow: clip;
  }
  .BOg1HyOnbev6IYJRSrhR {
    gap: 32px;
  }
  .JOjvwkzmRbRWU8kCTDfe {
    font-size: 15px;
    letter-spacing: 1.5px;
  }
  .XQmpmgg_y40fPQYWt6TK {
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -0.22px;
  }
  .GSMYskf5QKg1JjMGdRs_ {
    display: none;
  }
  .a7ds61gZnPsmxUlod4uM {
    display: block;
  }
  .W25bgEbwacKjHQ1qmhOz {
    grid-template-columns: 1fr;
  }
  /* Wizard actions (Figma node 7469:5559): an 80px arrow-only Back beside a wide Next. */
  .y4rkHYvh1DeG7MsVifgW {
    gap: 20px;
  }
  .y4rkHYvh1DeG7MsVifgW .poDbVoY5iRYT6iYZZfcH {
    flex: none;
    width: 80px;
    padding: 14px;
  }
  .Hr7N3LFJZJ1I9uDAAt9v {
    flex-direction: column;
    gap: 20px;
  }
  .Hr7N3LFJZJ1I9uDAAt9v .iPXuoFBEdh8Ecx4OXJh4 {
    display: none;
  }
  .TmU2ooVDA3zvNKge2dwz .Hr7N3LFJZJ1I9uDAAt9v .gKgdhGdtqVMDbTj_0PMX {
    display: inline-flex;
    font-size: 18px;
    font-weight: 400;
  }
  .y4rkHYvh1DeG7MsVifgW .Z8UpEhXxpZHVouM0IIEU {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ATybmoq6wRULkODDuBAU {
    width: 100%;
    gap: 16px;
    padding: 14px 28px;
  }
  .ATybmoq6wRULkODDuBAU:hover:not(:disabled) {
    transform: none;
  }
  .jpu6i6s02LmNi7d8_VTA {
    padding: 24px;
  }
  .sk5ZQxKufwpFWZ5Ac638 {
    font-size: 20px;
  }
  .Dzzqs8E18_UNodcylQGT {
    font-size: 44px;
  }
  .j_y_RN3mILjlCW8lMDIw {
    font-size: 20px;
  }
  /* Compact estimate while stepping through the form: title and figure only. */
  .p965XMOtL01v7ab7siX1 {
    gap: 18px;
  }
  .p965XMOtL01v7ab7siX1 .sk5ZQxKufwpFWZ5Ac638 {
    padding: 0;
    font-size: 18px;
    line-height: 1.4;
  }
  .p965XMOtL01v7ab7siX1 .JW_F2beZsuzpKVvLmggq {
    min-height: 0;
    padding: 20px;
  }
  .p965XMOtL01v7ab7siX1 .Dzzqs8E18_UNodcylQGT {
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.72px;
  }
  .p965XMOtL01v7ab7siX1 .j_y_RN3mILjlCW8lMDIw,
  .p965XMOtL01v7ab7siX1 .wNqKSUeB7pybtJiVIxKP {
    display: none;
  }
  /* Sticky estimate bar (Figma node 7519:2585): while stepping through the form the panel
   * leads the card and sticks to the top of the viewport, so the live figure stays visible
   * without scrolling back up. Sticky (not fixed) keeps it scoped to the card, so it never
   * floats over the rest of the host page. The host page's fixed nav is cleared through
   * --calc-sticky-top, or the Canopy site's own --site--nav-height; custom properties
   * inherit across the code component's shadow boundary. */
  .p965XMOtL01v7ab7siX1 {
    position: sticky;
    top: var(--calc-sticky-top, var(--site--nav-height, 0px));
    z-index: 2;
    order: -1;
    gap: 8px;
    margin: -24px -24px 0;
    padding: 18px 24px;
    border-radius: 0;
    background: var(--strata);
    box-shadow: 0 8px 24px rgba(46, 65, 109, 0.18);
  }
  .p965XMOtL01v7ab7siX1 .JW_F2beZsuzpKVvLmggq {
    padding: 0;
    border: 0;
    background: none;
  }
  .p965XMOtL01v7ab7siX1 .Dzzqs8E18_UNodcylQGT {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.56px;
  }
  /* The on-screen keyboard covers the bar on phones; drop it until the keyboard closes. */
  .c1ZiZ9KCtPX18qRLZzB7 {
    display: none;
  }
  /* A sticky element cannot travel into its container's padding, so while the bar is in
   * play the card's bottom padding moves onto the copy block above it. The bar then runs
   * all the way to the card's edge before the card scrolls away. */
  .osrSP5cihebQaQ1eImKM {
    padding-bottom: 0;
  }
  .osrSP5cihebQaQ1eImKM .r8I65IwhY_4rkIlBXEzE {
    padding-bottom: 24px;
  }
  /* Keep step headings and focused fields clear of the nav and the bar when scrolled into view. */
  .TmU2ooVDA3zvNKge2dwz :is(input, select, button, h2) {
    scroll-margin-top: calc(var(--calc-sticky-top, var(--site--nav-height, 0px)) + 120px);
  }
  .r8I65IwhY_4rkIlBXEzE {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .hivwL0UBKPtxoh1h_tJ7 {
    font-size: 18px;
    line-height: 1.4;
  }
  .nAGQMpKmhr8VBAmYDcKs {
    padding-top: 16px;
    border-top: 1px solid var(--blue);
    font-size: 14px;
    line-height: 1.4;
    color: var(--muted);
  }
  /* Results screen (node 7182:2599). */
  .YC4dMYygKH4iqTO4wYZp {
    gap: 36px;
  }
  .PWnZ8nziHTRpTJeOnHjZ {
    gap: 48px;
  }
  .lXBtKRi8AObAXIoKWkZz {
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -0.22px;
  }
  .gAc3EXySD4skTWepPUnM {
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  .gAc3EXySD4skTWepPUnM dd {
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -0.22px;
  }
  .BTLDKkGnoSCvyFTO4itP {
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -0.22px;
  }
  .BTLDKkGnoSCvyFTO4itP strong {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.56px;
  }
  .laMnVzW2IjbWyqjYH_IY {
    flex-direction: column;
  }
  .TmU2ooVDA3zvNKge2dwz .nN9mqOXbPxWDmfMjS9LI {
    display: none;
  }
  /* Results state of the panel on phones. */
  .jpu6i6s02LmNi7d8_VTA:not(.p965XMOtL01v7ab7siX1) .sk5ZQxKufwpFWZ5Ac638 {
    padding: 0 0 8px;
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -0.22px;
  }
  .jpu6i6s02LmNi7d8_VTA:not(.p965XMOtL01v7ab7siX1) .JW_F2beZsuzpKVvLmggq {
    min-height: 0;
    padding: 20px;
  }
  .jpu6i6s02LmNi7d8_VTA:not(.p965XMOtL01v7ab7siX1) .Dzzqs8E18_UNodcylQGT {
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.72px;
  }
  .zwa0f_OzZY4xlgm2MENp {
    gap: 16px;
  }
  .zwa0f_OzZY4xlgm2MENp .j_y_RN3mILjlCW8lMDIw {
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -0.22px;
  }
  .MNLLTIXUKKewA3RcNMFx {
    margin-top: 0;
  }
  .zwa0f_OzZY4xlgm2MENp .FhIBLuzxcTp8VgOVIhFt {
    width: 100%;
    margin-top: 8px;
  }
  .zwa0f_OzZY4xlgm2MENp .wNqKSUeB7pybtJiVIxKP {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ATybmoq6wRULkODDuBAU,
  .drkjF8cxJnMYpDM5VBhw,
  .gIQOj0qyQG5g4rOICCUM,
  .Ehasa9GNWeQwN1APAbUW,
  .pbdmnswDzteoXvuYjdV_,
  .XJrZIXO6mJnSqvcIpvTr .pbdmnswDzteoXvuYjdV_,
  .AwaeVfDuFBqK9bBVgA7e {
    transition: none;
  }
  .ATybmoq6wRULkODDuBAU:hover:not(:disabled),
  .ATybmoq6wRULkODDuBAU:hover:not(:disabled) .gIQOj0qyQG5g4rOICCUM {
    transform: none;
  }
  /* The icon stays whole on hover. The check still replaces the arrow, just without being
     drawn in. */
  .ATybmoq6wRULkODDuBAU:hover:not(:disabled) .YAh87sZtwCJojvyxZQmG:not(.XJrZIXO6mJnSqvcIpvTr) .Ehasa9GNWeQwN1APAbUW {
    opacity: 1;
  }
}