/* Application (/application): a four-step form in a plain, formal register.
   Stepper on top, one white card per step, hairline tables. Benefits are
   carried by the key-figures strip and a lightly tinted compensation section,
   not by marketing copy. */

.app { max-width: 920px; margin: 0 auto; }
.app-head { display: grid; gap: 26px; }
.app-head .two { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.04em; line-height: 1.08; }

/* Stepper */
.stepper { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stepper li { position: relative; }
.stepper button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 0 0; border: 0; border-top: 2px solid var(--rule);
  background: none; font: 700 14px "Inter", sans-serif; color: var(--ink-3); text-align: left; cursor: default;
}
.stepper button:not(:disabled) { cursor: pointer; }
.stepper button:not(:disabled):hover { color: var(--ink); }
.stepper button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.stepper .n {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none;
  font-size: 12px; background: #e6e7e1; color: var(--ink-2);
}
.stepper li[aria-current="step"] button { border-top-color: var(--ink); color: var(--ink); }
.stepper li[aria-current="step"] .n { background: var(--ink); color: var(--white); }
.stepper li.done button { border-top-color: var(--green); color: var(--ink-2); }
.stepper li.done .n {
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.2l2.6 2.4L9 1.2' fill='none' stroke='%230a0a0a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
  color: transparent;
}

/* Card */
.app-card { margin-top: 26px; padding: clamp(22px, 4vw, 48px); background: var(--white); border: 1px solid var(--rule); border-radius: 20px; }
.step h2, .app-done h2 { font-size: clamp(21px, 2vw, 25px); font-weight: 700; letter-spacing: -0.025em; }
.step h2:focus, .app-done h2:focus { outline: none; }
.lead { margin-top: 8px; max-width: 660px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }

/* Step 1: key figures, then the terms */
.keys { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 28px; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.keys div { padding: 16px 18px 18px; border-top: 3px solid var(--green); }
.keys div + div { border-left: 1px solid var(--rule); }
.keys dt { font-size: 13px; color: var(--ink-3); }
.keys dd { margin-top: 4px; font-size: clamp(16px, 1.6vw, 19px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }

.terms { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 15px; }
.terms th[scope="rowgroup"] {
  padding: 30px 0 10px; text-align: left; font-size: 15px; font-weight: 700; color: var(--ink);
  border-bottom: 1px solid var(--ink);
}
.terms th[scope="row"] { width: 32%; padding: 14px 20px 14px 0; text-align: left; font-weight: 400; color: var(--ink-3); vertical-align: top; }
.terms td { padding: 14px 0; color: var(--ink); line-height: 1.55; vertical-align: top; }
.terms tr + tr th[scope="row"], .terms tr + tr td { border-top: 1px solid #ecece7; }
.terms .hl tr:not(:first-child) { background: rgba(0, 191, 99, .055); }
.terms .hl th[scope="row"] { padding-left: 14px; }
.terms .hl td { font-weight: 700; padding-right: 14px; }

.confirm {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 16px 18px;
  border-radius: 12px; background: #f5f5f2; font-size: 15px; line-height: 1.45; cursor: pointer;
}
.step[data-step="1"] .confirm { margin-top: 32px; }
.confirm input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--green); cursor: pointer; }
.confirm.invalid, .confirm:has(input.invalid) { background: #fbe9e5; }

/* Step 2: fields */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 28px; }
.fields .wide { grid-column: 1 / -1; }
.fields label, .tz { display: grid; gap: 7px; }
.fields label > span, .tz > span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.fields em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.fields input, .fields select, .fields textarea, .tz input {
  width: 100%; padding: 12px 14px; border: 1px solid transparent; border-radius: 10px; outline: none;
  background: #f3f3ef; font: 400 15px "Inter", sans-serif; color: var(--ink); transition: border-color .2s, background .2s;
}
.fields textarea { resize: vertical; min-height: 120px; }
.fields select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234a4a48' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 11px 8px;
}
.fields select:invalid { color: var(--ink-3); }
.fields input:focus, .fields select:focus, .fields textarea:focus, .tz input:focus { border-color: var(--ink); background-color: var(--white); }
.fields .invalid, .tz .invalid { background-color: #fbe9e5; }

/* Step 3: weekly grid */
.tz { max-width: 340px; margin-top: 26px; }
.grid { display: grid; gap: 6px; margin-top: 24px; }
.g-row { display: grid; grid-template-columns: 112px repeat(3, 1fr); gap: 6px; align-items: center; }
.g-headrow { margin-bottom: 4px; }
.g-col { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.g-col small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.g-day { font-size: 14px; color: var(--ink-2); }
.g-cell { position: relative; display: block; height: 44px; cursor: pointer; }
.g-cell input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.g-cell span[aria-hidden] {
  position: absolute; inset: 0; border-radius: 10px; background: #f3f3ef; border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.g-cell:hover span[aria-hidden] { border-color: #cfd0c9; }
.g-cell input:checked + span {
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.2l2.6 2.4L9 1.2' fill='none' stroke='%230a0a0a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.g-cell input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.hours { margin-top: 18px; font-size: 15px; color: var(--ink-2); }
.hours b { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.hours.ok b { color: #00a556; }
.hours span { color: #c2452e; }

/* Step 4: review */
.review { display: grid; gap: 16px; margin-top: 26px; }
.review section { border: 1px solid var(--rule); border-radius: 12px; padding: 6px 20px 8px; }
.review header { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 10px; border-bottom: 1px solid var(--ink); }
.review h3 { font-size: 15px; font-weight: 700; }
.edit { background: none; border: 0; padding: 0; font: 700 14px "Inter", sans-serif; color: #00a556; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.edit:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.review dl div { display: grid; grid-template-columns: 32% 1fr; gap: 20px; padding: 12px 0; font-size: 15px; }
.review dl div + div { border-top: 1px solid #ecece7; }
.review dt { color: var(--ink-3); }
.review dd { color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Footer of the card: back, note, next / submit */
.app-nav { display: flex; align-items: center; gap: 14px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--rule); }
.app-nav .note { flex: 1; font-size: 13px; color: #c2452e; }
.back {
  padding: 13px 22px; border: 1px solid var(--rule); border-radius: 999px; background: none; cursor: pointer;
  font: 700 15px "Inter", sans-serif; color: var(--ink);
}
.back:hover { background: #f3f3ef; }
.back:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.app-nav [hidden] { display: none; }

.app-done { display: grid; justify-items: start; gap: 18px; }

@media (max-width: 720px) {
  .stepper button { font-size: 0; gap: 0; }
  .stepper .n { font-size: 12px; }
  .stepper li[aria-current="step"] button { font-size: 13px; gap: 8px; }
  .keys { grid-template-columns: 1fr 1fr; }
  .keys div:nth-child(3) { border-left: 0; }
  .keys div:nth-child(n+3) { border-top: 3px solid var(--green); }
  .terms th[scope="row"] { width: 38%; }
  .fields { grid-template-columns: 1fr; }
  .g-row { grid-template-columns: 84px repeat(3, 1fr); gap: 5px; }
  .g-col small { display: none; }
  .g-day { font-size: 13px; }
  .review dl div { grid-template-columns: 1fr; gap: 2px; }
  .app-nav { flex-wrap: wrap; }
  .app-nav .note { order: 3; flex-basis: 100%; }
}