/* strahovka.rs: application flow, status page and product pages.
   Loaded after styles.css and built from the same colours and type. */

/* ---------- Slim header of the flow ---------- */

.flow-header {
  padding: 18px 0;
}

.flow-header .bar {
  justify-content: space-between;
}

.flow-help {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}

.flow-help a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Progress ---------- */

.progress {
  margin-top: 8px;
  display: grid;
  /* as many equal parts as steps are shown (the passport one is often hidden) */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
}

.progress li {
  list-style: none;
  padding-top: 12px;
  border-top: 3px solid var(--sand);
  font-size: 13px;
  font-weight: 500;
  color: var(--faint);
  transition: border-color 0.3s, color 0.3s;
}

.progress li.done {
  border-top-color: var(--forest-3);
  color: var(--forest-3);
}

.progress li.now {
  border-top-color: var(--forest);
  color: var(--ink);
  font-weight: 600;
}

ol.progress {
  padding: 0;
  margin-bottom: 0;
}

/* ---------- Layout ---------- */

.flow {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 72px;
  align-items: start;
  padding-bottom: 120px;
}

.flow.single {
  grid-template-columns: minmax(0, 720px);
}

.step-pane {
  display: none;
}

.step-pane.on {
  display: block;
  animation: pane 0.35s ease;
}

@keyframes pane {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.step-pane h1 {
  font-size: 40px;
  text-wrap: balance;
}

.step-pane > .lead {
  margin-top: 14px;
  font-size: 18px;
}

.pane-body {
  margin-top: 36px;
}

.pane-nav {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pane-nav .btn-dark {
  min-width: 240px;
  justify-content: space-between;
}

.btn-back {
  height: 60px;
  padding: 0 22px;
  border-radius: var(--pill);
  font-weight: 600;
  font-size: 16px;
  color: var(--muted);
}

.btn-back:hover {
  background: var(--sand);
  color: var(--ink);
}

.btn[disabled],
.btn.off {
  opacity: 0.4;
  pointer-events: none;
}

.error {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 500;
  color: #b3261e;
}

.error:empty {
  display: none;
}

/* ---------- Big choices ---------- */

.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.choice {
  position: relative;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px transparent;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.15s, background 0.15s;
  display: block;
}

.choice:hover {
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice b {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.choice span {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  color: var(--muted);
}

.choice .tick {
  position: absolute;
  right: 22px;
  top: 22px;
}

.choice:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--forest);
  background: #fff;
}

.choice:has(input:checked) .tick {
  background: var(--forest);
  box-shadow: none;
  color: var(--lime);
}

.choice:has(input:checked) .tick .icon {
  opacity: 1;
}

.choice:has(input:focus-visible) {
  outline: 2px solid var(--forest-3);
  outline-offset: 2px;
}

.choices.one {
  grid-template-columns: 1fr;
}

.choices.one .choice {
  padding: 22px 64px 22px 24px;
}

.choices.one .choice b {
  font-size: 18px;
}

.choice-marks {
  margin-top: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.choice-marks .mark {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  background: var(--cream);
}

/* ---------- Fields ---------- */

.group {
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--paper);
}

.group + .group {
  margin-top: 12px;
}

.group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.group-head h2 {
  font-size: 20px;
}

.group-head small {
  font-size: 14px;
  color: var(--muted);
}

.fields {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field {
  display: block;
}

.field.wide {
  grid-column: 1 / -1;
}

.field > span {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

.field input,
.field select {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--cream);
  box-shadow: inset 0 0 0 1.5px transparent;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  transition: box-shadow 0.15s, background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.field input::placeholder {
  color: var(--faint);
}

.field input:focus,
.field select:focus {
  outline: 0;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--forest);
}

.field.bad input {
  box-shadow: inset 0 0 0 2px #b3261e;
}

.field em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 13px;
  color: var(--faint);
}

.note {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: rgba(200, 241, 105, 0.35);
  font-size: 15px;
  line-height: 1.4;
}

.note:empty {
  display: none;
}

.note.demo {
  background: none;
  border: 1px dashed var(--faint);
  color: var(--muted);
}

/* ---------- People and extras in the flow ---------- */

.flow .row,
.flow .age,
.flow .addon {
  background: var(--paper);
}

.flow .stepper button {
  background: var(--cream);
}

.flow .age select {
  background-color: var(--cream);
}

.flow .ages {
  margin-top: 4px;
}

.flow .row {
  margin-top: 0;
}

.flow .small-label {
  margin: 32px 0 10px;
  font-size: 15px;
}

.flow .addon {
  min-height: 72px;
  padding: 14px 20px 14px 18px;
}

.flow .addon-name {
  font-size: 17px;
}

.flow .addon-name small {
  font-size: 14px;
}

.flow .addon-price {
  font-weight: 600;
  color: var(--ink);
  font-size: 16px;
}

/* ---------- Health ---------- */

.health-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 24px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--muted);
}

.health-list li {
  break-inside: avoid;
  padding: 5px 0 5px 16px;
  position: relative;
}

.health-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--faint);
}

.yesno {
  margin-top: 22px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.yesno button {
  height: 52px;
  padding: 0 24px;
  border-radius: var(--pill);
  background: var(--cream);
  font-weight: 600;
  font-size: 16px;
  transition: background 0.15s, color 0.15s;
}

.yesno button:hover {
  background: var(--sand);
}

.yesno button.on {
  background: var(--forest);
  color: var(--cream);
}

.yesno button.on.bad {
  background: #b3261e;
}

.refuse {
  margin-top: 18px;
  padding: 20px;
  border-radius: var(--r-md);
  background: #fbeceb;
  font-size: 16px;
  line-height: 1.45;
}

.refuse b {
  display: block;
  margin-bottom: 4px;
}

.refuse .btn {
  margin-top: 14px;
}

.refuse .btn + .btn {
  margin-left: 6px;
}

/* ---------- Upsell inside the flow ---------- */

.upsell {
  margin-top: 40px;
}

.upsell > h2 {
  font-size: 22px;
}

.upsell > p {
  margin-top: 8px;
  font-size: 16px;
  color: var(--muted);
}

.upsell .choices {
  margin-top: 20px;
}

.upsell .choice {
  padding: 24px 56px 22px 24px;
}

.upsell .choice b {
  font-size: 17px;
}

.upsell .choice a {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--forest-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.boost {
  margin-top: 12px;
  padding: 20px 24px;
  border-radius: var(--r-lg);
  background: var(--forest);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.boost b {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.03em;
}

.boost span {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  color: rgba(243, 239, 230, 0.75);
}

.boost button {
  height: 46px;
  padding: 0 20px;
  border-radius: var(--pill);
  background: var(--lime);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

.boost[hidden] {
  display: none;
}

/* ---------- Summary card ---------- */

.summary {
  position: sticky;
  top: 24px;
}

.summary .sheet {
  box-shadow: 0 30px 70px rgba(11, 31, 24, 0.14);
}

.summary .tear::before,
.summary .tear::after {
  background: var(--cream);
}

.summary h2 {
  margin-top: 14px;
  font-size: 22px;
}

.summary-sub {
  margin-top: 4px;
  font-size: 15px;
  color: var(--muted);
}

.lines {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  font-size: 15px;
}

.lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.lines li span:first-child {
  color: var(--muted);
}

.lines li span:last-child {
  font-weight: 600;
  white-space: nowrap;
}

.lines li.plus span {
  color: var(--forest-3);
}

.summary .total small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--faint);
}

.summary-marks {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.summary-marks .mark {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  background: var(--cream);
}

.assure {
  margin-top: 16px;
  display: grid;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
}

.assure div {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.35;
}

.assure .icon {
  width: 18px;
  height: 18px;
  color: var(--forest-3);
  margin-top: 1px;
}

/* ---------- Done ---------- */

.done-mark {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--forest);
  display: grid;
  place-items: center;
}

.done-mark .icon {
  width: 34px;
  height: 34px;
  stroke-width: 2.6;
}

.done-mark + h1 {
  margin-top: 28px;
}

.number {
  margin-top: 28px;
  padding: 22px 26px;
  border-radius: var(--r-lg);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.number small {
  display: block;
  font-size: 14px;
  color: var(--muted);
}

.number b {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
}

.next {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: next;
  border-top: 1px solid var(--ink);
}

.next li {
  counter-increment: next;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 2px 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.next li::before {
  content: "0" counter(next);
  grid-row: span 2;
  padding-top: 4px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--faint);
}

.next b {
  font-size: 18px;
  font-weight: 600;
}

.next span {
  font-size: 15px;
  color: var(--muted);
}

/* ---------- Status page ---------- */

.status-page {
  max-width: 720px;
  margin: 56px auto 0;
}

.status-page h1 {
  font-size: 44px;
}

.status-form {
  margin-top: 36px;
}

.status-form .fields {
  margin-top: 0;
}

.status-form .btn {
  margin-top: 20px;
}

.status-card {
  margin-top: 40px;
  padding: 40px;
  border-radius: var(--r-xl);
  background: var(--ink);
  color: var(--cream);
}

.status-card[hidden] {
  display: none;
}

.status-card h2 {
  font-size: 26px;
}

.status-card > p {
  margin-top: 8px;
  color: rgba(243, 239, 230, 0.7);
}

/* ---------- Product pages ---------- */

.p-hero {
  padding: 72px 64px;
  border-radius: var(--r-xl);
  background: var(--forest);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.p-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 900px;
  height: 900px;
  right: -300px;
  top: -300px;
  background: url("img/guilloche.svg") center / contain no-repeat;
  opacity: 0.3;
}

.p-hero .official {
  font-size: 13.5px;
}

.p-hero h1 {
  margin-top: 26px;
  font-size: 54px;
  line-height: 1.03;
  max-width: 820px;
  text-wrap: balance;
}

.p-hero h1 em {
  font-style: normal;
  color: var(--lime);
}

.p-hero p {
  margin-top: 24px;
  font-size: 20px;
  line-height: 1.45;
  max-width: 600px;
  color: rgba(243, 239, 230, 0.8);
}

.p-hero .hero-cta {
  margin-top: 36px;
}

.crumbs {
  margin: 8px 0 20px;
  font-size: 14px;
  color: var(--muted);
}

.crumbs a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.p-facts {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.p-how {
  margin-top: 48px;
  border-top: 1px solid var(--ink);
}

.p-how div {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.p-how i {
  font-style: normal;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--faint);
}

.p-how b {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.p-how span {
  font-size: 17px;
  color: var(--muted);
}

.lead-form {
  margin-top: 48px;
  padding: 48px;
  border-radius: var(--r-xl);
  background: var(--lime);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.lead-form h2 {
  font-size: 38px;
  text-wrap: balance;
}

.lead-form > div > p {
  margin-top: 16px;
  font-size: 18px;
  color: rgba(11, 31, 24, 0.78);
  max-width: 420px;
}

.lead-form .fields {
  margin-top: 0;
  grid-template-columns: 1fr;
}

.lead-form .field > span {
  color: rgba(11, 31, 24, 0.7);
}

.lead-form .field input {
  background: #fff;
}

.lead-form .btn {
  margin-top: 8px;
}

.lead-form .thanks {
  padding: 28px;
  border-radius: var(--r-lg);
  background: #fff;
  font-size: 17px;
}

.lead-form .thanks b {
  display: block;
  font-family: var(--font-head);
  font-size: 20px;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

.lead-form [hidden] {
  display: none;
}

.also {
  margin-top: 48px;
  padding: 36px;
  border-radius: var(--r-lg);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.also b {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.also span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

/* ---------- Phones and tablets ---------- */

@media (max-width: 1100px) {
  .flow {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 140px;
  }

  .summary {
    position: static;
  }

  .p-hero {
    padding: 56px 40px;
  }

  .p-hero h1 {
    font-size: 44px;
  }

  .p-facts {
    grid-template-columns: 1fr;
  }

  .lead-form {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 680px) {
  .flow-help span {
    display: none;
  }

  .progress {
    gap: 4px;
  }

  .progress li {
    font-size: 0;
    padding-top: 0;
  }

  .flow {
    margin-top: 28px;
    gap: 28px;
  }

  .step-pane h1 {
    font-size: 27px;
  }

  .step-pane > .lead {
    font-size: 16px;
  }

  .pane-body {
    margin-top: 24px;
  }

  .choices {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .choice {
    padding: 22px 56px 22px 20px;
  }

  .choice b {
    font-size: 18px;
  }

  .group {
    padding: 22px 18px;
  }

  .fields {
    grid-template-columns: 1fr;
  }

  .health-list {
    columns: 1;
  }

  .pane-nav {
    margin-top: 28px;
  }

  .pane-nav .btn-dark {
    flex: 1;
    min-width: 0;
  }

  .btn-back {
    padding: 0 16px;
  }

  .boost {
    padding: 18px 20px;
  }

  .boost button {
    width: 100%;
  }

  .number b {
    font-size: 22px;
  }

  .status-page {
    margin-top: 28px;
  }

  .status-page h1 {
    font-size: 29px;
  }

  .status-card {
    padding: 28px 22px;
  }

  .p-hero {
    padding: 36px 24px;
  }

  .p-hero h1 {
    margin-top: 20px;
    font-size: 30px;
  }

  .p-hero p {
    margin-top: 16px;
    font-size: 17px;
  }

  .p-hero .btn {
    width: 100%;
    justify-content: space-between;
  }

  .p-facts {
    margin-top: 28px;
    gap: 8px;
  }

  .p-how {
    margin: 28px 8px 0;
  }

  .p-how div {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 4px 8px;
    padding: 20px 0;
  }

  .p-how span {
    grid-column: 2;
    font-size: 15px;
  }

  .p-how b {
    font-size: 18px;
  }

  .lead-form {
    margin-top: 28px;
    padding: 28px 22px;
  }

  .lead-form h2 {
    font-size: 27px;
  }

  .lead-form .btn {
    width: 100%;
    justify-content: space-between;
  }

  .also {
    margin-top: 28px;
    padding: 24px 20px;
  }

  .also b {
    font-size: 19px;
  }

  .also .btn {
    width: 100%;
  }
}

/* ---------- Fixes after the first look ---------- */

ol.progress {
  margin-bottom: 40px;
}

.boost button span {
  display: inline;
  margin: 0;
  font-size: inherit;
  color: inherit;
}

@media (max-width: 680px) {
  ol.progress {
    margin-bottom: 28px;
  }
}

.progress[hidden],
.summary[hidden],
.upsell[hidden],
.note[hidden],
.choice[hidden] {
  display: none;
}

.choice .tick .icon {
  opacity: 0;
}

/* ---------- The two programmes as real add-ons ---------- */

.plan-add {
  cursor: default;
  padding: 24px;
}

.plan-add label {
  display: block;
  cursor: pointer;
  padding-right: 40px;
}

.plan-add.picked {
  box-shadow: inset 0 0 0 2px var(--forest);
  background: #fff;
}

.amounts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.amounts:not(:empty) {
  margin-top: 18px;
}

.amounts small {
  width: 100%;
  margin-bottom: 2px;
  font-size: 13px;
  color: var(--muted);
}

.amounts button {
  height: 42px;
  padding: 0 16px;
  border-radius: var(--pill);
  background: var(--cream);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

.amounts button:hover {
  background: var(--sand);
}

.amounts button.on {
  background: var(--forest);
  color: var(--cream);
}

.lines li.plus span:first-child {
  max-width: 230px;
}

/* ---------- Way back to the people and extras from the summary ---------- */

.edit {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--forest-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: left;
}

.edit[hidden] {
  display: none;
}


/* ---------- Sex, height, weight, and the pregnancy question ---------- */

.field.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field.pair label > span {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

label.bad input,
label.bad select {
  box-shadow: inset 0 0 0 2px #b3261e;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1f18' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px;
  cursor: pointer;
}

.field input[type="number"] {
  -moz-appearance: textfield;
}

.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sub-q {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.sub-q h3 {
  font-size: 18px;
}

.sub-q .yesno {
  margin-top: 16px;
}

.link {
  font: inherit;
  font-weight: 600;
  color: var(--forest-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Step one: a card per person with age, sex and extras ---------- */

.person .fields {
  margin-top: 18px;
}

.person .small-label {
  margin: 24px 0 8px;
}

.flow .person .addon {
  background: var(--cream);
}

.flow .person .addon:hover {
  background: var(--sand);
}

.field > span,
.field.pair label > span {
  display: block;
}

.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  height: 56px;
  border-radius: var(--r-md);
  background: var(--cream);
}

.seg button {
  border-radius: calc(var(--r-md) - 4px);
  font-weight: 600;
  font-size: 16px;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}

.seg button:hover {
  color: var(--ink);
}

.seg button.on {
  background: var(--forest);
  color: var(--cream);
}

.seg.bad {
  box-shadow: inset 0 0 0 2px #b3261e;
}

.add-person {
  margin-top: 12px;
  width: 100%;
  height: 60px;
  border-radius: var(--r-lg);
  border: 1.5px dashed rgba(11, 31, 24, 0.3);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  transition: background 0.15s;
}

.add-person:hover {
  background: var(--paper);
}

.add-person[hidden],
.boost[hidden] {
  display: none;
}

.person + .person {
  margin-top: 12px;
}

/* ---------- Signing page ---------- */

.sign {
  margin-top: 40px;
  padding-bottom: 120px;
}

.sign [hidden] {
  display: none;
}

.sign h1 {
  font-size: 34px;
  text-wrap: balance;
}

.sign-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 56px;
  align-items: start;
}

.sign-doc h1 {
  margin-top: 14px;
  overflow-wrap: anywhere;
}

.doc-frame {
  margin-top: 28px;
  width: 100%;
  height: 720px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  display: block;
}

.sign-doc .link {
  display: inline-block;
  margin-top: 14px;
  font-size: 15px;
}

.sign-box {
  position: sticky;
  top: 24px;
  padding: 30px;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: 0 30px 70px rgba(11, 31, 24, 0.14);
}

.sign-box h2 {
  font-size: 22px;
}

.sign-box .seg {
  margin-top: 18px;
  height: 52px;
}

.sign-box .seg button {
  font-size: 15px;
}

.sign-box .field {
  margin-top: 16px;
}

.pad {
  position: relative;
  margin-top: 16px;
  height: 190px;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line);
  overflow: hidden;
}

.pad::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 46px;
  border-bottom: 1.5px dashed rgba(11, 31, 24, 0.25);
  pointer-events: none;
}

.pad canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

.pad > span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--faint);
  pointer-events: none;
}

.pad.used > span {
  opacity: 0;
}

.pad.typed {
  display: flex;
  align-items: center;
  padding: 0 24px 20px;
}

.pad.typed b {
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 54px;
  line-height: 1;
  white-space: nowrap;
}

.sign-box > .link {
  margin-top: 10px;
  font-size: 14px;
}

.agree {
  position: relative;
  margin: 22px 0 4px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.35;
  cursor: pointer;
}

.agree input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.agree .tick .icon {
  opacity: 0;
}

.agree input:checked + .tick {
  background: var(--forest);
  box-shadow: none;
  color: var(--lime);
}

.agree input:checked + .tick .icon {
  opacity: 1;
}

.sign-box .btn {
  margin-top: 18px;
}

/* ---------- Status card additions ---------- */

.status-card .timeline .btn {
  margin-top: 12px;
}

/* ---------- Admin panel ---------- */

.admin {
  max-width: 980px;
  margin: 40px auto 0;
  padding-bottom: 120px;
}

.admin [hidden] {
  display: none;
}

.admin-empty {
  margin-top: 32px;
  padding: 36px;
  border-radius: var(--r-lg);
  background: var(--paper);
  font-size: 18px;
}

.app {
  margin-top: 12px;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--paper);
}

.app header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.app header b {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.app header small {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
}

.state {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--pill);
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--sand);
  white-space: nowrap;
}

.state.s-sign {
  background: #ffe9a8;
}

.state.s-issuing,
.state.s-ready {
  background: var(--lime);
}

.docs {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.docs li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.docs li span:first-child {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.docs .ok {
  color: var(--forest-3);
}

.docs .wait {
  color: var(--muted);
}

.pinged {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
}

.app-actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.app-actions label {
  cursor: pointer;
}

@media (max-width: 1100px) {
  .sign-work {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .sign-box {
    position: static;
  }

  .doc-frame {
    height: 520px;
  }
}

@media (max-width: 680px) {
  .sign {
    margin-top: 24px;
  }

  .sign h1 {
    font-size: 25px;
  }

  .doc-frame {
    height: 380px;
    margin-top: 20px;
  }

  .sign-box {
    padding: 22px 18px;
  }

  .app {
    padding: 22px 18px;
  }

  .docs li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ---------- Investment programmes ---------- */

.amounts em {
  width: 100%;
  margin-top: 8px;
  font-style: normal;
  font-size: 14px;
  color: var(--forest-3);
  font-weight: 600;
}

.p-facts {
  grid-template-columns: repeat(3, 1fr);
}

.forecast {
  margin-top: auto;
  width: 100%;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.forecast b {
  display: block;
  margin: 6px 0 4px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--forest);
}

.forecast small {
  font-size: 14px;
  color: var(--muted);
}

main .extra h3 {
  margin-top: 0;
}

@media (max-width: 1100px) {
  .p-facts {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .p-facts {
    grid-template-columns: 1fr;
  }

  .forecast b {
    font-size: 30px;
  }
}

/* ---------- Smaller covers as chips ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-opt {
  height: 44px;
  padding: 0 16px;
  border-radius: var(--pill);
  background: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.15s, color 0.15s;
}

.chip-opt span {
  font-weight: 500;
  color: var(--muted);
}

.chip-opt:hover {
  background: var(--sand);
}

.chip-opt.on {
  background: var(--forest);
  color: var(--cream);
}

.chip-opt.on span {
  color: var(--lime);
}

.flow-header {
  padding-top: 14px;
}

/* ---------- Health and investment are kept apart ---------- */

.apart {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  margin-bottom: 18px;
  border-radius: var(--pill);
  background: var(--sand);
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest-3);
}

.lines.sub {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.lines.sub li span:first-child {
  color: var(--ink);
  font-weight: 600;
}

.apart-box {
  margin-top: 22px;
  padding: 20px;
  border-radius: var(--r-md);
  background: var(--cream);
}

.apart-box[hidden] {
  display: none;
}

.apart-box .sheet-top {
  padding-top: 0;
  font-size: 10px;
}

.summary .apart-box h2 {
  margin-top: 8px;
  font-size: 17px;
}

.apart-box .summary-sub {
  font-size: 14px;
}

.apart-box .lines {
  margin-top: 14px;
}

/* ==========================================================================
   Added with the server, 2026-09-29: payment page, cabinet, admin panel
   ========================================================================== */

[data-view][hidden],
.pay-page [hidden],
.cabinet [hidden] {
  display: none !important;
}

.btn-plain {
  padding: 0 28px;
}

.lines li.apart-line {
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.lines li.apart-line small {
  display: block;
  font-size: 13px;
  color: var(--faint);
}

.status-more {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.status-more .btn {
  margin-top: 0;
  color: var(--cream);
  box-shadow: inset 0 0 0 1.5px rgba(243, 239, 230, 0.4);
}

.status-more .btn:hover {
  background: var(--cream);
  color: var(--ink);
}

/* ---------- Payment page ---------- */

.pay-page .step-pane.on {
  animation: none;
}

.card-form .group-head .choice-marks {
  margin: 0;
}

.card-form .mark {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  background: var(--cream);
}

.done-mark.bad {
  background: #f6d5d0;
  color: #8f1d17;
}

.coins {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.coin-more {
  grid-column: 1 / -1;
}

.coin,
.coin-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px transparent;
  text-align: left;
  transition: box-shadow 0.15s, background 0.15s;
}

.coin-text {
  min-width: 0;
}

.coin b,
.coin-row b {
  display: block;
  font-weight: 600;
  font-size: 16px;
}

.coin-text > span {
  display: block;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* logo in a white disc so dark and light coins read on both states */
.coin-logo {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
}

.coin-logo img {
  width: 28px;
  height: 28px;
}

.coin-logo .coin-chain {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 16px;
  height: 16px;
  padding: 1px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--paper);
}

.coin-logo-more {
  background: var(--cream);
  color: var(--forest);
}

.coin-logo-more .icon {
  width: 18px;
  height: 18px;
}

.coin:hover,
.coin-row:hover {
  box-shadow: inset 0 0 0 1.5px var(--sand);
}

.coin.on,
.coin-row.on {
  background: var(--forest);
  color: var(--cream);
}

.coin.on .coin-text > span,
.coin-row.on .coin-text > span {
  color: rgba(243, 239, 230, 0.7);
}

.coin.on .coin-logo-more {
  background: rgba(243, 239, 230, 0.15);
  color: var(--cream);
}

.coin-more-face {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.coin-chev {
  width: 18px;
  height: 18px;
  margin-left: auto;
  transition: transform 0.15s;
}

.coin-more.open .coin-chev {
  transform: rotate(180deg);
}

.coin-list {
  grid-column: 1 / -1;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--sand);
}

.coin-find {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 0;
  border-radius: 12px;
  background: var(--cream);
  font: inherit;
  font-size: 16px;
}

.coin-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px;
  max-height: 340px;
  overflow-y: auto;
}

.coin-row {
  padding: 10px 12px;
  background: transparent;
}

.coin-row[hidden] {
  display: none;
}

.coin-empty {
  margin: 8px 4px;
  font-size: 14px;
  color: var(--muted);
}

@media (max-width: 860px) and (min-width: 561px) {
  .coin {
    padding: 12px;
    gap: 10px;
  }
}

@media (max-width: 560px) {
  .coins {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .coin {
    padding: 10px 12px;
    gap: 10px;
  }
  .coin b {
    font-size: 15px;
  }
  .coin-rows {
    grid-template-columns: 1fr;
    max-height: 300px;
  }
}

.transfer {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.transfer-qr {
  padding: 14px;
  border-radius: var(--r-md);
  background: #fff;
  aspect-ratio: 1;
}

.transfer-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.transfer-rows {
  display: grid;
  gap: 16px;
}

.transfer-rows > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: baseline;
}

.transfer-rows small {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--muted);
}

.transfer-rows b {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.transfer-rows b.address {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* ---------- Getting in: cabinet and admin ---------- */

.enter {
  max-width: 520px;
  margin: 56px auto 0;
  padding-bottom: 120px;
}

.enter .title {
  font-size: 40px;
}

.enter form {
  margin-top: 32px;
}

.enter form .btn {
  margin-top: 20px;
}

.enter .field input.code {
  height: 72px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.3em;
  text-align: center;
}

.enter-more {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 15px;
  color: var(--muted);
}

.enter-more a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Cabinet ---------- */

.cabinet {
  max-width: 1080px;
  margin: 0 auto;
  padding-bottom: 120px;
}

.cab-top {
  margin-top: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.cab-top .title {
  font-size: 40px;
}

.cab-me {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  color: var(--muted);
}

.cab-none {
  margin-top: 32px;
  padding: 40px;
  border-radius: var(--r-lg);
  background: var(--paper);
  font-size: 18px;
}

.cab-none p {
  max-width: 560px;
}

.cab-none .btn {
  margin-top: 24px;
}

.cab-app {
  margin-top: 12px;
  border-radius: var(--r-lg);
  background: var(--paper);
}

.cab-app:first-child {
  margin-top: 32px;
}

.cab-head {
  width: 100%;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  text-align: left;
  border-radius: var(--r-lg);
}

.cab-head:hover {
  background: rgba(11, 31, 24, 0.03);
}

.cab-id b {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.cab-id small {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
}

.state.wait {
  background: #ffe9a8;
}

.state.ok {
  background: var(--lime);
}

.state.off {
  color: var(--muted);
}

.cab-body {
  padding: 0 28px 28px;
}

.cab-now {
  padding: 28px 32px;
  border-radius: var(--r-md);
  background: var(--forest);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cab-now b {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.cab-now span {
  display: block;
  margin-top: 6px;
  max-width: 520px;
  font-size: 16px;
  color: rgba(243, 239, 230, 0.75);
}

.cab-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cab-block {
  padding: 28px;
  border-radius: var(--r-md);
  background: var(--cream);
}

.cab-block.dark {
  background: var(--ink);
  color: var(--cream);
}

.cab-block h3 {
  font-size: 18px;
}

.cab-block .timeline {
  margin-top: 24px;
}

.cab-block .lines {
  margin-top: 16px;
}

.cab-names {
  margin-top: 16px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.cab-total {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 2px dashed rgba(11, 31, 24, 0.18);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.cab-total span {
  font-size: 15px;
  color: var(--muted);
}

.cab-total b {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.03em;
}

.cab-empty {
  margin-top: 16px;
  font-size: 15px;
  color: var(--muted);
}

.cab-files,
.cab-news {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.cab-files li,
.cab-news li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.cab-files li:last-child,
.cab-news li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.cab-files b {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.cab-files span,
.cab-news small {
  font-size: 14px;
  color: var(--muted);
}

.cab-news span {
  font-size: 15px;
}

.cab-news small {
  white-space: nowrap;
}

.cab-tg {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 15px;
}

.cab-foot {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Admin panel, with the server ---------- */

.admin-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.admin-top > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.admin .lead {
  font-size: 16px;
  margin-top: 20px;
}

.sending {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sending span {
  padding: 7px 14px;
  border-radius: var(--pill);
  font-size: 13px;
  font-weight: 500;
}

.sending .ok {
  background: var(--lime);
}

.sending .warn {
  box-shadow: inset 0 0 0 1px var(--faint);
  color: var(--muted);
}

.tabs {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: var(--pill);
  background: var(--sand);
  width: fit-content;
  max-width: 100%;
}

.tabs button,
.filters button {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.tabs button.on {
  background: var(--forest);
  color: var(--cream);
}

.tabs em,
.filters em {
  font-style: normal;
  font-weight: 500;
  opacity: 0.6;
}

.filters {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.filters button {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.filters button.on {
  background: var(--ink);
  color: var(--cream);
  box-shadow: none;
}

.state.s-pay,
.state.s-docs {
  background: #ffe9a8;
}

.state.s-sign {
  background: var(--sand);
}

.state.s-cancelled {
  background: none;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
}

.docs li {
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
}

.docs em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--pill);
  background: var(--lime);
}

.app > .link {
  margin-top: 18px;
}

.issue {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--cream);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.issue b {
  width: 100%;
}

.issue .field input {
  height: 46px;
  background: #fff;
  font-size: 15px;
}

.issue label.btn {
  cursor: pointer;
}

.app-more {
  margin-top: 20px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.app-more h3 {
  margin-top: 24px;
  font-size: 15px;
}

.app-more .scroll {
  overflow-x: auto;
}

.people {
  margin-top: 12px;
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.people th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
}

.people th,
.people td {
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.app-more .lines {
  max-width: 460px;
  margin-top: 12px;
}

.app-more .lines .sum {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.app-more .lines .sum span {
  color: var(--ink);
  font-weight: 600;
}

.events,
.sent,
.rows {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 14px;
}

.events li,
.sent li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

[data-sent] .sent li {
  grid-template-columns: 96px 150px minmax(0, 1fr) auto;
}

.events small,
.sent small {
  color: var(--muted);
}

.events em,
.sent em {
  font-style: normal;
  font-size: 13px;
  color: var(--faint);
}

.sent em.failed {
  color: #b3261e;
}

.sent em.sent {
  color: var(--forest-3);
}

.rows li {
  margin-top: 8px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 15px;
}

.rows li.done {
  opacity: 0.5;
}

.rows small {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--muted);
}

.app-more textarea {
  margin-top: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--cream);
  font: inherit;
  font-size: 15px;
  resize: vertical;
}

.app-more textarea:focus {
  outline: 0;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--forest);
}

.demo-row {
  margin-top: 28px;
  gap: 6px 20px;
}

/* ---------- Overlays of the admin panel ---------- */

body.locked {
  overflow: hidden;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  padding: 24px 12px;
  background: rgba(11, 31, 24, 0.6);
  overflow-y: auto;
}

.overlay-card {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 30px 30px;
  border-radius: var(--r-lg);
  background: var(--paper);
}

.overlay-card.wide {
  max-width: 720px;
}

.overlay-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.overlay-top b {
  font-family: var(--font-head);
  font-size: 18px;
}

.overlay-hint {
  margin-top: 8px;
  font-size: 15px;
  color: var(--muted);
}

.place-nav {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
}

.place-sheet {
  position: relative;
  margin: 12px 0 20px;
  width: fit-content;
  box-shadow: 0 0 0 1px var(--line);
  cursor: crosshair;
  line-height: 0;
}

.place-mark {
  position: absolute;
  display: grid;
  place-items: center;
  border: 2px solid var(--forest);
  border-radius: 6px;
  background: rgba(200, 241, 105, 0.55);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}

.mail-frame {
  margin-top: 16px;
  width: 100%;
  height: 72vh;
  border: 0;
  border-radius: var(--r-md);
  background: var(--cream);
}

@media (max-width: 1100px) {
  .cab-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .enter {
    margin-top: 32px;
  }

  .enter .title,
  .cab-top .title {
    font-size: 27px;
    margin-left: 0;
    margin-right: 0;
  }

  .enter .lead,
  .enter .eyebrow,
  .cab-top .eyebrow,
  .admin .lead {
    margin-left: 0;
    margin-right: 0;
  }

  .cab-top {
    margin-top: 32px;
  }

  .cab-head {
    padding: 20px 18px;
  }

  .cab-id b {
    font-size: 19px;
  }

  .cab-body {
    padding: 0 10px 10px;
  }

  .cab-now {
    padding: 22px 18px;
  }

  .cab-now b {
    font-size: 19px;
  }

  .cab-now .btn {
    width: 100%;
    justify-content: space-between;
  }

  .cab-block {
    padding: 22px 18px;
  }

  .cab-none {
    padding: 26px 20px;
  }

  .transfer {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .transfer-qr {
    width: 180px;
  }

  .docs li {
    grid-template-columns: 1fr;
  }

  .events li,
  .sent li,
  [data-sent] .sent li {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .overlay-card {
    padding: 20px 16px 24px;
  }

  .tabs {
    border-radius: var(--r-md);
  }
}

/* ---------- Guide articles ---------- */

.g-page {
  max-width: 1080px;
  margin: 0 auto;
}

.g-page h1 {
  margin-top: 20px;
  max-width: 860px;
  font-size: 46px;
  text-wrap: balance;
}

.g-meta {
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted);
}

.g-answer {
  margin-top: 32px;
  padding: 28px 32px;
  border-radius: var(--r-lg);
  background: var(--lime);
  max-width: 860px;
}

.g-answer b {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.g-answer p {
  margin-top: 10px;
  font-size: 20px;
  line-height: 1.45;
  font-weight: 500;
}

.g-cols {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 220px minmax(0, 720px);
  gap: 64px;
  align-items: start;
}

.g-toc {
  position: sticky;
  top: 24px;
  font-size: 14px;
}

.g-toc b {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.g-toc ol {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.g-toc a {
  color: var(--muted);
}

.g-toc a:hover {
  color: var(--ink);
}

.g-body section + section {
  margin-top: 48px;
}

.g-body h2 {
  font-size: 26px;
  text-wrap: balance;
}

.g-body p,
.g-body ul,
.g-body ol {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.6;
}

.g-body ul,
.g-body ol {
  padding-left: 22px;
}

.g-body li + li {
  margin-top: 8px;
}

.g-body section a,
.g-link a,
.g-sources a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--forest-3);
}

.g-table {
  margin-top: 20px;
  overflow-x: auto;
  border-radius: var(--r-md);
  background: var(--paper);
}

.g-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.4;
}

.g-table th,
.g-table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.g-table th {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--sand);
  border-bottom: 0;
}

.g-table tr:last-child td {
  border-bottom: 0;
}

.g-table td:first-child {
  font-weight: 600;
}

.g-body .faq {
  margin-top: 8px;
}

.g-link {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
  font-size: 18px;
  font-weight: 600;
}

.g-sources {
  margin-top: 48px;
  color: var(--muted);
}

.g-body .g-sources h2 {
  font-size: 15px;
  font-family: var(--font-body);
  font-weight: 600;
}

.g-body .g-sources ul,
.g-body .g-sources p {
  font-size: 14px;
  margin-top: 10px;
}

.g-more {
  padding-top: 88px;
  padding-bottom: 40px;
}

.g-more .guides {
  margin-top: 28px;
}

.g-index {
  margin-top: 56px;
  padding-bottom: 40px;
}

.g-group {
  margin-top: 56px;
}

.g-group h2 {
  font-size: 22px;
}

.g-group .guides {
  margin-top: 20px;
}

@media (max-width: 1100px) {
  .g-cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .g-toc {
    position: static;
    padding: 20px 24px;
    border-radius: var(--r-md);
    background: var(--paper);
  }
}

@media (max-width: 680px) {
  .g-page h1 {
    font-size: 28px;
  }

  .g-answer {
    padding: 22px 20px;
  }

  .g-answer p {
    font-size: 18px;
  }

  .g-cols {
    margin-top: 32px;
  }

  .g-body h2 {
    font-size: 22px;
  }

  .g-body p,
  .g-body ul,
  .g-body ol {
    font-size: 17px;
  }

  .g-table th,
  .g-table td {
    padding: 12px 14px;
    font-size: 15px;
  }

  .g-index .title,
  .g-index .lead,
  .g-index .eyebrow {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ==========================================================================
   The account, second look, 2026-09-29. Built from the homepage: the green
   block, the sheet of paper with a stamp, ruled lists. No plain card grid.
   ========================================================================== */

.acc {
  padding-bottom: 40px;
}

.acc [hidden] {
  display: none !important;
}

.acc-bar {
  margin: 8px 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}

.acc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.acc-tabs button {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--pill);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}

.acc-tabs button.on {
  background: var(--forest);
  color: var(--lime);
  box-shadow: none;
}

.acc-me {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  color: var(--muted);
}

.acc-hero {
  padding: 64px 64px 0;
}

.acc-hero.acc-enter,
.acc-hero.acc-none {
  padding-bottom: 64px;
}

.acc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 72px;
  align-items: center;
}

.acc-hero h1 {
  font-size: 56px;
}

.acc-hero .hero-sub b {
  color: var(--cream);
  font-weight: 600;
}

.acc-hero .hero-cta {
  margin-top: 36px;
}

.acc-points {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  font-size: 18px;
  color: rgba(243, 239, 230, 0.85);
}

.acc-points li {
  display: flex;
  align-items: center;
  gap: 14px;
}

.acc-points .icon {
  width: 26px;
  height: 26px;
  padding: 6px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--forest);
  stroke-width: 3;
}

.acc-sheet,
.acc-form {
  box-shadow: 0 40px 80px rgba(3, 20, 14, 0.45);
}

.acc-sheet h2,
.acc-form h2 {
  margin-top: 14px;
  font-size: 22px;
}

.acc-sheet .tear::before,
.acc-sheet .tear::after {
  background: var(--forest);
}

.acc-names {
  margin-top: 18px;
  font-weight: 600;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.acc-sheet .lines {
  margin-top: 14px;
}

.acc-sheet .total small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--faint);
}

.acc-stamp {
  left: -98px;
  right: auto;
  top: 132px;
  bottom: auto;
  width: 116px;
  height: 116px;
}

.acc-stamp.wait {
  color: #ffe9a8;
}

.acc-form form {
  margin-top: 24px;
}

.acc-form .btn {
  margin-top: 18px;
}

.acc-form .field input.code {
  height: 72px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.3em;
  text-align: center;
}

.acc-more {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 14px;
  color: var(--muted);
}

.acc-more a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* the steps, along the bottom of the green block */

.acc-track {
  list-style: none;
  margin: 64px -64px 0;
  padding: 28px 64px 32px;
  border-top: 1px solid rgba(243, 239, 230, 0.14);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.acc-track li {
  position: relative;
  padding-top: 38px;
}

.acc-track li::before {
  content: "";
  position: absolute;
  left: 24px;
  right: -20px;
  top: 11px;
  height: 2px;
  background: rgba(243, 239, 230, 0.16);
}

.acc-track li.done::before {
  background: var(--lime);
}

.acc-track li:last-child::before {
  display: none;
}

.acc-track .dot {
  position: absolute;
  left: 0;
  top: 0;
}

.acc-track b {
  display: block;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
}

.acc-track small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(243, 239, 230, 0.6);
}

.acc-track li:not(.done):not(.now) b {
  color: rgba(243, 239, 230, 0.45);
}

/* under the green block: ruled lists, like the steps on the homepage */

.acc-below {
  margin: 72px 8px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.acc-rows {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}

.acc-rows li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.acc-rows li > div {
  flex: 1;
  min-width: 0;
}

.acc-rows i {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  display: grid;
  place-items: center;
  color: var(--forest);
}

.acc-rows i .icon {
  width: 20px;
  height: 20px;
}

.acc-rows b {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.acc-rows span {
  font-size: 14px;
  color: var(--muted);
}

.acc-rows.plain b {
  font-weight: 500;
}

.acc-empty {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--ink);
  font-size: 15px;
  color: var(--muted);
}

.acc-tg {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 15px;
}

.acc-foot {
  margin: 56px 8px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 1100px) {
  .acc-hero {
    padding: 48px 40px 0;
  }

  .acc-hero.acc-enter,
  .acc-hero.acc-none {
    padding-bottom: 48px;
  }

  .acc-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .acc-sheet,
  .acc-form {
    max-width: 460px;
  }

  .acc-stamp {
    left: auto;
    right: -58px;
    top: 120px;
  }

  .acc-hero h1 {
    font-size: 44px;
  }

  .acc-track {
    margin: 48px -40px 0;
    padding: 28px 40px 32px;
  }

  .acc-below {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}

@media (max-width: 680px) {
  .acc-hero {
    padding: 32px 20px 0;
  }

  .acc-hero.acc-enter,
  .acc-hero.acc-none {
    padding-bottom: 28px;
  }

  .acc-hero h1 {
    font-size: 32px;
    margin-top: 20px;
  }

  .acc-hero .hero-sub {
    font-size: 17px;
    margin-top: 16px;
  }

  .acc-hero .hero-cta .btn {
    width: 100%;
    justify-content: space-between;
  }

  .acc-points {
    font-size: 16px;
    margin-top: 24px;
  }

  .acc-grid {
    gap: 36px;
  }

  .acc-sheet,
  .acc-form {
    padding: 26px 20px 22px;
  }

  .acc-sheet .tear {
    margin-left: -20px;
    margin-right: -20px;
  }

  .acc-stamp {
    width: 84px;
    height: 84px;
    left: auto;
    right: -6px;
    top: -38px;
  }

  .acc-sheet .sheet-top span:last-child {
    display: none;
  }

  .acc-track {
    margin: 36px -20px 0;
    padding: 24px 20px 28px;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .acc-track li {
    padding: 0 0 20px 40px;
  }

  .acc-track li:last-child {
    padding-bottom: 0;
  }

  .acc-track li::before {
    left: 11px;
    right: auto;
    top: 24px;
    bottom: 0;
    width: 2px;
    height: auto;
  }

  .acc-below {
    margin-top: 48px;
    gap: 44px;
  }

  .acc-rows li {
    flex-wrap: wrap;
  }

  .acc-rows li > div {
    flex: 1 1 calc(100% - 60px);
  }

  .acc-rows .btn {
    margin-left: 60px;
  }

  .acc-me {
    margin-left: 0;
  }
}

/* The steps stay in view while the page scrolls, the way the order card
   on the right does. Owner, 2026-09-29: "make steps scroll too". */
.flow ol.progress {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-top: -18px;
  padding: 18px 0 16px;
  background: var(--cream);
}

.flow ol.progress::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 18px;
  background: linear-gradient(var(--cream), rgba(243, 239, 230, 0));
  pointer-events: none;
}

@media (max-width: 680px) {
  .flow ol.progress {
    margin-top: -12px;
    padding: 12px 0 10px;
  }
}

/* ---------- Somebody has an illness from the list ----------
   They say what it is, we ask the insurer for a price. 2026-09-30. */

.tell {
  margin-top: 18px;
  padding: 22px;
  border-radius: var(--r-md);
  background: rgba(200, 241, 105, 0.3);
  font-size: 16px;
  line-height: 1.45;
}

.tell b {
  display: block;
  font-size: 17px;
}

.tell p {
  margin-top: 6px;
  color: var(--muted);
}

.tell .field {
  margin-top: 16px;
}

.tell .link {
  margin-top: 12px;
  font-size: 14px;
}

.field textarea {
  width: 100%;
  min-height: 112px;
  padding: 16px 18px;
  border: 0;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px transparent;
  font: inherit;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  resize: vertical;
}

.field textarea::placeholder {
  color: var(--faint);
}

.field textarea:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--forest);
}

.field.bad textarea {
  box-shadow: inset 0 0 0 2px #b3261e;
}

.total b.soft {
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--muted);
}

.progress li.skip {
  opacity: 0.35;
}

.tg-box {
  margin-top: 12px;
  padding: 22px 26px;
  border-radius: var(--r-lg);
  background: var(--forest);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.tg-box[hidden],
.step-pane [hidden] {
  display: none;
}

.tg-box b {
  display: block;
  font-family: var(--font-head);
  font-size: 17px;
}

.tg-box span {
  display: block;
  margin-top: 4px;
  max-width: 420px;
  font-size: 15px;
  color: rgba(243, 239, 230, 0.72);
}

.ill {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: rgba(200, 241, 105, 0.3);
  font-size: 15px;
}

.ill ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ill li b,
.ill li span {
  display: block;
}

.ill li span {
  margin-top: 2px;
  white-space: pre-wrap;
}

.ill .issue {
  margin-top: 16px;
  padding: 0;
  background: none;
}

.ill .issue .grow {
  flex: 1 1 260px;
}

.state.s-review {
  background: var(--lime);
}

.state.s-declined {
  background: none;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
}

/* The steps in the account are as many as the server gives: five for an
   ordinary application, six for one that waits for the insurer's price */
@media (min-width: 681px) {
  .acc-track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}

/* ---------- Main page, 2026-09-30: every product, the ВНЖ one first ---------- */
.extra-must {
  background: var(--forest);
  color: var(--cream);
  box-shadow: none;
}

.extra.extra-must p,
.extra.extra-must .p-price {
  color: var(--cream);
}

.extra.extra-must h3,
.extra .p-tag + h3 {
  margin-top: 12px;
}

.extra-must > i {
  background: var(--lime);
  color: var(--forest);
}

.extra-must li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8f169' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.extra-must .btn-dark {
  background: var(--lime);
  color: var(--forest);
}

.p-must {
  margin-top: 16px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--forest);
  font-size: 13px;
  font-weight: 700;
}

.extra .p-price {
  margin-bottom: 20px;
  font-family: 'Unbounded', sans-serif;
  font-size: 20px;
  color: var(--forest);
}

.p-hero .accept {
  margin-top: 32px;
}

/* A tag on a card that is not the mandatory one, same place and size */
.p-tag {
  background: var(--cream);
  color: var(--forest);
  box-shadow: inset 0 0 0 1.5px var(--line);
}

/* Three products in one row on the main page */
@media (min-width: 1101px) {
  .extras.extras-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .extras-3 .extra {
    padding: 30px;
  }
}

/* Main page cards: what each product gives, all open, in groups:
   «Главное» first, then the rest. 2026-10-01 */
.p-groups {
  width: 100%;
  margin: 24px 0 28px;
}

.p-group {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--forest-3);
}

.p-group:first-child {
  margin-top: 0;
}

.extra .p-groups ul {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.45;
}

/* «Главное» reads first: a little larger */
.extra .p-groups ul:nth-of-type(1) {
  font-size: 16px;
  font-weight: 500;
}

.extra-must .p-group {
  color: var(--lime);
}

/* The protection on the person card: another insurer's contract, so it
   sits apart from the policy extras with a line above. 2026-10-01 */
.addon-apart {
  margin-top: 10px;
  box-shadow: inset 0 0 0 1.5px var(--line);
  background: var(--paper);
}

.step-pane[data-step="5"] .amounts {
  margin-top: 0;
  gap: 8px;
}

.step-pane[data-step="5"] .amounts button {
  height: 48px;
  padding: 0 20px;
  font-size: 16px;
}

/* A welcome line in the error slot that is a note, not a fault */
.error.calm {
  color: var(--forest-3);
}

/* ---------- Hero with a photo (home, faq) ---------- */
.p-hero.has-photo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
  padding-right: 28px;
}
.p-hero .hero-pic {
  position: relative;
  align-self: stretch;
  min-height: 440px;
}
.p-hero .hero-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: var(--r-lg);
  display: block;
}
@media (max-width: 900px) {
  .p-hero.has-photo {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-right: 24px;
  }
  .p-hero .hero-pic {
    min-height: 240px;
  }
}

/* ---------- Home hero: two products ---------- */
.hero-two {
  position: relative;
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--r-xl);
  padding: 48px 48px 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-two::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 900px;
  height: 900px;
  right: -300px;
  top: -400px;
  background: url("img/guilloche.svg") center / contain no-repeat;
  opacity: 0.25;
}
.hero-two-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 28px;
}
.hero-two h1 {
  margin-top: 22px;
  font-size: 50px;
  line-height: 1.03;
  text-wrap: balance;
}
.hero-two h1 em {
  font-style: normal;
  color: var(--lime);
}
.hero-two-top p {
  font-size: 18px;
  line-height: 1.45;
  color: rgba(243, 239, 230, 0.8);
  padding-bottom: 6px;
}
.hero-two-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.hp {
  position: relative;
  min-height: 500px;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  color: var(--cream);
  text-decoration: none;
  transition: transform 0.25s ease;
}
.hp:hover {
  transform: translateY(-3px);
}
.hp img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  transition: transform 0.6s ease;
}
.hp:hover img {
  transform: scale(1.03);
}
.hp::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 59, 46, 0) 30%, rgba(12, 59, 46, 0.82) 68%, rgba(12, 59, 46, 0.96) 100%);
}
.hp-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 8px 14px;
  border-radius: var(--pill);
  background: var(--cream);
  color: var(--forest);
  font-size: 13px;
  font-weight: 600;
}
.hp-tag-must {
  background: var(--lime);
}
.hp-body {
  display: block;
}
.hp-title {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.hp-text {
  display: block;
  margin-top: 10px;
  max-width: 440px;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(243, 239, 230, 0.85);
}
.hp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.hp-price b {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
}
.hp-price small {
  margin-left: 8px;
  font-size: 14px;
  color: rgba(243, 239, 230, 0.75);
}
.hp .btn-line {
  color: var(--cream);
  box-shadow: inset 0 0 0 1.5px rgba(243, 239, 230, 0.6);
}
.hero-two .accept {
  margin: 32px -48px 0;
  padding: 22px 48px;
}
@media (max-width: 1100px) {
  .hero-two h1 { font-size: 42px; }
  .hp { min-height: 440px; }
}
@media (max-width: 900px) {
  .hero-two { padding: 28px 20px 0; }
  .hero-two-top { grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; }
  .hero-two h1 { font-size: 32px; margin-top: 16px; }
  .hero-two-top p { font-size: 16px; padding-bottom: 0; }
  .hero-two-grid { grid-template-columns: 1fr; gap: 14px; }
  .hp { min-height: 380px; padding: 20px; }
  .hp-title { font-size: 24px; }
  .hp-foot .btn { width: 100%; justify-content: space-between; }
  .hero-two .accept { margin: 24px -20px 0; padding: 18px 20px; }
}

/* ---------- Home: why-us photo, stories, reviews ---------- */
.why-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: stretch;
}
.why-grid .p-facts {
  margin-top: 0;
  grid-template-columns: 1fr 1fr;
}
.why-photo {
  min-height: 100%;
}
.cases {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.case {
  position: relative;
  padding: 28px 24px 24px;
  border-radius: var(--r-lg);
  background: var(--paper);
}
.case h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  padding-right: 80px;
}
.case dl {
  margin-top: 18px;
}
.case dt {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime-ink, #4a7a1d);
}
.case dd {
  margin-top: 4px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--muted);
}
.case dd:last-child {
  color: var(--ink);
  font-weight: 500;
}
.g-photo {
  margin: 24px 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 320px;
}
.g-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  display: block;
}
.g-photo-wide {
  height: 380px;
  margin: 32px 0 8px;
}
@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-photo { min-height: 260px; }
  .why-grid .p-facts { grid-template-columns: 1fr; }
  .cases { grid-template-columns: 1fr; }
  .g-photo, .g-photo-wide { height: 220px; }
}

.case dd {
  margin-left: 0;
}


/* ---------- Payment choice logos ---------- */
.choice-logos {
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
}
.choice-logos img {
  display: block;
  height: 22px;
  width: auto;
}
.choice-logos img[alt="Mastercard"] {
  height: 26px;
}
.choice-logos img[alt="СБП"] {
  height: 32px;
}
.choice-logos img[alt="Tether"],
.choice-logos img[alt="Bitcoin"] {
  height: 26px;
}
@media (max-width: 700px) {
  .choice-logos {
    position: static;
    transform: none;
    margin-top: 14px;
  }
}

/* ---------- Hero photo bleeding to the edge (FAQ) ---------- */
.p-hero.has-photo.bleed {
  display: block;
  min-height: 460px;
  padding-right: 64px;
}
.p-hero.bleed .hero-copy {
  position: relative;
  z-index: 1;
  max-width: 46%;
}
.p-hero.bleed .hero-pic {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  min-height: 0;
}
.p-hero.bleed .hero-pic img {
  border-radius: 0;
  object-position: 60% 40%;
}
.p-hero.bleed .hero-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--forest) 0%, rgba(12, 59, 46, 0.85) 18%, rgba(12, 59, 46, 0.35) 42%, rgba(12, 59, 46, 0) 65%);
}
@media (max-width: 900px) {
  .p-hero.has-photo.bleed {
    min-height: 0;
    padding-right: 24px;
  }
  .p-hero.bleed .hero-copy {
    max-width: none;
  }
  .p-hero.bleed .hero-pic {
    position: relative;
    width: auto;
    min-height: 240px;
    margin: 24px -24px -36px;
  }
  .p-hero.bleed .hero-pic::after {
    background: linear-gradient(180deg, var(--forest) 0%, rgba(12, 59, 46, 0) 45%);
  }
}

/* Without a policy the other contract is the whole card: no box of its own */
.apart-box.flat {
  margin-top: 0;
  padding: 0;
  background: none;
}
.apart-box.flat .sheet-top,
.apart-box.flat h2,
.apart-box.flat .summary-sub {
  display: none;
}

/* Home panels: the family photo has empty kitchen on its left, show its
   right part. The two panels share grid rows (subgrid), so title, text and
   price line up whatever the text length; old browsers get fixed heights. */
.hp img.pos-right {
  object-position: 100% 40%;
}
@supports (grid-template-rows: subgrid) {
  .hero-two-grid {
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    /* a spanning item's min-height does not size a 1fr track, so the
       height sits on the grid itself */
    min-height: 500px;
  }
  .hp {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    align-items: start;
    min-height: 0;
  }
  .hp-body {
    display: contents;
  }
  .hp-title { grid-row: 2; }
  .hp-text { grid-row: 3; }
  .hp-foot { grid-row: 4; }
}
@supports not (grid-template-rows: subgrid) {
  .hp-title { min-height: 2.2em; display: flex; align-items: flex-end; }
  .hp-text { min-height: calc(4 * 1.45em); }
}
@media (max-width: 1100px) {
  .hero-two-grid { min-height: 440px; }
}
@media (max-width: 900px) {
  .hero-two-grid { grid-template-rows: none; min-height: 0; }
  .hp { display: flex; grid-row: auto; }
  .hp-body { display: block; }
  .hp-title, .hp-text { min-height: 0; }
}

/* Hover on a home panel dims its photo, so the text comes forward */
.hp img {
  transition: transform 0.6s ease, filter 0.4s ease;
}
.hp:hover img,
.hp:focus-visible img {
  filter: brightness(0.55) saturate(0.8);
}

/* ---------- Passport photos, 2026-10-04 ---------- */
.pass .pass-lead { margin: 0 0 14px; }
.pass .acc-rows li .link { margin-right: 6px; }
.pass .btn.off { opacity: .6; pointer-events: none; }
.pass .pass-error:empty { display: none; }
.done-pass { margin: 26px 0 6px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.done-pass h2 { margin: 0 0 12px; font-size: 20px; }
@media (max-width: 640px) { .done-pass { padding: 18px 16px; } }

/* ---------- Consent line under the pay button, 2026-10-04 ---------- */
.pane-nav .consent { flex-basis: 100%; margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.pane-nav .consent a { text-decoration: underline; }

/* ---------- Legal pages: room above each heading, 2026-10-04 ---------- */
.g-page.legal section { margin-top: 34px; }
.g-page.legal section h2 { margin-top: 0; }
.g-page.legal .g-toc { margin-bottom: 8px; }

/* Summary card, owner 2026-10-05: "each data point to fit on a line".
   Lines never wrap (a very long name is cut with «…»), the heading is
   one line, the note under the total takes the full width below it. */
.summary h2[data-sum-head] {
  white-space: nowrap;
}
.lines {
  grid-template-columns: minmax(0, 1fr);
}
.lines li {
  min-width: 0;
}
.lines li span:first-child {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.summary .total,
.acc-sheet .total {
  flex-wrap: wrap;
  row-gap: 4px;
}
.summary .total > span,
.acc-sheet .total > span {
  white-space: nowrap;
}
.summary .total small,
.acc-sheet .total small {
  flex-basis: 100%;
  margin-top: 0;
}

/* Surname and first name hint above the two fields (2026-10-05). Turns
   red the moment a Russian letter is typed. */
.name-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.name-note.warn {
  color: #b42318;
  font-weight: 600;
}

/* Order card, 2026-10-05 (owner: "poor ui ux too cluttered"): heading
   «Ваш заказ» with «Изменить» on the right, then one plain group per
   kind of policy (small label, name and price rows), then the total. */
.sum-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.summary .sum-top h2 {
  margin: 0;
  font-size: 22px;
}
.sum-top .sum-id {
  font-size: 14px;
  color: var(--faint);
}
.sum-top .sum-id:empty {
  display: none;
}
.sum-top .edit {
  margin: 0 0 0 auto;
}
.sum-part {
  margin-top: 22px;
}
.sum-part[hidden] {
  display: none;
}
.sum-group {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.sum-part .lines {
  margin-top: 10px;
}
.sum-part + .sum-part {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* What each policy covers, on the order card: the «?» window's lime
   ticks, a size smaller (2026-10-05). */
.sum-cover {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 12px;
  display: grid;
  gap: 7px;
  font-size: 14px;
  line-height: 1.35;
  border-bottom: 1px dashed var(--line);
}
.sum-cover li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.sum-cover .icon {
  width: 18px;
  height: 18px;
  flex: none;
  padding: 4px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--forest);
  stroke-width: 3;
}


/* 2026-10-07: on phones the tag sits above the title instead of over it,
   and the photo keeps a clear strip at the top */
@media (max-width: 900px) {
  .hp { justify-content: flex-start; }
  .hp-tag { position: relative; top: auto; left: auto; align-self: flex-start; }
  .hp-body { margin-top: 150px; }
}

/* SBP: the rouble estimate under the euro total, 2026-10-07 */
.summary .total .sum-rub,
.acc-sheet .total .sum-rub {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--forest-3);
}
.summary .total .sum-rub[hidden] { display: none; }

/* the bot as a way to send the passport, inside the passport block
   (owner, 2026-10-08: on a phone they can send it to the bot) */
.pass-tg {
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--forest);
  color: var(--cream);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px 16px;
}

.pass-tg i {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2aabee;
  color: #fff;
  display: grid;
  place-items: center;
}

.pass-tg i svg {
  width: 22px;
  height: 22px;
}

.pass-tg b {
  display: block;
  font-family: var(--font-head);
  font-size: 16px;
}

.pass-tg span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(243, 239, 230, 0.75);
}

.pass-tg + .pass-ways {
  margin-top: 10px;
  font-size: 14px;
}

@media (max-width: 560px) {
  .pass-tg {
    grid-template-columns: auto 1fr;
  }
  .pass-tg .btn {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

/* the passport sample, the whole picture (owner, 2026-10-08) */
.pass-sample {
  display: block;
  margin: 0 0 14px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--cream);
  color: inherit;
  text-decoration: none;
}

.pass-sample b {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
}

.pass-sample img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
}

/* the bot on every checkout step, connected state (2026-10-08) */
.flow-tg-ok {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--forest);
}
.flow-tg-ok[hidden] { display: none; }
.flow-tg-ok .icon { width: 18px; height: 18px; flex: none; }
.summary .tg-box { padding: 18px 20px; }

/* contacts step: the bot inside the form (owner, 2026-10-08: "semi mandatory") */
.tg-main { margin: 0 0 18px; }
.tg-main b { font-size: 20px; }
.tg-tag { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 600 12px/1.4 var(--font-body); font-style: normal; vertical-align: middle; }
.flow-tg-ok[data-flow-tg-ok-main] { margin: 0 0 18px; font-size: 15px; }

/* contacts step: Telegram is a required field (2026-10-08) */
.tg-field .tg-main { margin: 6px 0 0; }
.tg-field.bad .tg-main { box-shadow: 0 0 0 3px #e5484d; }
.tg-field .flow-tg-ok { margin: 8px 0 0; }

/* ---------- the flow on phones (owner, 2026-10-08: "not optimised for
   mobile": help link, progress, order card at the bottom) ---------- */
.flow-help .long { font-style: normal; }
.sum-toggle { display: none; }
@media (max-width: 1100px) {
  /* progress first, then the folded order card, then the step */
  .flow:not(.single) > div:first-child { display: contents; }
  .flow:not(.single) .progress { order: -3; }
  .flow > .summary { order: -2; }
  .flow:not(.single) .progress-now { order: -1; margin-bottom: -8px; }
  .flow > .summary:not(.open) .sum-part,
  .flow > .summary:not(.open) .tear,
  .flow > .summary:not(.open) .assure,
  .flow > .summary:not(.open) .tg-box,
  .flow > .summary:not(.open) .flow-tg-ok,
  .flow > .summary:not(.open) .total > span,
  .flow > .summary:not(.open) .total > small { display: none; }
  .flow > .summary:not(.open) .sheet { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
  /* «Ваш заказ» with the order number under it, the button beside them */
  .flow > .summary:not(.open) .sum-top { margin: 0; display: grid; grid-template-columns: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; justify-content: start; }
  .flow > .summary:not(.open) .sum-top h2 { margin: 0; font-size: 18px; white-space: nowrap; grid-column: 1; grid-row: 1; }
  .flow > .summary:not(.open) .sum-id { grid-column: 1; grid-row: 2; font-size: 12px; white-space: nowrap; }
  .flow > .summary:not(.open) .sum-id:empty { display: none; }
  .flow > .summary:not(.open) .sum-toggle { grid-column: 2; grid-row: 1 / span 2; }
  .flow > .summary:not(.open) .total { margin: 0; padding: 0; border: 0; display: block; }
  .flow > .summary:not(.open) .total b { font-size: 22px; }
  .flow > .summary:not(.open) .edit { display: none; }
  .flow > .summary:not(.open) .sheet::before, .flow > .summary:not(.open) .sheet::after { display: none; }
  .sum-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font: 600 13px/1 var(--font-body); color: var(--ink); cursor: pointer; }
  .sum-toggle::after { content: "▾"; font-size: 11px; }
  .summary.open .sum-toggle::after { content: "▴"; }
}
@media (max-width: 680px) {
  .flow-header { padding: 12px 0; }
  .flow-help .long { display: none; }
  .flow-help a { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--forest); color: var(--cream); text-decoration: none; font-size: 14px; font-weight: 600; }
  .progress { gap: 5px; }
  .progress li { border-top-width: 4px; border-radius: 2px; }
  .flow { margin-top: 14px; gap: 14px; }
  .step-pane > .lead { margin-left: 0; margin-right: 0; }
  .group-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .tg-main { padding: 18px; }
  .tg-main .btn { width: 100%; justify-content: center; }
}
/* phones: logo and the Telegram pill off the screen edges (owner, 2026-10-08) */
@media (max-width: 680px) {
  .flow-header .bar { padding-left: 18px; padding-right: 10px; }
}
/* phones: the payment QR in the middle, a little bigger (owner, 2026-10-08) */
@media (max-width: 680px) {
  .transfer-qr { width: 220px; justify-self: center; }
}