html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/*--------------------------------------*/
:root {
    --ink: #22201d;
    --ink-soft: #4d4842;
    --paper: #fbfaf7;
    --card: #ffffff;
    --line: #e7e2d8;
    --accent: #2f6b5e;
    --accent-deep: #245247;
    --accent-wash: #eef4f1;
    --gold: #b98a3e;
    --focus: #1c5fd6;
    --err: #b23b3b;
    --radius: 14px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Assistant',sans-serif;
    background: var(--paper);
    color: var(--ink);
    font-size: 20px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased
}

h1, h2, h3 {
    font-family: 'Frank Ruhl Libre',serif;
    line-height: 1.25
}

@media(prefers-reduced-motion:reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important
    }
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .opt:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px
}

/* header */
header {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 40
}

.head-in {
    max-width: 820px;
    margin: 0 auto;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Frank Ruhl Libre',serif;
    font-weight: 900;
    font-size: 19px
}

    .brand .mark {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--accent-wash);
        border: 2px solid var(--accent);
        display: grid;
        place-items: center;
        color: var(--accent-deep);
        flex-shrink: 0
    }

.help {
    font-weight: 700;
    color: var(--accent-deep);
    text-decoration: none;
    font-size: 17px;
    white-space: nowrap
}

    .help:hover {
        text-decoration: underline
    }

/* progress */
.progress-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 22px
}

.progress {
    height: 10px;
    background: var(--accent-wash);
    border-radius: 99px;
    margin: 18px 0 6px;
    overflow: hidden
}

.bar {
    height: 100%;
    background: var(--accent);
    width: 0%;
    transition: width .35s ease;
    border-radius: 99px
}

.progress-label {
    font-size: 15px;
    color: var(--ink-soft);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between
}

/* card */
main {
    max-width: 820px;
    margin: 0 auto;
    padding: 8px 22px 60px
}

.step {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 38px 40px;
    box-shadow: 0 8px 30px rgba(34,32,29,.05)
}

.step-eyebrow {
    color: var(--accent-deep);
    font-weight: 700;
    font-size: 16px;
    background: var(--accent-wash);
    display: inline-block;
    padding: 5px 14px;
    border-radius: 99px;
    margin-bottom: 16px
}

.opt-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #7a5c1f;
    background: #fbf1dd;
    border: 1px solid #ecdcbb;
    border-radius: 99px;
    padding: 4px 12px;
    margin-right: 8px;
    vertical-align: middle
}

.opt-cue {
    font-size: 14px;
    font-weight: 500;
    color: #9a927f;
    margin-right: 6px
}

.skip-row {
    margin-top: 18px;
    text-align: center
}

.skip-link {
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-soft);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 8px
}

    .skip-link:hover {
        color: var(--accent-deep)
    }

.skip-banner {
    background: var(--accent-wash);
    border: 1px solid #d5e5df;
    border-radius: 11px;
    padding: 14px 18px;
    font-size: 16px;
    color: var(--accent-deep);
    margin-bottom: 24px
}

.step h2 {
    font-size: 29px;
    font-weight: 900;
    margin-bottom: 8px
}

.step .sub {
    color: var(--ink-soft);
    font-size: 19px;
    margin-bottom: 28px
}

/* fields */
.q {
    margin-bottom: 26px
}

    .q > label, .q .qlabel {
        display: block;
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 10px;
        color: var(--ink)
    }

    .q .hint {
        font-size: 16px;
        color: var(--ink-soft);
        font-weight: 400;
        margin-top: -4px;
        margin-bottom: 10px
    }

input[type=text], input[type=tel], input[type=email], input[type=number], input[type=date], select, textarea {
    width: 100%;
    font-family: inherit;
    font-size: 19px;
    padding: 14px 16px;
    border: 2px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    transition: border-color .15s ease
}

    input:focus, select:focus, textarea:focus {
        border-color: var(--accent);
        outline: none
    }

.q.field-error input, .q.field-error textarea, .q.field-error select {
    border-color: var(--err);
    background: #fdf5f5
}

.q.field-error .qlabel {
    color: var(--err)
}

.err-msg {
    background: #fdf0f0;
    border: 1px solid #e5c4c4;
    color: var(--err);
    border-radius: 11px;
    padding: 14px 18px;
    font-size: 17px;
    font-weight: 600;
    margin-top: 26px
}

textarea {
    min-height: 96px;
    resize: vertical
}

.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

@media(max-width:620px) {
    .row {
        grid-template-columns: 1fr
    }
}

/* choice chips */
.opts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.opt {
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    padding: 12px 20px;
    border: 2px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 11px;
    cursor: pointer;
    transition: all .12s ease
}

    .opt:hover {
        border-color: var(--accent)
    }

    .opt[aria-pressed=true] {
        background: var(--accent-wash);
        border-color: var(--accent);
        color: var(--accent-deep)
    }

    .opt.yesno {
        min-width: 88px;
        text-align: center
    }

/* yes/no + skip inline */
.skip-note {
    font-size: 15px;
    color: var(--ink-soft);
    margin-top: 8px
}

/* repeater */
.repeat-item {
    border: 1.5px dashed var(--line);
    border-radius: 14px;
    padding: 22px 22px 6px;
    margin-bottom: 16px;
    position: relative;
    background: #fdfdfb
}

    .repeat-item .rm {
        position: absolute;
        left: 14px;
        top: 14px;
        background: none;
        border: none;
        color: var(--err);
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        padding: 4px
    }

.repeat-head {
    font-family: 'Frank Ruhl Libre',serif;
    font-weight: 700;
    font-size: 19px;
    color: var(--accent-deep);
    margin-bottom: 14px
}

.add-btn {
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    color: var(--accent-deep);
    background: var(--accent-wash);
    border: 1.5px solid var(--accent);
    border-radius: 11px;
    padding: 12px 20px;
    cursor: pointer
}

    .add-btn:hover {
        background: #e2ede9
    }

/* treatments grid */
.treat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--line)
}

    .treat-row:last-child {
        border-bottom: none
    }

    .treat-row .tl {
        font-size: 18px
    }

.treat-opts {
    display: flex;
    gap: 8px;
    flex-shrink: 0
}

    .treat-opts .opt {
        padding: 8px 18px;
        font-size: 16px
    }

/* nav */
.nav {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--line)
}

.btn {
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    padding: 16px 32px;
    border-radius: 12px;
    transition: transform .12s ease,background .12s ease
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 5px 16px rgba(47,107,94,.26)
}

    .btn-primary:hover {
        background: var(--accent-deep);
        transform: translateY(-1px)
    }

.btn-back {
    background: transparent;
    color: var(--ink-soft);
    border: 2px solid var(--line)
}

    .btn-back:hover {
        border-color: var(--ink-soft)
    }

    .btn-back.hidden {
        visibility: hidden
    }

/* intro + who */
.intro {
    text-align: center;
    padding: 20px 10px 6px
}

    .intro h2 {
        font-size: 32px;
        font-weight: 900;
        margin-bottom: 14px
    }

    .intro p {
        font-size: 20px;
        color: var(--ink-soft);
        max-width: 52ch;
        margin: 0 auto 14px
    }

.who {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 440px;
    margin: 30px auto 6px
}

    .who .opt {
        font-size: 20px;
        padding: 20px;
        text-align: center
    }

.reassure-line {
    font-size: 16px;
    color: var(--ink-soft);
    margin-top: 24px
}

/* review */
.rev-sec {
    margin-bottom: 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden
}

    .rev-sec h3 {
        font-size: 19px;
        background: var(--accent-wash);
        color: var(--accent-deep);
        padding: 12px 18px;
        display: flex;
        justify-content: space-between;
        align-items: center
    }

        .rev-sec h3 button {
            font-family: inherit;
            font-size: 15px;
            font-weight: 700;
            color: var(--accent-deep);
            background: none;
            border: none;
            cursor: pointer;
            text-decoration: underline
        }

.rev-body {
    padding: 8px 18px 14px
}

.rev-row {
    display: flex;
    gap: 12px;
    padding: 7px 0;
    font-size: 17px;
    border-bottom: 1px dashed var(--line)
}

    .rev-row:last-child {
        border-bottom: none
    }

    .rev-row .k {
        color: var(--ink-soft);
        min-width: 44%;
        max-width: 44%
    }

    .rev-row .v {
        font-weight: 600;
        color: var(--ink)
    }

        .rev-row .v.empty {
            color: #b9b2a6;
            font-weight: 400;
            font-style: italic
        }

.done {
    text-align: center;
    padding: 20px 10px
}

    .done .big {
        font-size: 64px;
        margin-bottom: 10px
    }

    .done h2 {
        font-size: 30px;
        font-weight: 900;
        margin-bottom: 12px
    }

    .done p {
        font-size: 20px;
        color: var(--ink-soft);
        max-width: 48ch;
        margin: 0 auto 26px
    }

.done-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 420px;
    margin: 0 auto
}

.save-hint {
    background: #fff8ec;
    border: 1px solid #ecdcbb;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 15px;
    color: #7a5c1f;
    margin-top: 22px;
    text-align: center
}