/* 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;
  grid-template-columns: repeat(6, 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 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.coin {
  padding: 12px 18px;
  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 b {
  display: block;
  font-weight: 600;
  font-size: 16px;
}

.coin span {
  font-size: 13px;
  color: var(--muted);
}

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

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

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

.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="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; }