.sa { padding-top: 138px; }

.sa .wrap > :last-child { margin-bottom: 0; }



.sa-mast { padding-bottom: var(--sec-pad); }

.sa-mast h1 {

  font-size: clamp(40px, 5.6vw, 74px);

  max-width: 17ch;

  margin-top: var(--label-gap);

}

.sa-mast .stand {

  margin-top: var(--head-gap);

  font-size: 19px;

  line-height: 1.6;

  color: var(--ink-soft);

  max-width: 56ch;

}



.sa-sec-head {

  font-size: 34px;

  letter-spacing: -0.025em;

  line-height: 1.25;

  margin-top: var(--label-gap);

}





.f-rows { }

.f-row {

  display: grid;

  grid-template-columns: 208px minmax(0, 1fr);

  gap: 28px;

  align-items: start;

  padding: 24px 0 22px;

}

.f-lab {

  font-size: 12px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  font-weight: 500;

  color: var(--warm-grey);

  padding-top: 12px;

}

.f-hint {

  margin: 10px 0 0;

  font-size: 15px;

  line-height: 1.5;

  color: var(--warm-grey);

  max-width: 52ch;

}





.f-text,

.f-area {

  font-family: "Borna", "DM Sans", ui-sans-serif, system-ui, sans-serif;

  font-weight: 500;

  letter-spacing: -0.02em;

  font-size: 22px;

  line-height: 1.55;

  color: var(--red110);

  width: 100%;

  display: block;

  background: transparent;

  border: 0;

  border-bottom: 1px solid var(--stone-mid);

  border-radius: 0;

  padding: 6px 0 10px;

  margin: 0;

  appearance: none;

  transition: border-color .2s ease;

}

.f-area {

  font-family: "DM Sans", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;

  font-weight: 400;

  letter-spacing: normal;

  font-size: 16px;

  line-height: 1.6;

  color: var(--ink-soft);

  resize: vertical;

  min-height: 92px;

}

.f-text::placeholder,

.f-area::placeholder { color: var(--warm-grey); opacity: 1; font-weight: 400; }

.f-text:focus,

.f-area:focus { outline: 0; border-bottom-color: var(--flare); }

.f-text:focus-visible,

.f-area:focus-visible { outline: 0; }

.f-text[readonly] { color: var(--red110); cursor: default; }

.f-text[readonly]:focus { border-bottom-color: var(--stone-mid); }

.f-text::-webkit-calendar-picker-indicator { opacity: .5; }

.f-text::-webkit-inner-spin-button,

.f-text::-webkit-outer-spin-button { appearance: none; margin: 0; }

.f-text[type="date"] { font-variant-numeric: tabular-nums; }





.f-tiles {

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 20px;

  max-width: 560px;

}

.f-tile-cell { min-width: 72px; }

.f-tile {

  font: inherit;

  background: transparent;

  border: 0;

  padding: 0 0 14px;

  margin: 0;

  cursor: pointer;

  text-align: center;

  display: block;

  position: relative;

  color: var(--warm-grey);

  transition: color .2s ease;

}

.f-tile img {

  width: 72px;

  height: 72px;

  margin: 4px auto;

  display: block;

  filter: saturate(.35) opacity(.55);

  transition: filter .25s ease, transform .25s ease;

}

.f-tile .t-name {

  display: block;

  margin-top: 2px;

  font-size: 12px;

  line-height: 1.25;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}

.f-tile::after {

  content: "";

  position: absolute;

  left: 50%;

  bottom: 0;

  width: 0;

  height: 2px;

  background: var(--flare);

  transform: translateX(-50%);

  transition: width .25s cubic-bezier(.22,.61,.36,1);

}

.f-tile:hover img { filter: saturate(.7) opacity(.85); }

.f-tile[aria-pressed="true"] { color: var(--red110); }

.f-tile[aria-pressed="true"] img { filter: none; transform: translateY(-2px); }

.f-tile[aria-pressed="true"]::after { width: 26px; }

.f-tile:focus-visible { outline: 2px solid var(--flare); outline-offset: 4px; }



.f-count {

  font-family: "Borna", "DM Sans", ui-sans-serif, system-ui, sans-serif;

  font-weight: 500;

  font-size: 22px;

  letter-spacing: -0.02em;

  line-height: 1.4;

  width: 100%;

  min-width: 72px;

  display: block;

  margin-top: 8px;

  text-align: center;

  background: transparent;

  color: var(--red110);

  border: 0;

  border-bottom: 1px solid var(--stone-mid);

  border-radius: 0;

  padding: 4px 0 6px;

  appearance: none;

}

.f-count[disabled] {

  color: var(--warm-grey);

  opacity: .4;

  cursor: default;

  -webkit-text-fill-color: var(--warm-grey);

}

.f-count::placeholder { color: var(--warm-grey); opacity: .7; }

.f-count:focus { outline: 0; border-bottom-color: var(--flare); }

.f-count::-webkit-inner-spin-button,

.f-count::-webkit-outer-spin-button { appearance: none; margin: 0; }

.f-tally { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--warm-grey); }

.f-tally.is-off { color: var(--flare-ink); }





.f-seg {

  display: flex;

  flex-wrap: wrap;

  border-bottom: 1px solid var(--stone-mid);

}

.f-seg .seg {

  font: inherit;

  font-size: 15px;

  line-height: 1.3;

  background: transparent;

  border: 0;

  border-bottom: 2px solid transparent;

  margin-bottom: -1px;

  padding: 10px 18px 12px;

  cursor: pointer;

  color: var(--warm-grey);

  white-space: nowrap;

  transition: color .2s ease, border-color .2s ease;

}

.f-seg .seg:first-child { padding-left: 0; }

.f-seg .seg:hover { color: var(--red110); }

.f-seg .seg[aria-pressed="true"] { color: var(--red110); border-bottom-color: var(--flare); }

.f-seg .seg:focus-visible { outline: 2px solid var(--flare); outline-offset: 2px; }





.f-drop {

  background: var(--stonelight);

  border-radius: var(--radius-panel);

  padding: 12px;

  cursor: pointer;

  display: block;

  width: 100%;

  border: 0;

  font: inherit;

  text-align: left;

  color: inherit;

  transition: background .2s ease;

}

.f-drop .inner {

  border: 1px dashed var(--stone-mid);

  border-radius: calc(var(--radius-panel) - 12px);

  padding: 30px 28px;

  transition: border-color .2s ease;

}

.f-drop .d-line {

  font-family: "Borna", sans-serif;

  font-weight: 500;

  letter-spacing: -0.02em;

  font-size: 23px;

  line-height: 1.15;

  margin: 14px 0 0;

  color: var(--red110);

}

.f-drop .d-sub { margin: 8px 0 0; font-size: 14px; color: var(--warm-grey); }

.f-drop:hover, .f-drop.is-over { background: var(--blush); }

.f-drop.is-over .inner, .f-drop:hover .inner { border-color: var(--flare); }

.f-drop:focus-visible { outline: 2px solid var(--flare); outline-offset: 3px; }

.f-drop.has-file .inner { border-style: solid; border-color: var(--flare); }





.f-close { padding: 46px 0 0; }

.f-submit {

  font-family: "DM Sans", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;

  font-size: 15px;

  font-weight: 500;

  line-height: 1.55;

  cursor: pointer;

  border: 0;

  padding: 14px 26px;

  border-radius: 999px;

  background: var(--flare-ink);

  color: #ffffff;

  -webkit-appearance: none;

  appearance: none;

  text-align: center;

  display: inline-block;

}

.f-submit:focus-visible { outline: 2px solid var(--red110); outline-offset: 3px; }

.f-turn {

  display: block;

  margin-top: 18px;

  font-size: 12px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--warm-grey);

}

.f-consent {

  margin: 14px 0 0;

  font-size: 12px;

  line-height: 1.55;

  color: var(--warm-grey);

  max-width: 54ch;

}

.f-consent a { color: var(--ember); }





.f-returns { margin: 0; padding: 0; list-style: none; }

.f-returns li {

  padding: 18px 0;

  display: grid;

  grid-template-columns: 44px minmax(0, 1fr);

  align-items: baseline;

  gap: 10px;

  font-size: 17px;

  color: var(--red110);

}

.f-returns li .n {

  font-family: "Borna", sans-serif;

  font-size: 12px;

  letter-spacing: 0.16em;

  color: var(--flare-ink);

  font-variant-numeric: tabular-nums;

}





.sa-done { padding: 20px 0 var(--sec-pad); }

.sa-done h2 {

  font-size: clamp(38px, 5vw, 66px);

  max-width: 16ch;

  margin-top: var(--label-gap);

}

.sa-done .stand {

  margin-top: var(--head-gap);

  font-size: 19px;

  line-height: 1.6;

  color: var(--ink-soft);

  max-width: 54ch;

}

.sa-done .receipt { margin-top: 46px; }

.sa-done .receipt h3 {

  font-size: 12px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--warm-grey);

  font-family: "DM Sans", sans-serif;

  font-weight: 500;

  margin-bottom: 6px;

}



.sa-done.fit { padding: 0 0 24px; }

.sa-done.fit h2 { font-size: clamp(30px, 3.2vw, 42px); max-width: 22ch; }

.sa-done.fit .stand { font-size: 16px; line-height: 1.5; max-width: 68ch; margin-top: 12px; }

.sa-done.fit .receipts {

  display: grid;

  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);

  gap: 40px;

  align-items: start;

  margin-top: 26px;

}

.sa-done.fit .receipt { margin-top: 0; }

.sa-done.fit .f-rows {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  column-gap: 34px;

}

.sa-done.fit .f-row {

  grid-template-columns: 132px minmax(0, 1fr);

  gap: 14px;

  padding: 9px 0 8px;

  align-items: baseline;

}

.sa-done.fit .f-lab { font-size: 11px; letter-spacing: 0.12em; padding-top: 0; }

.sa-done.fit .a-val { font-size: 15px; }

.sa-done.fit .f-returns li { padding: 9px 0; font-size: 15px; grid-template-columns: 34px minmax(0, 1fr); }







.a-cols {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 380px;

  gap: 56px;

  align-items: stretch;

}

.a-cols.first { grid-template-columns: minmax(0, 1fr); }

.a-cols.first .a-rail { display: none; }

.a-cols .a-col {

  min-height: var(--first-fill, 520px);

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.a-cols.first .f-row { grid-template-columns: 240px minmax(0, 1fr); padding: 20px 0 18px; }

.a-cols.first .f-lab { padding-top: 16px; }

.a-cols.first .f-tiles { max-width: 560px; gap: 20px; }

.a-col { min-width: 0; }

.a-rail {

  background: var(--stonelight);

  border-radius: var(--radius-panel);

  padding: 20px 24px 16px;

  align-self: stretch;

}

.a-rail h2 { font-size: 19px; margin: 6px 0 10px; }

.a-rail dl { margin: 0; }

.a-rail .r-row {

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  gap: 14px;

  padding: 5px 0;

}

.a-rail dt {

  font-size: 11px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--warm-grey);

  flex: none;

}

.a-rail dd {

  margin: 0;

  font-family: "Borna", sans-serif;

  font-weight: 500;

  letter-spacing: -0.02em;

  font-size: 15px;

  text-align: right;

  color: var(--red110);

  min-width: 0;

  overflow-wrap: anywhere;

}

.a-rail dd.empty { color: var(--stone-mid); }

.a-rail .r-head {

  margin: 18px 0 0;

  font-family: "DM Sans", sans-serif;

  font-weight: 500;

  font-size: 11px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--warm-grey);

}

.a-rail .f-returns li { padding: 5px 0; font-size: 13px; grid-template-columns: 26px minmax(0, 1fr); }

.a-rail .r-note { font-size: 12px; color: var(--warm-grey); padding: 10px 0 0; margin: 0; }



.a-block > .eyebrow { margin-bottom: 6px; }

.a-block .f-row { padding: 18px 0 16px; }

.a-block .f-area { min-height: 76px; }

.a-block .f-lab { padding-top: 16px; }

.e-nav { display: flex; align-items: center; gap: 26px; margin-top: 22px; }

.e-stage[data-stage="2"] .e-nav { margin-top: 14px; }

.e-stage[data-stage="2"] .f-consent { margin-top: 10px; }

.e-back {

  font: inherit;

  font-size: 14px;

  background: none;

  border: 0;

  padding: 0;

  cursor: pointer;

  color: var(--warm-grey);

}

.e-back:hover { color: var(--red110); }

.e-count {

  margin-left: auto;

  font-size: 12px;

  letter-spacing: 0.16em;

  color: var(--warm-grey);

  font-variant-numeric: tabular-nums;

}



body.sa-tool > footer { display: none; }

body.sa-tool .sa { padding-top: 82px; }

.sa-tool .sa-mast { padding-bottom: 22px; }

.sa-tool .sa-mast h1 { font-size: clamp(26px, 2.5vw, 34px); max-width: 22ch; margin-top: 4px; }

.sa-tool .sa-mast .stand { font-size: 15px; max-width: 70ch; margin: 6px 0 0; }

.sa-tool .a-cols.first .a-col { justify-content: flex-start; }

.sa-tool .a-cols.first .e-stage { flex: 1 1 auto; }

.sa-tool .a-cols.first .a-block > .eyebrow { margin-bottom: 4px; }

.sa-tool .a-cols.first .sa-sec-head { margin-top: 6px; }

.sa-tool .a-cols.first .f-row { padding: 8px 0 6px; }

.sa-tool .a-cols.first .e-nav { margin-top: 14px; }

.sa-tool.past-first .sa-mast .stand { display: none; }

.sa-tool.past-first .sa-mast { padding-bottom: 16px; }

.sa-tool.past-first .sa-mast h1 { font-size: clamp(22px, 2vw, 27px); }



body.sa-flow > footer { display: none; }

body.sa-flow .sa { padding-top: 104px; }



.e-prog {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 22px;

  margin-bottom: 30px;

}

.e-seg .s-lab {

  display: block;

  font-size: 11px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--stone-mid);

  margin-bottom: 10px;

}

.e-seg.done .s-lab { color: var(--warm-grey); }

.e-seg.on .s-lab { color: var(--red110); }

.e-seg .s-bar { display: block; height: 2px; background: var(--stone-mid); position: relative; }

.e-seg .s-bar i {

  position: absolute;

  inset: 0 auto 0 0;

  display: block;

  height: 2px;

  width: 0;

  background: var(--flare);

  transition: width .4s cubic-bezier(.22,.61,.36,1);

}



.e-stage[data-stage="2"] .f-row { padding: 6px 0 5px; }

.e-stage[data-stage="2"] .f-lab { padding-top: 8px; }

.e-stage[data-stage="2"] .f-tiles { max-width: 560px; gap: 20px; }

.e-stage[data-stage="2"] .f-tile { padding-bottom: 8px; }

.e-stage[data-stage="2"] .t-name { overflow-wrap: anywhere; }

.e-stage[data-stage="2"] .sa-sec-head { margin-top: 4px; }

.e-stage[data-stage="2"] .f-hint { margin-top: 3px; }

.e-stage[data-stage="2"] .f-seg .seg { padding-top: 6px; padding-bottom: 6px; }

.e-stage[data-stage="2"] .f-drop { padding: 6px; }

.e-stage[data-stage="2"] .f-drop .inner { padding: 8px 12px; }

.e-stage[data-stage="2"] .f-drop .d-line { font-size: 15px; margin-top: 4px; }

.e-stage[data-stage="2"] .f-drop .d-sub { display: none; }

.e-stage[data-stage="2"] .f-area { min-height: 28px; }

.e-stage[data-stage="2"] .f-hint { margin-top: 4px; }



[hidden] { display: none !important; }











@media (max-width: 1080px) {

  .a-cols { grid-template-columns: minmax(0, 1fr); gap: 44px; }

  .a-rail { position: static; }

}

@media (max-width: 760px) {

  .f-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .f-lab { padding-top: 0; }

  .f-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .sa-tool .a-cols.first .f-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .sa-tool .a-cols.first .f-lab { padding-top: 0; }

  .sa-tool .a-cols.first .e-nav {

    position: sticky;

    bottom: max(12px, env(safe-area-inset-bottom));

    z-index: 1;

    background: var(--paper);

  }

}



@media (prefers-reduced-motion: reduce) {

  .f-tile img, .f-tile::after, .e-seg .s-bar i { transition: none; }

}





.sa-result { padding: 0 0 40px; }

body.sa-tool.has-result .sa-mast { display: none; }

body.sa-tool.has-result .sa { padding-top: 128px; }

.f-submit:disabled { opacity: .45; cursor: not-allowed; }





.sa-stage {

  position: relative;

  padding-bottom: 24px;

  min-height: var(--stage-fill, 0px);

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.sa-prog {

  display: flex;

  justify-content: center;

  gap: 8px;

  margin: 0 0 18px;

}

.sa-prog i {

  display: block;

  position: relative;

  overflow: hidden;

  width: 46px;

  height: 2px;

  background: var(--stone-mid);

}

.sa-prog i::after {

  content: "";

  position: absolute;

  inset: 0;

  background: var(--flare);

  transform: scaleX(0);

  transform-origin: left center;

  transition: transform .42s cubic-bezier(.22,.61,.36,1);

}

.sa-prog i.on::after, .sa-prog i.done::after { transform: none; }

.sa-prog i.on { opacity: .5; }



.sa-q {

  max-width: 720px;

  margin: 0 auto;

  text-align: center;

}

.sa-q > .eyebrow { justify-content: center; }

.sa-tool .sa-q .sa-sec-head {

  font-size: clamp(26px, 2.8vw, 34px);

  max-width: 30ch;

  margin: var(--label-gap) auto 0;

}

.sa-q .q-sub {

  margin: 12px auto 0;

  font-size: 15px;

  line-height: 1.55;

  color: var(--warm-grey);

  max-width: 68ch;

}

.sa-q .q-field { margin-top: 18px; }

.sa-q .q-one { max-width: 380px; margin-left: auto; margin-right: auto; }

.sa-q .q-one .f-text { text-align: center; }

.sa-q .f-big { font-size: 34px; }

.sa-q .f-lab {

  display: block;

  padding: 0 0 4px;

  text-align: center;

}

.sa-q .q-gate {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 26px;

  max-width: 560px;

  margin-left: auto;

  margin-right: auto;

  text-align: left;

}

.sa-q .q-gate .f-lab { text-align: left; }

.sa-q .q-field > .f-lab { margin-bottom: 14px; }

.sa-q .f-tiles { max-width: 620px; margin: 0 auto; gap: 20px; align-items: stretch; }

.sa-q .f-tile-cell, .fhs-q .f-tile-cell { display: flex; flex-direction: column; }

.sa-q .f-tile-cell .f-count, .fhs-q .f-tile-cell .f-count { margin-top: auto; }

.sa-q .f-tally { margin-top: 12px; }

.sa-q .q-sizes { margin-top: 8px; }

.sa-total {

  display: flex;

  align-items: baseline;

  justify-content: center;

  gap: 12px;

  margin: 8px auto 0;

  max-width: 620px;

}

.sa-total[hidden] { display: none; }

.sa-total-lab {

  font-size: 12px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  font-weight: 500;

  color: var(--warm-grey);

}

.sa-total-n {

  font-family: "Borna", "DM Sans", ui-sans-serif, system-ui, sans-serif;

  font-weight: 500;

  font-size: 22px;

  letter-spacing: -0.02em;

  line-height: 1.2;

  color: var(--red110);

  font-variant-numeric: tabular-nums;

}

.sa-q .f-consent { margin-left: auto; margin-right: auto; text-align: center; }



.sa-nav {

  display: flex;

  align-items: center;

  gap: 22px;

  padding-top: 16px;

  max-width: 560px;

  margin: 0 auto;

}

.sa-nav .e-back { order: 1; }

.sa-nav .f-submit { order: 2; margin-left: auto; }

.sa-nav:not(:has(.e-back)) { justify-content: center; max-width: none; }

.sa-nav:not(:has(.e-back)) .f-submit { margin-left: 0; }

.f-ghost {

  font-family: "DM Sans", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;

  font-size: 15px;

  font-weight: 500;

  line-height: 1.55;

  letter-spacing: normal;

  text-transform: none;

  border: 0;

  border-radius: 999px;

  background: transparent;

  color: var(--red110);

  box-shadow: inset 0 0 0 1px var(--stone-mid);

  padding: 14px 26px;

  cursor: pointer;

  -webkit-appearance: none;

  appearance: none;

}

.f-ghost:hover { background: var(--stonelight); color: var(--red110); }

.f-ghost:focus-visible { outline: 2px solid var(--flare); outline-offset: 3px; }

.sa-count {

  display: block;

  margin-top: 6px;

  font-size: 12px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--warm-grey);

  font-variant-numeric: tabular-nums;

}



@keyframes sa-rise {

  from { opacity: 0; transform: translateY(10px); }

  to { opacity: 1; transform: none; }

}

@keyframes sa-rise-back {

  from { opacity: 0; transform: translateX(-16px); }

  to { opacity: 1; transform: none; }

}

@keyframes sa-leave {

  from { opacity: 1; transform: none; }

  to { opacity: 0; transform: translateX(-16px); }

}

@keyframes sa-leave-back {

  from { opacity: 1; transform: none; }

  to { opacity: 0; transform: translateX(16px); }

}

.sa-q.sa-enter { animation: sa-rise .42s cubic-bezier(.22,.61,.36,1) both; }

.sa-q.sa-enter.sa-rev { animation-name: sa-rise-back; }

.sa-q.sa-enter .f-tile-cell {

  animation: sa-rise .42s cubic-bezier(.22,.61,.36,1) both;

  animation-delay: calc(120ms + var(--i, 0) * 55ms);

}

.sa-q.sa-leave {

  position: absolute;

  left: 0;

  right: 0;

  pointer-events: none;

  animation: sa-leave .28s cubic-bezier(.22,.61,.36,1) both;

}

.sa-q.sa-leave.sa-rev { animation-name: sa-leave-back; }



.sa-tool.past-first .sa-mast { padding-bottom: 14px; }



@media (max-width: 760px) {

  .sa-q .f-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 340px; }

  .sa-q .q-gate { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .sa-prog i { width: 34px; }

  .sa-q .f-big { font-size: 28px; }

}

@media (prefers-reduced-motion: reduce) {

  .sa-q.sa-enter, .sa-q.sa-enter .f-tile-cell, .sa-q.sa-leave { animation: none; }

  .sa-q.sa-leave { display: none; }

  .sa-prog i::after { transition: none; }

}





.sa-tool .sa-mast { padding-bottom: 8px; }

.sa-tool .sa-mast h1 { font-size: clamp(22px, 2vw, 27px); }