/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .collapse {
    visibility: collapse;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .static {
    position: static;
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .end {
    inset-inline-end: var(--spacing);
  }
  .block {
    display: block;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
}
:root {
  --ink: #201c26;
  --muted: #746d79;
  --line: #e8e2ea;
  --page: #fbf9fc;
  --surface: #ffffff;
  --purple: #82518e;
  --purple-dark: #4b184f;
  --purple-soft: #f8ebf9;
  --blue: #def0ff;
  --green: #e4f6e9;
  --yellow: #fff2d2;
  --coral: #ffe8df;
  --slate: #eef0f5;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--page);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select {
  font: inherit;
}
button {
  cursor: pointer;
}
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(109, 53, 211, .22);
  outline-offset: 2px;
}
.app-shell {
  min-height: 100vh;
  background: var(--page);
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 45;
  height: 78px;
  border-bottom: 1px solid rgba(221,210,233,.82);
  background: linear-gradient(105deg,rgba(252,249,255,.96),rgba(244,238,255,.91) 54%,rgba(255,250,240,.94));
  box-shadow: 0 8px 22px rgba(68,43,99,.08);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.brand {
  display: flex;
  align-items: center;
  padding: 0;
  color: var(--ink);
  border: 0;
  background: none;
}
.brand--oc-calc {
  width: 262px;
  height: 68px;
  overflow: hidden;
  position: relative;
}
.brand--oc-calc img {
  width: 260px;
  height: auto;
  max-width: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.page-wrap {
  width: min(1400px, calc(100% - 56px));
  margin: 0 auto;
  padding: 34px 0 170px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 32px;
  color: var(--muted);
  font-size: 13px;
}
.breadcrumb b {
  color: #b9b1bd;
  font-size: 18px;
}
.breadcrumb-home {
  color: #5d2462;
  font-weight: 800;
  text-decoration: none;
}
.breadcrumb-home:hover {
  text-decoration: underline;
}
.intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
}
.eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--purple);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.intro h1 {
  margin: 0;
  font-size: clamp(36px, 5vw, 60px);
  line-height: .98;
  letter-spacing: -.055em;
}
.intro p {
  max-width: 700px;
  margin: 15px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}
.steps {
  width: min(650px, 100%);
  margin: 36px auto 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: flex-start;
  justify-content: center;
}
.step-group {
  position: relative;
  min-width: 0;
  display: grid;
  justify-items: center;
}
.step {
  position: relative;
  z-index: 1;
  padding: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 0;
  color: #a096aa;
  background: none;
  font-size: 10px;
}
.step span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #ddd5e5;
  border-radius: 50%;
  background: #fff;
  font-weight: 800;
  transition: .2s ease;
}
.step b {
  font-weight: 700;
}
.step.is-active {
  color: var(--purple);
}
.step.is-active span {
  border-color: var(--purple);
  color: white;
  background: var(--purple);
  box-shadow: 0 5px 14px rgba(109,53,211,.22);
}
.step.is-complete {
  color: #7a55bd;
}
.step.is-complete span {
  border-color: #c3a9ee;
  color: var(--purple);
  background: var(--purple-soft);
}
.step-line {
  position: absolute;
  z-index: 0;
  top: 16px;
  right: 50%;
  width: 100%;
  height: 1px;
  background: #ded7e5;
}
.step-line.is-filled {
  background: #b591e8;
}
.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}
.content-grid.single-layout {
  grid-template-columns: minmax(0, 1fr);
}
.content-grid.result-layout {
  grid-template-columns: minmax(0, 1fr) 310px;
}
.form-card, .preview-card {
  border: 1px solid rgba(87, 56, 108, .1);
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 60px rgba(55, 31, 75, .07);
}
.form-card {
  min-width: 0;
  padding: 31px;
}
.card-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}
.heading-number {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
  border-radius: 14px;
  color: var(--purple);
  background: var(--purple-soft);
  font-size: 12px;
  font-weight: 800;
}
.card-heading h2, .subheading-row h3 {
  margin: 0;
  letter-spacing: -.025em;
}
.card-heading h2 {
  font-size: 20px;
}
.card-heading p, .subheading-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 27px;
}
.field > span {
  display: block;
  margin-bottom: 8px;
  color: #4d4357;
  font-size: 11px;
  font-weight: 700;
}
.field-label {
  display: flex !important;
  align-items: center;
  gap: 6px;
}
.field-help {
  position: relative;
  display: inline-flex;
}
.field-help > button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid rgba(101,57,113,.24);
  border-radius: 50%;
  color: #653971;
  background: rgba(101,57,113,.09);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.field-help [role='tooltip'] {
  position: absolute;
  z-index: 12;
  bottom: calc(100% + 8px);
  left: 50%;
  width: 205px;
  padding: 9px 10px;
  border-radius: 10px;
  color: #fff;
  background: #4b184f;
  box-shadow: 0 8px 20px rgba(75,24,79,.22);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease;
}
.field-help:hover [role='tooltip'], .field-help:focus-within [role='tooltip'] {
  opacity: 1;
  transform: translate(-50%, 0);
}
.input-shell {
  height: 49px;
  display: flex;
  align-items: center;
  border: 1px solid #ded6e6;
  border-radius: 12px;
  background: #fdfcfe;
  transition: .2s ease;
}
.input-shell:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(109,53,211,.09);
  background: white;
}
.input-shell input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 14px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-weight: 700;
}
.input-shell em {
  padding: 0 14px 0 6px;
  color: #948b9d;
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}
.field.compact .input-shell {
  height: 44px;
  border-radius: 10px;
}
.field.compact .input-shell input {
  padding: 0 11px;
  font-size: 12px;
}
.field select {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  border: 1px solid #ded6e6;
  border-radius: 10px;
  color: var(--ink);
  background: #fdfcfe;
  font-size: 12px;
  font-weight: 700;
}
.section-divider {
  height: 1px;
  margin: 29px 0 25px;
  background: var(--line);
}
.subheading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.subheading-row h3 {
  font-size: 15px;
}
.secondary-button {
  padding: 9px 13px;
  border: 1px solid #d9cced;
  border-radius: 10px;
  color: var(--purple);
  background: #faf7ff;
  font-size: 10px;
  font-weight: 800;
  transition: .2s ease;
}
.secondary-button:hover {
  border-color: #bda0e7;
  background: var(--purple-soft);
}
.empty-opening {
  margin-top: 18px;
  padding: 19px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px dashed #dcd2e5;
  border-radius: 13px;
  background: #fbf9fd;
}
.opening-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  color: var(--purple);
  background: white;
  box-shadow: 0 3px 12px rgba(65,40,81,.08);
}
.empty-opening strong, .empty-opening small {
  display: block;
}
.empty-opening strong {
  font-size: 11px;
}
.empty-opening small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}
.openings-list {
  margin-top: 16px;
  display: grid;
  gap: 11px;
}
.opening-card {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fbf9fd;
}
.opening-card-top {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.opening-card-top strong {
  font-size: 11px;
}
.opening-card-top button {
  padding: 0;
  border: 0;
  color: #a44c62;
  background: none;
  font-size: 9px;
  font-weight: 800;
}
.opening-fields {
  display: grid;
  grid-template-columns: 1.05fr .75fr 1fr 1fr;
  gap: 9px;
}
.openings-box {
  margin-top: 28px;
  padding: 19px;
  border: 1px dashed #cbbbd0;
  border-radius: 22px;
  background: radial-gradient(circle at 76% 15%, #fff 0, #faf7fb 46%, #f8f4fa 100%);
}
.openings-box__heading {
  margin-bottom: 2px;
}
.discount-total {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: #7b5f15;
  background: var(--yellow);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.opening-group {
  padding: 12px 0;
  border-top: 1px solid #ece5ee;
}
.opening-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.opening-group__header strong {
  color: #493450;
  font-size: 11px;
}
.opening-group__header button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 9px;
  border: 1px solid #dbc9df;
  border-radius: 10px;
  color: #71427a;
  background: white;
  font-size: 9px;
  font-weight: 750;
}
.opening-group__header button:hover {
  background: var(--purple-soft);
}
.opening-items {
  display: grid;
  gap: 7px;
}
.opening-item {
  display: grid;
  grid-template-columns: 66px 92px repeat(4, minmax(0, 1fr)) 30px;
  gap: 8px;
  align-items: end;
}
.opening-item__name {
  align-self: center;
  color: #736a77;
  font-size: 9px;
  font-weight: 750;
}
.opening-item .field {
  padding: 6px 9px;
  border-radius: 12px;
}
.opening-item .field > span {
  margin-bottom: 3px;
  font-size: 9px;
}
.opening-item .input-shell input, .opening-item .field.compact .input-shell input {
  height: 21px;
  font-size: 14px;
}
.opening-item .input-shell em {
  font-size: 10px;
}
.opening-remove {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 2px;
  padding: 0 0 2px;
  border: 1px solid #eadfe9;
  border-radius: 10px;
  color: #9b7d99;
  background: white;
  font-size: 18px;
}
.opening-remove:hover {
  border-color: #dfb5ab;
  color: #a34836;
  background: #fff3ef;
}
.opening-empty {
  margin: 0;
  padding: 8px 0;
  color: #9b929e;
  font-size: 9px;
}
.step-actions {
  margin-top: 27px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.step-actions .primary-button {
  flex: 1;
}
.step-actions.has-back .primary-button {
  margin-top: 0;
}
.primary-button, .primary-action {
  min-height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 0;
  border-radius: 13px;
  color: white;
  background: linear-gradient(135deg, #753bdc, #5a23bc);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 11px 24px rgba(93, 39, 189, .22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.primary-button {
  width: 100%;
}
.primary-button:hover, .primary-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(93, 39, 189, .28);
}
.primary-button span {
  font-size: 17px;
}
.back-button {
  min-height: 51px;
  padding: 0 18px;
  border: 1px solid #ddd3e7;
  border-radius: 13px;
  color: #5e5369;
  background: white;
  font-size: 11px;
  font-weight: 800;
}
.helper-text {
  margin: 11px 0 0;
  color: #93899e;
  font-size: 9px;
  line-height: 1.45;
}
.choice-toggle {
  margin-top: 25px;
  padding: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border: 1px solid #e5ddeb;
  border-radius: 13px;
  background: #f7f4f9;
}
.choice-toggle button {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  color: #776d81;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
}
.choice-toggle button.is-selected {
  color: var(--purple-dark);
  background: white;
  box-shadow: 0 3px 10px rgba(62,36,79,.08);
}
.choice-toggle-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(74, 24, 79, .18));
  transition: transform .16s ease;
}
.choice-toggle button:hover .choice-toggle-icon,
.choice-toggle button.is-selected .choice-toggle-icon {
  transform: translateY(-1px) scale(1.06);
}
.section-label {
  margin: 25px 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.section-label strong {
  font-size: 12px;
}
.section-label span {
  color: var(--muted);
  font-size: 9px;
}
.block-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.block-option {
  position: relative;
  min-width: 0;
  height: 112px;
  padding: 14px 8px 10px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid #e3dce9;
  border-radius: 13px;
  color: #62576d;
  background: white;
  transition: .2s ease;
}
.block-option:hover {
  border-color: #cbb7e8;
  transform: translateY(-1px);
}
.block-option.is-selected {
  border-color: var(--purple);
  color: var(--purple-dark);
  background: #faf7ff;
  box-shadow: inset 0 0 0 1px var(--purple), 0 5px 16px rgba(98,48,184,.1);
}
.block-option strong {
  margin-top: 8px;
  font-size: 10px;
  white-space: nowrap;
}
.block-option small {
  margin-top: 1px;
  color: #9b91a4;
  font-size: 8px;
}
.block-option > em {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 16px;
  height: 16px;
  display: none;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--purple);
  font-size: 8px;
  font-style: normal;
}
.block-option.is-selected > em {
  display: grid;
}
.block-shape {
  width: 48px;
  height: 29px;
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2px;
  border: 2px solid currentColor;
  border-radius: 3px;
  color: #9b73de;
  background: #f1e9fd;
}
.block-shape.concreto {
  color: #8d8993;
  background: #efedef;
}
.block-shape i {
  border: 1px solid currentColor;
  border-radius: 1px;
  opacity: .65;
}
.custom-plus {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 1px dashed #b8a6c9;
  border-radius: 10px;
  color: var(--purple);
  font-size: 20px;
  font-weight: 400;
}
.custom-fields {
  margin-top: 13px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border-radius: 13px;
  background: #f8f5fb;
}
.mortar-modes {
  margin-top: 25px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mortar-mode {
  position: relative;
  min-height: 76px;
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #e2dae9;
  border-radius: 13px;
  color: var(--ink);
  background: white;
  text-align: left;
}
.mortar-mode.is-selected {
  border-color: var(--purple);
  background: #faf7ff;
  box-shadow: inset 0 0 0 1px var(--purple);
}
.mortar-mode:disabled {
  cursor: default;
  opacity: .62;
}
.mortar-mode strong, .mortar-mode small {
  display: block;
}
.mortar-mode strong {
  font-size: 11px;
}
.mortar-mode small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}
.mortar-mode > i {
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: white;
  background: var(--purple);
  font-size: 8px;
  font-style: normal;
}
.mortar-mode > em {
  position: absolute;
  top: 9px;
  right: 9px;
  padding: 3px 5px;
  border-radius: 99px;
  color: #746880;
  background: #eee9f2;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}
.bag-icon, .mix-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 39px;
  flex: 0 0 auto;
  border-radius: 7px 7px 10px 10px;
  color: var(--purple);
  background: #eee5fc;
  font-size: 9px;
  font-weight: 800;
}
.mix-icon {
  border-radius: 10px;
  color: #7d7287;
  background: #eeeaf1;
  font-size: 18px;
}
.industrial-card {
  margin-top: 17px;
  padding: 20px;
  border-radius: 15px;
  background: #f8f5fb;
}
.industrial-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.industrial-title > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  color: var(--purple);
  background: white;
  font-size: 10px;
  font-weight: 800;
}
.industrial-title strong, .industrial-title small {
  display: block;
}
.industrial-title strong {
  font-size: 11px;
}
.industrial-title small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}
.industrial-card .field-grid {
  margin-top: 17px;
}
.mortar-preview {
  margin-top: 15px;
  padding: 14px 17px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 13px;
  border: 1px solid #e7def0;
  border-radius: 13px;
}
.mortar-preview span {
  color: var(--muted);
  font-size: 9px;
}
.mortar-preview strong {
  color: var(--purple-dark);
  font-size: 18px;
  letter-spacing: -.03em;
}
.mortar-preview b {
  padding: 5px 8px;
  border-radius: 7px;
  color: var(--purple);
  background: var(--purple-soft);
  font-size: 9px;
}
.mortar-preview small {
  grid-column: 1 / -1;
  margin-top: -8px;
  color: #9b91a4;
  font-size: 8px;
}
.preview-card {
  position: sticky;
  top: 24px;
  overflow: hidden;
  padding: 23px;
}
.preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #564c61;
  font-size: 10px;
  font-weight: 800;
}
.live-dot {
  color: #776d83;
  font-size: 8px;
  font-weight: 600;
}
.live-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-right: 5px;
  display: inline-block;
  border-radius: 50%;
  background: #43ae75;
  box-shadow: 0 0 0 3px #e5f6ed;
}
.area-visual {
  position: relative;
  height: 158px;
  margin: 22px 8px 18px 24px;
  display: grid;
  place-items: center;
}
.brick-wall {
  position: relative;
  width: 90%;
  height: 76%;
  overflow: hidden;
  border: 2px solid #8d62dd;
  border-radius: 4px;
  opacity: .82;
  background-color: #f5efff;
  box-shadow: inset 0 0 30px rgba(126,79,213,.07);
}
.brick-wall > i {
  position: absolute;
  z-index: 2;
  bottom: -2px;
  border: 2px solid #8d62dd;
  background: white;
  box-shadow: 0 0 0 2px white;
}
.door-cut {
  left: 21%;
  width: 22%;
  height: 54%;
}
.window-cut {
  right: 17%;
  bottom: 28% !important;
  width: 27%;
  height: 31%;
}
.dimension {
  position: absolute;
  color: #887e91;
  font-size: 8px;
  font-weight: 700;
}
.dimension.width {
  bottom: 0;
}
.dimension.height {
  left: -6px;
  transform: rotate(-90deg);
}
.preview-total {
  padding: 17px 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-top: 1px solid var(--line);
}
.preview-total span, .preview-row span {
  color: var(--muted);
  font-size: 10px;
}
.preview-total strong {
  color: var(--purple-dark);
  font-size: 25px;
  letter-spacing: -.04em;
}
.preview-total small {
  font-size: 10px;
}
.preview-row {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  font-size: 9px;
}
.preview-row strong {
  text-align: right;
}
.preview-row.highlighted {
  margin: 4px -10px 0;
  padding: 13px 10px;
  border: 0;
  border-radius: 9px;
  color: var(--purple-dark);
  background: var(--purple-soft);
}
.preview-row.highlighted span {
  color: var(--purple-dark);
  font-weight: 700;
}
.preview-note {
  margin: 16px 0 0;
  color: #92889c;
  font-size: 8px;
  line-height: 1.5;
  text-align: center;
}
.result-heading {
  display: flex;
  align-items: center;
  gap: 15px;
}
.result-check {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 15px;
  color: white;
  background: linear-gradient(145deg, #7d45e3, #5420ad);
  box-shadow: 0 8px 18px rgba(92, 42, 187, .22);
  font-size: 18px;
}
.result-heading .eyebrow {
  margin: 0 0 3px;
  font-size: 8px;
}
.result-heading h2 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -.03em;
}
.result-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.buy-summary {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.summary-title {
  padding: 18px 19px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.summary-title .eyebrow {
  margin-bottom: 3px;
  font-size: 7px;
}
.summary-title h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: -.02em;
}
.estimate-badge {
  padding: 5px 8px;
  border-radius: 99px;
  color: #645770;
  background: #f2eef5;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.hero-results {
  padding: 0 18px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hero-result {
  min-height: 103px;
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  column-gap: 7px;
  border: 1px solid #e7dfee;
  border-radius: 13px;
  background: #faf8fc;
}
.hero-result.purple {
  border-color: #d8c2f7;
  background: linear-gradient(135deg, #f5eeff, #fbf9ff);
}
.hero-result span {
  grid-column: 1 / -1;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hero-result strong {
  color: var(--purple-dark);
  font-size: 31px;
  line-height: 1;
  letter-spacing: -.05em;
}
.hero-result small {
  align-self: end;
  padding-bottom: 3px;
  color: #7e7388;
  font-size: 8px;
}
.summary-table {
  border-top: 1px solid var(--line);
}
.summary-row {
  min-height: 39px;
  padding: 9px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #f0ebf3;
}
.summary-row:last-child {
  border-bottom: 0;
}
.summary-row span {
  color: var(--muted);
  font-size: 9px;
}
.summary-row strong {
  font-size: 9px;
  text-align: right;
}
.outline-action, .primary-action {
  min-height: 49px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 800;
}
.outline-action {
  border: 1px solid #d9cee5;
  color: var(--purple-dark);
  background: white;
}
.outline-action span, .primary-action span {
  margin-right: 5px;
  font-size: 13px;
}
.primary-action {
  box-shadow: 0 8px 18px rgba(93,39,189,.2);
}
.share-button {
  width: 100%;
  margin-top: 18px;
  padding: 13px 15px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 13px;
  border: 0;
  border-radius: 18px;
  color: #ffbd24;
  background: #4b184f;
  text-align: left;
  box-shadow: 0 8px 18px rgba(75,24,79,.18);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.share-button > svg {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: rgba(255,189,36,.13);
}
.share-button span {
  display: grid;
  gap: 2px;
}
.share-button strong {
  font-size: 14px;
}
.share-button small {
  color: #f0d8ee;
  font-size: 11px;
}
.share-button > b {
  color: #ffbd24;
  font-size: 23px;
  font-weight: 700;
}
.share-button:hover {
  background: #5b1d60;
  box-shadow: 0 10px 22px rgba(75,24,79,.22);
}
.share-button:active {
  transform: scale(.99);
}
.recalculate {
  width: 100%;
  margin-top: 13px;
  padding: 5px;
  border: 0;
  color: #796e84;
  background: none;
  font-size: 9px;
  font-weight: 700;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 166px;
  z-index: 20;
  padding: 11px 16px;
  transform: translateX(-50%);
  border: 1px solid #d7cae7;
  border-radius: 11px;
  color: var(--purple-dark);
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 32px rgba(52,28,70,.16);
  font-size: 10px;
  font-weight: 800;
  animation: toast-in .25s ease both;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}
.floating-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 6px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 13px 32px;
  transform: translateX(-50%);
  border: 1px solid rgba(202,190,255,.78);
  border-radius: 999px;
  background: linear-gradient(135deg,rgba(255,255,255,.88),rgba(245,242,255,.74));
  box-shadow: 0 18px 42px rgba(61,36,112,.22), inset 0 1px 1px rgba(255,255,255,.94);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
.floating-navigation-button {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 auto;
  padding: 0;
  color: #6940cf;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background: linear-gradient(145deg,rgba(255,255,255,.95),rgba(242,239,255,.83));
  box-shadow: 0 9px 20px rgba(93,70,160,.16), inset 0 1px 0 rgba(255,255,255,.95);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.floating-navigation-button:hover {
  transform: translateY(-3px);
  background: #fff;
  box-shadow: 0 13px 24px rgba(89,60,158,.22), inset 0 1px 0 #fff;
}
.floating-navigation-button:active {
  transform: translateY(0) scale(.96);
}
.floating-navigation-button:focus-visible {
  outline: 3px solid rgba(105,64,207,.35);
  outline-offset: 4px;
}
.floating-navigation-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
.floating-navigation-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.floating-navigation-button--share {
  color: var(--yellow);
  border-color: rgba(93,35,106,.8);
  background: linear-gradient(145deg,#77336b,#501650);
  box-shadow: 0 11px 23px rgba(75,24,79,.34), inset 0 1px 0 rgba(255,255,255,.17);
}
.floating-navigation-button--share:hover {
  background: linear-gradient(145deg,#8a3a7a,#5b1d60);
  box-shadow: 0 15px 27px rgba(75,24,79,.42), inset 0 1px 0 rgba(255,255,255,.2);
}
.floating-navigation-button > span:not(.floating-navigation-icon) {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.oc-offline-status {
  position: fixed !important;
  top: 3px !important;
  right: auto !important;
  left: 50% !important;
  bottom: auto !important;
  z-index: 50 !important;
  width: max-content !important;
  max-width: min(300px, calc(100% - 24px));
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #746d79 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 700 9px/1.15 inherit !important;
  letter-spacing: .01em;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.oc-offline-status::before {
  width: 5px !important;
  height: 5px !important;
  margin-right: 4px !important;
  vertical-align: 1px !important;
}
.oc-offline-status[data-state="error"] {
  border: 0 !important;
  color: #8b6119 !important;
  background: transparent !important;
}
.confirm-modal__backdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(32,19,39,.5);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.confirm-modal {
  width: min(100%, 460px);
  padding: 32px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 28px;
  color: #261d2b;
  background: linear-gradient(145deg, #fff, #faf7fd 72%, #f7f0fb);
  box-shadow: 0 28px 80px rgba(31,18,38,.38), 0 8px 24px rgba(79,38,95,.12);
  text-align: center;
}
.confirm-modal__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #6331be;
  background: linear-gradient(145deg, #f5eafd, #eadcf8);
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
}
.confirm-modal__icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.confirm-modal__icon strong {
  font-size: 30px;
  font-weight: 800;
}
.confirm-modal__icon--home {
  color: #5d3ab5;
  background: linear-gradient(145deg, #eee7ff, #e0d7fb);
}
.confirm-modal__icon--warning {
  color: #8a6414;
  background: linear-gradient(145deg, #fff4d0, #ffe9ae);
}
.confirm-modal h2 {
  margin: 0;
  color: #241d2b;
  font-size: 23px;
  letter-spacing: -.04em;
}
.confirm-modal p {
  max-width: 350px;
  margin: 11px auto 26px;
  color: #756d7c;
  font-size: 13px;
  line-height: 1.6;
}
.confirm-modal footer {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 10px;
}
.confirm-modal footer.confirm-modal__single-action {
  grid-template-columns: 1fr;
}
.confirm-modal footer button {
  min-height: 48px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 800;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.confirm-modal footer button:active {
  transform: scale(.98);
}
.confirm-modal footer button:focus-visible {
  outline: 3px solid rgba(105,64,207,.32);
  outline-offset: 3px;
}
.confirm-modal__cancel {
  border: 1px solid #e4d9eb;
  color: #6c6171;
  background: #f8f1fc;
}
.confirm-modal__cancel:hover {
  background: #f1e7f8;
}
.confirm-modal__confirm {
  border: 0;
  color: #ffca3f;
  background: #511658;
  box-shadow: 0 10px 22px rgba(75,24,79,.25);
}
.confirm-modal__confirm:hover {
  background: #612063;
  box-shadow: 0 13px 25px rgba(75,24,79,.32);
}
.virtual-keyboard__backdrop {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  background: rgba(32,19,39,.42);
  backdrop-filter: blur(4px);
}
.virtual-keyboard {
  width: min(100%, 520px);
  padding: 18px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 25px;
  background: white;
  box-shadow: 0 -16px 60px rgba(31,18,38,.3), 0 18px 60px rgba(31,18,38,.18);
}
.virtual-keyboard__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.virtual-keyboard__header .eyebrow {
  margin: 0 0 4px;
  color: #82518e;
  font-size: 10px;
}
.virtual-keyboard__header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  letter-spacing: -.035em;
}
.virtual-keyboard__close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0 0 3px;
  border: 1px solid #e5dce8;
  border-radius: 11px;
  color: #6d5b72;
  background: #faf7fc;
  font-size: 22px;
  line-height: 1;
}
.virtual-keyboard__value {
  min-height: 58px;
  margin-top: 13px;
  padding: 9px 14px;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  border-radius: 16px;
  background: #f8f1fb;
}
.virtual-keyboard__value strong {
  color: #4b184f;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.045em;
}
.virtual-keyboard__value em {
  color: #746d79;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}
.virtual-keyboard__preview {
  margin-top: 12px;
  padding: 6px 10px 2px;
  border: 1px solid #eadfeb;
  border-radius: 16px;
  background: #fbf8fd;
}
.virtual-keyboard__preview svg {
  width: 100%;
  height: 94px;
  display: block;
  overflow: visible;
}
.keyboard-preview__shape {
  stroke: #8b5b95;
  stroke-width: 2;
  fill: #f1e4f5;
}
.keyboard-preview__shape.is-opening {
  stroke: #6d8da7;
  fill: #e7f3fb;
}
.keyboard-preview__inner {
  stroke: #8ba3b5;
  stroke-width: 1.5;
  fill: rgba(255,255,255,.74);
}
.keyboard-preview__measure {
  stroke: #b9a5bf;
  stroke-width: 1.5;
}
.keyboard-preview__measure.is-active {
  stroke: #d7a916;
  stroke-width: 2.5;
}
.keyboard-preview__label {
  fill: #87788d;
  font: 700 7px Manrope, sans-serif;
}
.keyboard-preview__label.is-active {
  fill: #8a6414;
}
.virtual-keyboard__keys {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.virtual-keyboard__key {
  min-height: 43px;
  border: 1px solid #e5d9eb;
  border-radius: 13px;
  color: #4f2558;
  background: #fbf5fd;
  font-size: 19px;
  font-weight: 750;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
  transition: transform .12s ease, background .12s ease;
}
.virtual-keyboard__key:active {
  transform: scale(.97);
  background: #f2e5f7;
}
.virtual-keyboard__key:disabled {
  cursor: default;
  opacity: .42;
}
.virtual-keyboard__key--delete {
  color: #78466f;
  font-size: 21px;
}
.virtual-keyboard__actions {
  margin-top: 11px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 8px;
}
.virtual-keyboard__actions button {
  min-height: 46px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 800;
}
.virtual-keyboard__clear {
  border: 1px solid #e4d9eb;
  color: #704775;
  background: #fff;
}
.virtual-keyboard__done {
  border: 0;
  color: #ffca3f;
  background: #511658;
  box-shadow: 0 7px 14px rgba(75,24,79,.2);
}
.share-modal__backdrop {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(26,20,30,.58);
}
.share-modal {
  width: 100%;
  max-width: 620px;
  max-height: min(90vh, 790px);
  overflow: auto;
  padding: 26px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 28px;
  background: white;
  box-shadow: 0 30px 90px rgba(26,20,30,.28);
}
.share-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.share-modal__header .eyebrow {
  margin-bottom: 7px;
}
.share-modal__header h2 {
  margin: 0;
  font-size: 27px;
  letter-spacing: -.04em;
}
.share-modal__header p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.share-modal__close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px;
  border: 0;
  border-radius: 11px;
  color: #5d5361;
  background: #f4f0f5;
  font-size: 23px;
}
.share-modal__toolbar {
  display: flex;
  gap: 14px;
  margin: 20px 2px 12px;
}
.share-modal__toolbar button {
  padding: 0;
  border: 0;
  color: var(--purple);
  background: transparent;
  font-size: 12px;
  font-weight: 750;
}
.share-options {
  display: grid;
  gap: 9px;
}
.share-option {
  display: grid;
  grid-template-columns: auto 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: #f7f4f8;
  cursor: pointer;
}
.share-option:has(input:checked) {
  border-color: #d7c3dc;
}
.share-option input {
  width: 18px;
  height: 18px;
  accent-color: #82518e;
}
.share-option__symbol {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #70417a;
  background: linear-gradient(145deg, #fff, #eee2f1);
  box-shadow: inset 0 1px 0 white;
  font-size: 20px;
  font-weight: 800;
}
.share-option > span:not(.share-option__symbol) {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.share-option strong {
  color: #4f4953;
  font-size: 13px;
}
.share-option small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.share-option > b {
  color: var(--ink);
  font-size: 13px;
  text-align: right;
}
.share-modal__error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  color: #9a4936;
  background: #fff1ed;
  font-size: 12px;
}
.share-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.pdf-button {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 800;
}
.pdf-button:disabled {
  cursor: wait;
  opacity: .55;
}
.pdf-button--ghost {
  border: 1px solid var(--line);
  color: var(--ink);
  background: white;
}
.pdf-button--share {
  color: white;
  background: #201c26;
  box-shadow: 0 8px 18px rgba(32,28,38,.16);
}
@media (max-width: 860px) {
  .content-grid, .content-grid.result-layout {
    grid-template-columns: 1fr;
  }
  .preview-card {
    position: static;
  }
  .area-visual {
    height: 190px;
  }
  .brick-wall {
    max-width: 360px;
  }
}
@media (max-width: 620px) {
  .topbar {
    height: 66px;
  }
  .page-wrap {
    width: calc(100% - 32px);
    padding-top: 24px;
  }
  .brand--oc-calc {
    width: 188px;
    height: 60px;
  }
  .brand--oc-calc img {
    width: 230px;
  }
  .breadcrumb {
    margin-bottom: 24px;
    overflow: hidden;
    white-space: nowrap;
  }
  .intro {
    align-items: flex-start;
    flex-direction: column;
  }
  .intro p {
    font-size: 16px;
  }
  .steps {
    margin: 28px auto 31px;
  }
  .step-line {
    min-width: 12px;
    margin-inline: 5px;
  }
  .step b {
    font-size: 8px;
  }
  .form-card {
    padding: 23px 18px;
    border-radius: 18px;
  }
  .field-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .subheading-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .secondary-button {
    width: 100%;
  }
  .opening-fields {
    grid-template-columns: 1fr 1fr;
  }
  .openings-box {
    padding: 15px;
  }
  .openings-box__heading {
    align-items: flex-start;
  }
  .opening-item {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 30px;
  }
  .opening-item__name {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
  .block-options {
    grid-template-columns: 1fr 1fr;
  }
  .custom-fields {
    grid-template-columns: 1fr;
  }
  .mortar-modes {
    grid-template-columns: 1fr;
  }
  .mortar-preview {
    grid-template-columns: 1fr auto;
  }
  .mortar-preview b {
    grid-column: 2;
    grid-row: 2;
  }
  .mortar-preview small {
    grid-row: 3;
    margin: 0;
  }
  .step-actions.has-back {
    display: grid;
    grid-template-columns: 1fr;
  }
  .step-actions.has-back .primary-button {
    grid-row: 1;
  }
  .back-button {
    grid-row: 2;
  }
  .hero-results {
    grid-template-columns: 1fr;
  }
  .result-heading {
    align-items: flex-start;
  }
  .result-heading p {
    line-height: 1.45;
  }
  .area-visual {
    height: 165px;
  }
  .share-modal__backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .share-modal {
    max-height: 92vh;
    padding: 21px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 26px 26px 0 0;
  }
  .share-modal__header h2 {
    font-size: 23px;
  }
  .share-option {
    gap: 9px;
    padding: 11px;
  }
  .share-option > b {
    font-size: 12px;
  }
  .share-modal__footer {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  }
  .pdf-button {
    min-width: 0;
    padding: 0 10px;
    white-space: normal;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}
body {
  font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(130,81,142,.22);
  outline-offset: 2px;
}
.steps {
  width: min(720px, 100%);
  margin: 30px auto 32px;
}
.step {
  color: #958c99;
  font-size: 11px;
}
.step span {
  width: 36px;
  height: 36px;
  border-color: #dfd6e2;
  box-shadow: 0 5px 14px rgba(60,35,66,.04);
}
.step.is-active {
  color: #623268;
}
.step.is-active span {
  border-color: #4b184f;
  color: #ffbd24;
  background: #4b184f;
  box-shadow: 0 6px 16px rgba(75,24,79,.17);
}
.step.is-complete {
  color: #74477b;
}
.step.is-complete span {
  border-color: #dec6e2;
  color: #71427a;
  background: #f8ebf9;
}
.step-line {
  margin: 0;
  background: #e5dfe7;
}
.step-line.is-filled {
  background: #cdaed3;
}
.content-grid, .content-grid.result-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  gap: 22px;
}
.form-card, .preview-card {
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--surface);
  box-shadow: 0 12px 40px rgba(43,28,49,.035);
}
.form-card {
  padding: 30px;
}
.preview-card {
  top: 100px;
  padding: 30px;
}
.card-heading {
  gap: 15px;
}
.heading-number, .icon-box {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: transparent;
}
.icon-box--art {
  overflow: visible;
}
.icon-box--art img {
  width: 72px;
  height: 72px;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 6px 7px rgba(71,41,78,.19));
}
.card-heading h2, .preview-heading h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -.03em;
}
.card-heading p, .preview-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.card-step {
  display: block;
  margin-bottom: 2px;
  color: var(--purple);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.field-grid {
  gap: 14px;
  margin-top: 26px;
}
.field {
  display: block;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: white;
  transition: border .15s, background .15s, box-shadow .15s;
}
.field > span {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 680;
}
.field:focus-within {
  border-color: #b783c0;
  box-shadow: 0 0 0 3px rgba(183,131,192,.14);
}
.field--required {
  border-color: #edcc70;
  background: #fffaf0;
}
.field--required:focus-within {
  border-color: #d9ae36;
  box-shadow: 0 0 0 3px rgba(217,174,54,.16);
}
.input-shell, .field.compact .input-shell {
  height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.input-shell:focus-within {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.input-shell input, .field.compact .input-shell input {
  padding: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 720;
}
.input-shell em {
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.field select {
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 16px;
}
.section-divider {
  margin: 28px 0 24px;
}
.subheading-row h3 {
  font-size: 18px;
}
.subheading-row p {
  font-size: 13px;
}
.secondary-button, .back-button, .outline-action {
  border: 1px solid #e6dce8;
  color: #72487b;
  background: #f7f3f8;
}
.secondary-button {
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 12px;
}
.secondary-button:hover, .back-button:hover, .outline-action:hover {
  background: #f0e6f2;
}
.empty-opening {
  min-height: 94px;
  margin-top: 18px;
  padding: 20px;
  border-color: #d8cadc;
  border-radius: 20px;
  background: radial-gradient(circle at 76% 15%, #fff 0, #faf7fb 46%, #f8f4fa 100%);
}
.opening-icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  color: #71427a;
  background: var(--yellow);
  font-size: 22px;
  box-shadow: none;
}
.empty-opening strong {
  font-size: 13px;
}
.empty-opening small {
  font-size: 11px;
}
.opening-card {
  padding: 16px;
  border-radius: 18px;
  background: #fbf9fc;
}
.opening-card-top strong {
  font-size: 13px;
}
.opening-card-top button {
  color: #9a4936;
  font-size: 11px;
}
.primary-button, .primary-action {
  min-height: 52px;
  border-radius: 18px;
  color: #ffbd24;
  background: #4b184f;
  box-shadow: 0 7px 18px rgba(75,24,79,.16);
  font-size: 13px;
}
.primary-button:hover, .primary-action:hover {
  background: #5b1d60;
  box-shadow: 0 9px 22px rgba(75,24,79,.2);
}
.back-button {
  min-height: 52px;
  border-radius: 16px;
  font-size: 13px;
}
.helper-text {
  font-size: 11px;
}
.choice-toggle {
  margin-top: 26px;
  padding: 5px;
  border-color: #e8e0ea;
  border-radius: 17px;
  background: #f7f3f8;
}
.choice-toggle button {
  height: 52px;
  border-radius: 13px;
  font-size: 13px;
}
.choice-toggle button.is-selected {
  color: #71427a;
  box-shadow: 0 4px 14px rgba(71,41,78,.08);
}
.choice-toggle-icon {
  width: 34px;
  height: 34px;
}
.section-label {
  margin-top: 26px;
}
.section-label strong {
  font-size: 14px;
}
.section-label span {
  font-size: 11px;
}
.block-options {
  gap: 12px;
}
.block-option {
  height: 126px;
  border-color: var(--line);
  border-radius: 19px;
}
.block-option:hover {
  border-color: #cfb6d5;
}
.block-option.is-selected {
  border-color: #b783c0;
  color: #64376c;
  background: var(--purple-soft);
  box-shadow: inset 0 0 0 1px #b783c0;
}
.block-option strong {
  font-size: 12px;
}
.block-option small {
  font-size: 10px;
}
.block-option > em {
  width: 20px;
  height: 20px;
  color: #ffbd24;
  background: #4b184f;
}
.block-shape {
  width: 58px;
  height: 35px;
  color: #8b5b95;
  background: linear-gradient(135deg, #efd8f2, #dceeff);
  border: 3px solid white;
  box-shadow: 0 7px 16px rgba(52,38,57,.14);
}
.block-shape.concreto {
  color: #797681;
  background: linear-gradient(135deg, #e6e4e9, #cdd7e8);
}
.custom-plus {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: white;
}
.custom-fields, .industrial-card {
  border-radius: 20px;
  background: #f8f5f9;
}
.block-card-icon {
  --block-image-scale: .96;
  position: relative;
  width: 92px;
  height: 68px;
  margin: 0 0 2px;
  display: grid;
  place-items: center;
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
}
.block-option:hover .block-card-icon,
.block-option.is-selected .block-card-icon {
  transform: translateY(-4px) scale(1.04);
}
.block-card-icon--slim {
  --block-image-scale: .86;
}
.block-card-icon--narrow {
  --block-image-scale: .92;
}
.block-card-icon--medium {
  --block-image-scale: .98;
}
.block-card-icon--wide {
  --block-image-scale: 1.04;
}
.block-card-icon__image {
  max-width: none;
  object-fit: contain;
  transform: scale(var(--block-image-scale));
  transition: transform .24s cubic-bezier(.2,.8,.2,1), filter .24s ease;
}
.block-card-icon--ceramico .block-card-icon__image {
  width: 76px;
  height: 66px;
  filter: drop-shadow(0 9px 6px rgba(115,51,29,.2));
}
.block-card-icon--concreto .block-card-icon__image {
  width: 82px;
  height: 66px;
  object-fit: contain;
  filter: drop-shadow(0 9px 6px rgba(57,54,66,.2));
}
.block-card-icon--custom .block-card-icon__image {
  width: 76px;
  height: 66px;
  opacity: .96;
  filter: grayscale(1) brightness(2.45) contrast(.48) drop-shadow(0 9px 6px rgba(74,49,79,.18));
}
.block-card-icon--concreto.block-card-icon--custom .block-card-icon__image {
  width: 82px;
  filter: grayscale(1) brightness(1.78) contrast(.62) drop-shadow(0 9px 6px rgba(74,49,79,.18));
}
.block-card-icon__custom-badge {
  position: absolute;
  right: 3px;
  bottom: 6px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 2px solid white;
  border-radius: 50%;
  color: #ffca47;
  background: #4b184f;
  box-shadow: 0 5px 11px rgba(75,24,79,.24);
  font-size: 16px;
  font-weight: 650;
  line-height: 1;
}
.mortar-modes {
  gap: 14px;
}
.mortar-mode {
  min-height: 94px;
  padding: 14px 16px;
  border-radius: 19px;
}
.mortar-mode.is-selected {
  border-color: #b783c0;
  background: var(--purple-soft);
  box-shadow: inset 0 0 0 1px #b783c0;
}
.mortar-mode strong {
  font-size: 13px;
}
.mortar-mode small {
  font-size: 10px;
}
.mortar-mode > i {
  width: 20px;
  height: 20px;
  color: #ffbd24;
  background: #4b184f;
}
.mode-art {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
}
.mode-art img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(48,31,54,.19));
}
.mix-icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--slate);
}
.industrial-card {
  padding: 22px;
}
.industrial-title > span {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #71427a;
  background: white;
}
.industrial-title strong {
  font-size: 13px;
}
.industrial-title small {
  font-size: 10px;
}
.mortar-preview {
  min-height: 74px;
  padding: 16px 18px;
  border: 0;
  border-radius: 19px;
  background: var(--coral);
}
.mortar-preview span {
  font-size: 11px;
}
.mortar-preview strong {
  color: #82452f;
  font-size: 22px;
}
.mortar-preview b {
  color: #71427a;
  background: white;
  font-size: 11px;
}
.mortar-preview small {
  font-size: 10px;
}
.mix-ratio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.on-site-fields {
  margin-top: 12px;
}
.on-site-fields .field:last-child {
  grid-column: 1 / -1;
}
.mix-reference {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid #ead79e;
  border-radius: 14px;
  color: #715920;
  background: #fff9e8;
  font-size: 10px;
  line-height: 1.55;
}
.site-mortar-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.site-mortar-preview > div {
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  background: #f4e4f6;
  box-shadow: inset 0 0 0 1px rgba(75,24,79,.045);
}
.site-mortar-preview > div:nth-child(2) {
  background: #fff1e8;
}
.site-mortar-preview > div:nth-child(3) {
  background: #e9f5ed;
}
.site-mortar-preview span, .site-mortar-preview small {
  display: block;
  color: var(--muted);
  font-size: 9px;
}
.site-mortar-preview strong {
  display: block;
  margin: 5px 0 2px;
  color: #4b184f;
  font-size: 22px;
  line-height: 1;
}
.execution-form {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #e7dce9;
  border-radius: 20px;
  background: linear-gradient(135deg, #fbf7fc, #f3fbf5);
}
.execution-form h3 {
  margin: 4px 0 0;
  font-size: 17px;
  letter-spacing: -.025em;
}
.execution-form p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.execution-fields {
  margin-top: 18px;
}
.execution-fields .field:last-child {
  grid-column: 1 / -1;
}
.preview-heading {
  display: flex;
  align-items: center;
  gap: 15px;
}
.area-visual {
  min-height: 260px;
  height: auto;
  margin: 26px 0;
  padding: 30px 34px;
  border: 1px dashed #cbbbd0;
  border-radius: 22px;
  background: radial-gradient(circle at 76% 15%, #fff 0, #faf7fb 46%, #f8f4fa 100%);
}
.brick-wall {
  width: min(90%, 360px);
  height: auto;
  aspect-ratio: var(--wall-aspect-ratio, 2.25);
  border: 3px solid white;
  border-radius: 9px;
  opacity: 1;
  background-color: #e98b62;
  box-shadow: 0 12px 26px rgba(52,38,57,.14), inset 0 1px 0 rgba(255,255,255,.7);
}
.block-pagination {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(var(--course-count), minmax(0, 1fr));
}
.block-course {
  min-width: 0;
  display: flex;
  overflow: hidden;
}
.wall-block {
  min-width: 1px;
  flex: 0 0 auto;
  border-right: 1px solid #b9552b;
  border-bottom: 1px solid #b9552b;
  background: linear-gradient(145deg, #f7b08a, #d86635);
  box-shadow: inset 1px 1px 0 rgba(255,238,226,.58);
}
.block-course:nth-child(even) .wall-block {
  background: linear-gradient(145deg, #f4a077, #c95529);
}
.wall-block.is-cut {
  background-color: rgba(122,76,133,.08);
}
.wall-block.is-half {
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 3px, transparent 3px 7px), linear-gradient(145deg, #f7b08a, #d86635);
  border-right-width: 2px;
}
.block-course:nth-child(even) .wall-block.is-half {
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 3px, transparent 3px 7px), linear-gradient(145deg, #f4a077, #c95529);
}
.brick-wall--concreto {
  background-color: #e9e8ec;
}
.brick-wall--concreto .wall-block {
  border-color: #aaa7b0;
  background: linear-gradient(145deg, rgba(255,255,255,.34), rgba(113,109,122,.08));
}
.brick-wall--concreto .block-course:nth-child(even) .wall-block {
  background: linear-gradient(145deg, rgba(255,255,255,.45), rgba(113,109,122,.13));
}
.brick-wall--concreto .wall-block.is-half {
  background-image: repeating-linear-gradient(135deg, rgba(85,79,95,.16) 0 3px, transparent 3px 7px), linear-gradient(145deg, rgba(255,255,255,.34), rgba(113,109,122,.08));
}
.wall-opening {
  position: absolute;
  z-index: 3;
  display: block;
  min-width: 7px;
  min-height: 12px;
  padding: 0;
  border: 2px solid #76527e;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,240,248,.96));
  box-shadow: 0 0 0 2px rgba(255,255,255,.88), 0 5px 8px rgba(75,24,79,.12);
  cursor: pointer;
}
.wall-opening:hover, .wall-opening:focus-visible {
  z-index: 5;
  outline: 2px solid #ffbd24;
  outline-offset: 3px;
}
.wall-opening--janela {
  border-bottom: 2px solid #76527e;
  border-radius: 2px;
  background: linear-gradient(135deg, #e9f6ff, #d9eaf9);
}
.wall-opening__lintel, .wall-opening__contralintel {
  position: absolute;
  z-index: 1;
  display: block;
  left: calc(-1 * var(--lintel-left));
  right: calc(-1 * var(--lintel-right));
  min-width: 12px;
  height: var(--lintel-height);
  border: 1px solid #8c9198;
  border-radius: 3px;
  background-color: #aeb3b9;
  background-image: radial-gradient(circle at 18% 30%, rgba(255,255,255,.48) 0 1px, transparent 1.5px), radial-gradient(circle at 72% 65%, rgba(63,68,74,.28) 0 1px, transparent 1.5px), linear-gradient(145deg, #d7dadd, #979da4 58%, #c6cacf);
  background-size: 7px 7px, 9px 9px, 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(60,64,70,.22), 0 2px 3px rgba(45,48,54,.28);
}
.wall-opening__lintel {
  top: calc(-1 * var(--lintel-height));
}
.wall-opening__contralintel {
  bottom: calc(-1 * var(--lintel-height));
}
.dimension {
  color: #493450;
  font-size: 11px;
  font-weight: 820;
}
.dimension.width {
  bottom: 15px;
}
.dimension.height {
  left: 2px;
}
.preview-total {
  min-height: 82px;
  margin-top: 0;
  padding: 15px 18px;
  border: 0;
  border-radius: 19px;
  background: var(--green);
}
.preview-total span, .preview-row span {
  font-size: 12px;
}
.preview-total strong {
  color: #315e3c;
  font-size: 30px;
}
.preview-total small {
  font-size: 12px;
}
.preview-row {
  min-height: 48px;
  padding: 12px 16px;
  border-top: 0;
  border-bottom: 1px solid #eee8f0;
  font-size: 12px;
}
.preview-row.highlighted {
  min-height: 62px;
  margin: 12px 0 0;
  padding: 15px 17px;
  border-radius: 19px;
  color: #71427a;
  background: var(--yellow);
}
.preview-row.highlighted span {
  color: #71427a;
}
.preview-note {
  font-size: 11px;
  line-height: 1.5;
}
.result-heading {
  gap: 16px;
}
.result-check {
  width: 68px;
  height: 68px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.result-check img {
  width: 78px;
  height: 78px;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 7px 7px rgba(71,41,78,.18));
}
.result-heading .eyebrow {
  font-size: 10px;
}
.result-heading h2 {
  font-size: 25px;
}
.result-heading p {
  font-size: 13px;
}
.buy-summary {
  border-radius: 22px;
}
.summary-title {
  padding: 20px 21px 16px;
}
.summary-title h3 {
  font-size: 18px;
}
.estimate-badge {
  color: #71427a;
  background: var(--purple-soft);
  font-size: 9px;
}
.hero-results {
  padding: 0 20px 18px;
  gap: 12px;
}
.hero-result {
  min-height: 112px;
  border: 0;
  border-radius: 19px;
  background: var(--coral);
}
.hero-result.purple {
  border: 0;
  background: var(--green);
}
.hero-result span {
  font-size: 10px;
}
.hero-result strong {
  color: #4b184f;
  font-size: 34px;
}
.hero-result small {
  font-size: 10px;
}
.summary-row {
  min-height: 47px;
  padding: 11px 20px;
}
.summary-row span, .summary-row strong {
  font-size: 11px;
}
.outline-action, .primary-action {
  min-height: 54px;
  border-radius: 18px;
  font-size: 12px;
}
.recalculate {
  font-size: 11px;
}
.toast {
  border-color: #d7c3dc;
  color: #71427a;
  font-size: 12px;
}
@media (max-width: 980px) {
  .content-grid, .content-grid.result-layout {
    grid-template-columns: 1fr;
  }
  .preview-card {
    position: static;
  }
}
@media (max-width: 640px) {
  .mvp-badge {
    font-size: 11px;
    padding: 7px 10px;
  }
  .steps {
    margin: 26px auto 28px;
  }
  .step span {
    width: 32px;
    height: 32px;
  }
  .step-line {
    margin-top: 16px;
  }
  .form-card, .preview-card {
    padding: 21px;
    border-radius: 24px;
  }
  .heading-number, .icon-box {
    width: 48px;
    height: 48px;
  }
  .icon-box--art img {
    width: 64px;
    height: 64px;
  }
  .card-heading h2, .preview-heading h2 {
    font-size: 20px;
  }
  .card-heading p, .preview-heading p {
    font-size: 12px;
  }
  .field-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .mix-ratio-grid, .site-mortar-preview, .on-site-fields {
    grid-template-columns: 1fr;
  }
  .on-site-fields .field:last-child {
    grid-column: auto;
  }
  .field {
    padding: 11px 12px;
  }
  .input-shell input, .field.compact .input-shell input {
    font-size: 18px;
  }
  .block-options {
    grid-template-columns: 1fr 1fr;
  }
  .area-visual {
    min-height: 240px;
    padding: 24px 20px;
  }
  .brick-wall {
    height: auto;
  }
}
@media (max-width: 420px) {
  .brand--oc-calc {
    width: 188px;
  }
  .brand--oc-calc img {
    width: 230px;
  }
  .block-option {
    height: 116px;
  }
  .area-visual {
    min-height: 220px;
  }
  .brick-wall {
    height: auto;
  }
}
.oc-icon {
  --glyph-ink: #5e2a65;
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(93, 42, 101, .08);
  border-radius: 21px;
  background: linear-gradient(145deg, #fbf3fc 0%, #f1dff4 100%);
  box-shadow: 0 10px 24px rgba(74, 35, 80, .12), inset 0 1px 0 rgba(255,255,255,.92);
  isolation: isolate;
}
.oc-icon::before {
  content: '';
  position: absolute;
  right: -13px;
  top: -15px;
  width: 39px;
  height: 39px;
  border: 8px solid rgba(255,255,255,.43);
  border-radius: 50%;
}
.oc-icon::after {
  content: '';
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 7px;
  height: 7px;
  border-radius: 3px;
  background: #ffbd24;
  box-shadow: 0 2px 5px rgba(124,79,0,.18);
}
.oc-icon--small {
  width: 52px;
  height: 52px;
  border-radius: 17px;
}
.oc-icon--small .oc-glyph {
  transform: scale(.82);
}
.oc-glyph {
  position: relative;
  z-index: 1;
  display: block;
}
.oc-icon--wall {
  background: linear-gradient(145deg, #f9effa, #efd9f2);
}
.oc-glyph--wall {
  width: 42px;
  height: 35px;
  transform: rotate(-2deg);
}
.oc-glyph--wall i {
  position: absolute;
  height: 9px;
  border: 2px solid var(--glyph-ink);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 3px 0 rgba(94,42,101,.1);
}
.oc-glyph--wall i:nth-child(1) {
  left: 1px;
  top: 1px;
  width: 18px;
}
.oc-glyph--wall i:nth-child(2) {
  right: 1px;
  top: 1px;
  width: 19px;
  background: #ffe09a;
}
.oc-glyph--wall i:nth-child(3) {
  left: 1px;
  top: 13px;
  width: 25px;
  background: #ead7f1;
}
.oc-glyph--wall i:nth-child(4) {
  right: 1px;
  top: 13px;
  width: 12px;
}
.oc-glyph--wall i:nth-child(5) {
  left: 7px;
  top: 25px;
  width: 34px;
  background: #fff6db;
}
.oc-icon--block {
  background: linear-gradient(145deg, #eef6ff, #dcecff);
}
.oc-icon--block::after {
  background: #a9d7ff;
}
.oc-glyph--block {
  width: 42px;
  height: 30px;
  margin-top: 5px;
  border: 2px solid var(--glyph-ink);
  border-radius: 7px;
  background: linear-gradient(145deg, #ead4ef, #dcbce2);
  box-shadow: 0 6px 0 rgba(94,42,101,.11);
  transform: rotate(-3deg);
}
.oc-glyph--block::before {
  content: '';
  position: absolute;
  left: 5px;
  top: -9px;
  width: 31px;
  height: 11px;
  border: 2px solid var(--glyph-ink);
  border-radius: 5px 5px 2px 2px;
  background: #fff6d6;
  transform: skewX(-28deg);
}
.oc-glyph--block i {
  position: absolute;
  top: 7px;
  width: 11px;
  height: 12px;
  border: 2px solid var(--glyph-ink);
  border-radius: 4px;
  background: #fff;
}
.oc-glyph--block i:first-child {
  left: 6px;
}
.oc-glyph--block i:last-child {
  right: 6px;
}
.oc-icon--mortar {
  background: linear-gradient(145deg, #fff4e9, #ffe3d5);
}
.oc-icon--mortar::after {
  background: #ff8c68;
}
.oc-glyph--mortar {
  width: 31px;
  height: 39px;
  border: 2px solid var(--glyph-ink);
  border-radius: 6px 6px 10px 10px;
  background: linear-gradient(150deg, #fff, #f1ddf4);
  box-shadow: 0 5px 0 rgba(94,42,101,.1);
  transform: rotate(-2deg);
}
.oc-glyph--mortar .bag-fold {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 5px;
  height: 5px;
  border: 0;
  border-radius: 2px;
  background: #f1b128;
}
.oc-glyph--mortar .bag-label {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 4px;
  color: #ffcf4a;
  background: #5e2a65;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: -.04em;
}
.oc-glyph--mortar .trowel {
  position: absolute;
  right: -13px;
  bottom: 1px;
  width: 17px;
  height: 9px;
  border: 2px solid var(--glyph-ink);
  border-radius: 70% 12% 12% 70%;
  background: #b7dcf8;
  transform: rotate(-42deg);
}
.oc-glyph--mortar .trowel::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 1px;
  width: 8px;
  height: 4px;
  border-radius: 3px;
  background: var(--glyph-ink);
}
.oc-icon--mix {
  background: linear-gradient(145deg, #f2f3f7, #e5e8ef);
  filter: saturate(.65);
}
.oc-icon--mix::after {
  background: #a6acba;
}
.oc-glyph--mix {
  width: 39px;
  height: 38px;
}
.mix-bucket {
  position: absolute;
  left: 5px;
  bottom: 1px;
  width: 29px;
  height: 23px;
  border: 2px solid var(--glyph-ink);
  border-radius: 4px 4px 9px 9px;
  background: #fff;
}
.mix-bucket::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -5px;
  width: 35px;
  height: 7px;
  border: 2px solid var(--glyph-ink);
  border-radius: 5px;
  background: #cbd1dc;
}
.mix-rod {
  position: absolute;
  left: 20px;
  top: -2px;
  width: 4px;
  height: 28px;
  border-radius: 3px;
  background: var(--glyph-ink);
  transform: rotate(13deg);
}
.mix-rod::after {
  content: '';
  position: absolute;
  left: -4px;
  top: 0;
  width: 13px;
  height: 8px;
  border-radius: 4px;
  background: #f1b128;
}
.oc-icon--opening {
  background: linear-gradient(145deg, #fff7df, #ffedb6);
}
.oc-icon--opening::after {
  background: #7faac8;
}
.oc-glyph--opening {
  width: 37px;
  height: 37px;
}
.opening-frame {
  position: absolute;
  inset: 1px 6px 0;
  border: 3px solid var(--glyph-ink);
  border-bottom-width: 4px;
  border-radius: 7px 7px 3px 3px;
  background: rgba(255,255,255,.5);
}
.opening-leaf {
  position: absolute;
  left: 9px;
  top: 6px;
  width: 19px;
  height: 27px;
  border: 2px solid var(--glyph-ink);
  border-radius: 4px;
  background: #d7ebfa;
  transform: perspective(35px) rotateY(-25deg);
  transform-origin: left center;
}
.opening-leaf::after {
  content: '';
  position: absolute;
  right: 3px;
  top: 12px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #f1b128;
}
.oc-icon--summary {
  background: linear-gradient(145deg, #eaf8ee, #d7f0de);
}
.oc-icon--summary::after {
  background: #55a56b;
}
.oc-glyph--summary {
  width: 39px;
  height: 40px;
}
.oc-glyph--summary i {
  position: absolute;
  left: 3px;
  width: 27px;
  height: 9px;
  border: 2px solid var(--glyph-ink);
  border-radius: 4px;
  background: white;
  box-shadow: 0 2px 0 rgba(94,42,101,.1);
}
.oc-glyph--summary i:nth-child(1) {
  top: 3px;
}
.oc-glyph--summary i:nth-child(2) {
  top: 15px;
  width: 35px;
  background: #fff6d6;
}
.oc-glyph--summary i:nth-child(3) {
  top: 27px;
  width: 31px;
}
.oc-glyph--summary b {
  position: absolute;
  right: -2px;
  bottom: -1px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 2px solid white;
  border-radius: 7px;
  color: #ffbd24;
  background: var(--glyph-ink);
  font-size: 10px;
  box-shadow: 0 3px 7px rgba(94,42,101,.2);
}
.oc-icon--quantities {
  background: linear-gradient(145deg, #f5eafa, #e9d8ef);
}
.oc-icon--quantities::after {
  background: #ffbd24;
}
.oc-glyph--quantities {
  width: 36px;
  height: 39px;
  padding: 6px 5px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  border: 2px solid var(--glyph-ink);
  border-radius: 8px;
  background: white;
  box-shadow: 0 5px 0 rgba(94,42,101,.1);
}
.oc-glyph--quantities::before {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  top: 6px;
  height: 6px;
  border-radius: 3px;
  background: #f2ddf5;
}
.oc-glyph--quantities i {
  width: 6px;
  border-radius: 3px 3px 1px 1px;
  background: #7f4d87;
}
.oc-glyph--quantities i:nth-child(1) {
  height: 8px;
}
.oc-glyph--quantities i:nth-child(2) {
  height: 13px;
  background: #f1b128;
}
.oc-glyph--quantities i:nth-child(3) {
  height: 18px;
  background: #8fc5e8;
}
.oc-glyph--quantities b {
  position: absolute;
  right: -5px;
  top: -5px;
  width: 14px;
  height: 14px;
  border: 2px solid white;
  border-radius: 50%;
  background: #55a56b;
}
@media (max-width: 640px) {
  .oc-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
  }
  .oc-icon:not(.oc-icon--small) .oc-glyph {
    transform: scale(.9);
  }
  .oc-icon--small {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }
}
.oc-icon {
  border: 1px solid rgba(75,24,79,.055);
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,240,250,.92));
  box-shadow: 0 12px 24px rgba(59,34,63,.1), inset 0 1px 1px white;
}
.oc-icon::before {
  right: -8px;
  top: -9px;
  width: 31px;
  height: 31px;
  border: 0;
  background: linear-gradient(145deg, rgba(255,255,255,.65), rgba(255,255,255,.1));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.8);
}
.oc-icon::after {
  left: 9px;
  bottom: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 3px 5px rgba(75,24,79,.16);
}
.oc-glyph {
  filter: drop-shadow(0 7px 5px rgba(55,30,59,.2));
}
.oc-icon--wall {
  background: linear-gradient(145deg, #fffafd, #f2e3f4);
}
.oc-glyph--wall {
  transform: rotate(-4deg);
}
.oc-glyph--wall i {
  height: 9px;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(155deg, #fff 18%, #f1dff4 100%);
  box-shadow: 0 3px 0 #bc91c3, inset 0 1px 1px white;
}
.oc-glyph--wall i:nth-child(2) {
  background: linear-gradient(155deg, #fff5ce, #ffcf59);
  box-shadow: 0 3px 0 #dca021, inset 0 1px 1px white;
}
.oc-glyph--wall i:nth-child(3) {
  background: linear-gradient(155deg, #f2e3f5, #dabce0);
  box-shadow: 0 3px 0 #aa7bb2, inset 0 1px 1px white;
}
.oc-glyph--wall i:nth-child(5) {
  background: linear-gradient(155deg, #fff, #f3e6f5);
}
.oc-icon--block {
  background: linear-gradient(145deg, #f6fbff, #dfefff);
}
.oc-glyph--block {
  border: 0;
  border-radius: 7px;
  background: linear-gradient(155deg, #eedbf1, #c79bce);
  box-shadow: 0 6px 0 #9867a1, inset 0 1px 2px rgba(255,255,255,.8);
  transform: rotate(-4deg) skewY(-1deg);
}
.oc-glyph--block::before {
  left: 6px;
  top: -8px;
  width: 31px;
  height: 10px;
  border: 0;
  background: linear-gradient(155deg, #fff5cd, #f4c64f);
  box-shadow: 0 2px 0 #c99722, inset 0 1px 1px white;
}
.oc-glyph--block i {
  top: 7px;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(145deg, #8f6197, #6d3c75);
  box-shadow: inset 0 3px 3px rgba(50,16,55,.28), 0 1px 0 rgba(255,255,255,.45);
}
.oc-icon--mortar {
  background: linear-gradient(145deg, #fffaf5, #ffe5d8);
}
.oc-glyph--mortar {
  border: 0;
  border-radius: 6px 6px 10px 10px;
  background: linear-gradient(145deg, #fff 10%, #ead8ed 100%);
  box-shadow: 0 6px 0 #ba91c1, inset -4px -2px 7px rgba(120,72,128,.12), inset 2px 2px 2px white;
}
.oc-glyph--mortar .bag-fold {
  background: linear-gradient(180deg, #ffd96f, #efb52e);
  box-shadow: 0 2px 0 #c58e18;
}
.oc-glyph--mortar .bag-label {
  color: #ffd568;
  background: linear-gradient(145deg, #6f3777, #4b184f);
  box-shadow: 0 3px 4px rgba(75,24,79,.2), inset 0 1px 1px rgba(255,255,255,.2);
}
.oc-glyph--mortar .trowel {
  border: 0;
  background: linear-gradient(145deg, #e8f6ff, #8fc1e1);
  box-shadow: 0 3px 0 #648ba4, inset 0 1px 1px white;
}
.oc-glyph--mortar .trowel::after {
  background: linear-gradient(145deg, #71427a, #4b184f);
  box-shadow: 0 2px 0 #321035;
}
.oc-icon--mix {
  background: linear-gradient(145deg, #fafbfc, #e8ebf0);
}
.mix-bucket {
  border: 0;
  background: linear-gradient(145deg, #fff, #d8dce4);
  box-shadow: 0 5px 0 #a5aab5, inset -4px -2px 6px rgba(93,98,110,.12);
}
.mix-bucket::before {
  border: 0;
  background: linear-gradient(180deg, #e9ecf1, #bfc5cf);
  box-shadow: 0 2px 0 #949aa6, inset 0 1px 1px white;
}
.mix-rod {
  width: 3px;
  background: linear-gradient(90deg, #71427a, #4b184f);
  box-shadow: 1px 0 0 rgba(255,255,255,.35);
}
.mix-rod::after {
  background: linear-gradient(145deg, #ffd667, #e8a91c);
  box-shadow: 0 2px 0 #bd8210;
}
.oc-icon--opening {
  background: linear-gradient(145deg, #fffaf0, #ffecb8);
}
.opening-frame {
  border: 0;
  border-bottom: 4px solid #906398;
  background: linear-gradient(145deg, #f1def3, #cba8d1);
  box-shadow: 0 5px 0 #9e72a6, inset 0 2px 2px rgba(255,255,255,.75);
}
.opening-leaf {
  border: 0;
  background: linear-gradient(145deg, #edf9ff, #9ecbe7);
  box-shadow: 4px 2px 0 #6f9ebc, inset 2px 2px 2px rgba(255,255,255,.8);
}
.oc-icon--summary {
  background: linear-gradient(145deg, #f6fff8, #dbf1e1);
}
.oc-glyph--summary i {
  border: 0;
  background: linear-gradient(145deg, #fff, #e3d4e6);
  box-shadow: 0 3px 0 #aa83b1, inset 0 1px 1px white;
}
.oc-glyph--summary i:nth-child(2) {
  background: linear-gradient(145deg, #fff7d9, #ffd86f);
  box-shadow: 0 3px 0 #d2a42f, inset 0 1px 1px white;
}
.oc-glyph--summary b {
  border: 2px solid rgba(255,255,255,.85);
  background: linear-gradient(145deg, #71427a, #4b184f);
  box-shadow: 0 4px 0 #351138, 0 6px 8px rgba(75,24,79,.22), inset 0 1px 1px rgba(255,255,255,.25);
}
.oc-icon--quantities {
  background: linear-gradient(145deg, #fffafd, #ead9ee);
}
.oc-glyph--quantities {
  border: 0;
  background: linear-gradient(145deg, #fff, #e8d9eb);
  box-shadow: 0 6px 0 #ae87b5, inset 0 2px 2px white;
}
.oc-glyph--quantities::before {
  background: linear-gradient(145deg, #f4e4f6, #d7b7dd);
  box-shadow: inset 0 2px 2px rgba(111,55,119,.12);
}
.oc-glyph--quantities i {
  box-shadow: 0 2px 0 rgba(75,24,79,.28), inset 0 1px 1px rgba(255,255,255,.35);
}
.oc-glyph--quantities b {
  border-color: rgba(255,255,255,.9);
  background: linear-gradient(145deg, #7fd393, #4da966);
  box-shadow: 0 3px 0 #35864b;
}
.oc-icon--small .oc-glyph--wall {
  transform: scale(.82) rotate(-4deg);
}
.oc-icon--small .oc-glyph--block {
  transform: scale(.82) rotate(-4deg) skewY(-1deg);
}
.oc-icon--small .oc-glyph--mortar {
  transform: scale(.82) rotate(-2deg);
}
.oc-icon--small .oc-glyph--mix,
.oc-icon--small .oc-glyph--opening {
  transform: scale(.82);
}
@media (max-width: 640px) {
  .step-line {
    margin: 0;
  }
  .opening-item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .opening-item__name {
    grid-column: 1 / -1;
  }
  .opening-item .field {
    min-width: 0;
  }
  .opening-remove {
    grid-column: 2;
    justify-self: end;
  }
  .execution-fields .field:last-child {
    grid-column: auto;
  }
  .oc-icon:not(.oc-icon--small) .oc-glyph--wall {
    transform: scale(.9) rotate(-4deg);
  }
  .oc-icon:not(.oc-icon--small) .oc-glyph--block {
    transform: scale(.9) rotate(-4deg) skewY(-1deg);
  }
  .oc-icon:not(.oc-icon--small) .oc-glyph--mortar {
    transform: scale(.9) rotate(-2deg);
  }
  .page-wrap {
    padding-bottom: 164px;
  }
  .floating-navigation {
    bottom: calc(4px + env(safe-area-inset-bottom));
    gap: clamp(9px,4vw,18px);
    width: calc(100vw - 28px);
    padding: 9px 14px;
  }
  .floating-navigation-button {
    width: 58px;
    height: 58px;
  }
  .floating-navigation-icon {
    width: 29px;
    height: 29px;
  }
  .floating-navigation-icon svg {
    width: 25px;
    height: 25px;
  }
  .oc-offline-status {
    top: 2px !important;
    right: auto !important;
    left: 50% !important;
    max-width: min(90vw, 280px);
    padding: 0 !important;
    font-size: 8px !important;
  }
  .toast {
    bottom: 146px;
  }
  .confirm-modal {
    width: min(100%, 460px);
    padding: 26px 20px 22px;
  }
  .confirm-modal h2 {
    font-size: 21px;
  }
  .confirm-modal p {
    margin-bottom: 22px;
  }
  .confirm-modal footer {
    grid-template-columns: 1fr;
  }
  .confirm-modal footer button {
    width: 100%;
  }
}
.measurement-grid {
  align-items: stretch;
}
.measurement-grid--single {
  grid-template-columns: minmax(0, 1fr);
}
.measurement-field {
  min-height: 118px;
  padding: 17px 20px 15px;
  display: flex;
  flex-direction: column;
  border-color: #edcc70;
  border-radius: 26px;
  background: #fffdfa;
  cursor: pointer;
}
.measurement-field > .field-label {
  margin-bottom: auto;
  color: #746d79;
  font-weight: 700;
}
.measurement-field .input-shell {
  min-height: 42px;
  height: auto;
  align-items: flex-end;
}
.measurement-field .input-shell input {
  height: auto;
  min-height: 42px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}
.measurement-field .input-shell em {
  padding-bottom: 3px;
  color: #746d79;
  font-size: 15px;
  font-weight: 700;
}
.measurement-field:focus-within {
  border: 3px solid #1769ff;
  box-shadow: 0 0 0 3px rgba(23,105,255,.12);
  background: #fffdfa;
}
.measurement-field input:focus-visible {
  outline: 0;
}
.measurement-field input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.measurement-field input[type='number']::-webkit-inner-spin-button,
.measurement-field input[type='number']::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.system-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.execution-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.execution-fields .field:last-child {
  grid-column: auto;
}
.execution-fields .input-shell {
  flex-wrap: wrap;
  height: auto;
}
.execution-fields .input-shell em {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.summary-row--highlight {
  margin: 6px 14px;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  color: #71427a;
  background: linear-gradient(135deg, #fff1c7, #ffebaa);
}
.buy-summary--focused {
  margin-top: 20px;
}
.buy-summary--focused .summary-title {
  gap: 12px;
  align-items: flex-start;
}
.buy-summary--focused .summary-title .eyebrow {
  font-size: 12px;
}
.buy-summary--focused .summary-title p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.purchase-results {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.purchase-results .hero-result {
  min-width: 0;
  padding: 20px;
}
.purchase-results .hero-result span {
  font-size: 14px;
  letter-spacing: .03em;
}
.purchase-results .hero-result strong {
  font-size: clamp(28px, 4vw, 38px);
  overflow-wrap: anywhere;
}
.purchase-results .hero-result small {
  font-size: 14px;
}
.purchase-results .hero-result p {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}
.purchase-results .hero-result .result-parameter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: inherit;
}
.result-parameter label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  overflow: hidden;
  border: 1px solid rgba(75, 24, 79, .2);
  border-radius: 9px;
  background: rgba(255, 255, 255, .72);
}
.result-parameter input {
  width: 46px;
  min-width: 0;
  padding: 4px 2px 4px 8px;
  border: 0;
  outline: 0;
  color: var(--purple-dark);
  background: transparent;
  font: inherit;
  font-weight: 800;
}
.result-parameter input::-webkit-inner-spin-button,
.result-parameter input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.result-parameter input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.result-parameter input:focus-visible {
  box-shadow: inset 0 0 0 2px #1769ff;
}
.result-parameter em {
  padding: 4px 8px 4px 2px;
  color: inherit;
  font-style: normal;
  font-weight: 800;
}
.result-parameter b {
  font-weight: 500;
}
.purchase-results .purchase-main {
  grid-column: 1 / -1;
  min-height: 165px;
}
.purchase-results .purchase-main strong {
  font-size: clamp(48px, 8vw, 68px);
}
.purchase-results .purchase-main p {
  color: #315e3c;
}
.purchase-results .purchase-half {
  background: var(--yellow);
}
.purchase-results .purchase-plaster {
  background: var(--blue);
}
.labor-summary-heading {
  padding: 0 20px 14px;
}
.labor-summary-heading h3 {
  margin: 0;
  color: var(--purple-dark);
  font-size: 18px;
}
.labor-summary-heading p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}
.workday-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.workday-control {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.workday-control input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--purple-dark);
  background: var(--surface);
  font-size: 18px;
  font-weight: 700;
}
.workday-control input[aria-invalid='true'] {
  border-color: #b44040;
}
.labor-summary-heading .labor-error {
  color: #a12e2e;
}
.labor-summary-heading .labor-capacity {
  margin-top: 14px;
  color: var(--purple-dark);
}
@media (max-width: 640px) {
  .workday-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
.labor-results .labor-masonry {
  background: var(--purple-soft);
}
.labor-results .labor-plaster {
  background: var(--coral);
}
.calculation-details {
  border-top: 1px solid var(--line);
}
.calculation-details > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 20px;
  color: var(--purple-dark);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.calculation-details > summary::-webkit-details-marker {
  display: none;
}
.calculation-details > summary > span {
  font-size: 22px;
}
.calculation-details[open] > summary > span {
  transform: rotate(180deg);
}
.calculation-details > summary:focus-visible {
  outline: 3px solid var(--purple-dark);
  outline-offset: -5px;
  border-radius: 12px;
}
.calculation-details .summary-row span, .calculation-details .summary-row strong {
  font-size: 14px;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .purchase-results {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 12px;
  }
  .purchase-results .hero-result {
    padding: 16px;
  }
  .calculation-details > summary, .calculation-details .summary-row {
    padding-inline: 16px;
  }
  .buy-summary--focused .summary-title {
    flex-wrap: wrap;
  }
  .form-card:has(.buy-summary--focused) {
    padding: 18px 12px;
    border-radius: 24px;
  }
  .result-heading {
    align-items: flex-start;
    gap: 12px;
  }
  .result-heading > div {
    min-width: 0;
  }
  .result-heading h2 {
    font-size: 24px;
    line-height: 1.2;
  }
  .result-heading p {
    font-size: 14px;
    line-height: 1.5;
  }
  .buy-summary--focused .summary-title {
    padding: 16px;
  }
  .labor-summary-heading {
    padding-inline: 16px;
  }
  .purchase-results .hero-result .result-parameter {
    gap: 8px;
  }
  .purchase-results .hero-result .result-parameter b {
    flex-basis: 100%;
  }
  .calculation-details .summary-row {
    align-items: flex-start;
    gap: 12px;
  }
  .calculation-details .summary-row > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .labor-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .labor-results .hero-result {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 14px;
  }
  .labor-results .hero-result small {
    grid-column: 1;
    text-align: left;
  }
}
.summary-row--highlight span {
  color: #71427a;
  font-weight: 800;
}
.summary-row--highlight strong {
  color: #4b184f;
  font-size: 15px;
}
@media (max-width: 640px) {
  .measurement-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .measurement-grid--single {
    grid-template-columns: minmax(0, 1fr);
  }
  .measurement-field.field {
    min-height: 110px;
    padding: 14px 13px 12px;
    border-radius: 24px;
  }
  .measurement-field .input-shell input {
    min-height: 36px;
    font-size: 26px;
  }
  .measurement-field .input-shell em {
    padding-bottom: 2px;
    font-size: 13px;
  }
  .system-fields, .execution-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }
  .system-fields .field, .execution-fields .field {
    min-width: 0;
    padding: 11px 10px;
  }
  .system-fields .field > span, .execution-fields .field > span {
    font-size: 10px;
    line-height: 1.25;
  }
  .system-fields .input-shell input, .execution-fields .input-shell input {
    font-size: 18px;
  }
  .system-fields .input-shell em, .execution-fields .input-shell em {
    font-size: 10px;
  }
  .summary-row--highlight {
    margin-inline: 10px;
    padding-inline: 13px;
  }
  .summary-row--highlight strong {
    font-size: 13px;
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-ease: initial;
    }
  }
}