/* ============================================================================
   THE FORMS — one stylesheet, three pages
   ============================================================================
   The book dialog on the two landing pages and the Power of 5 form on its own
   page are the same form wearing the same clothes. They live here rather than in
   each page's style.css because /powerof5questions keeps its own copy of the
   site's CSS — and a second copy of these rules is a second copy to keep in step,
   which is how two forms that were meant to match slowly stop matching.
   ============================================================================ */

/* ============================================================================
   THE FREE-BOOK DIALOG
   ============================================================================
   Three covers, one dialog. It opens with the book that was pressed already in
   it — cover, title and all — so nobody has to be told in words which book they
   are about to be sent.

   SOFT, NOT LOUD. This page asks for a name, an email and a phone number in
   exchange for a book; the panel it asks in should feel like a card someone
   handed you, not a pop-up that caught you. Hence the wide radius, the long
   quiet shadow, the pale field fills, and one accent colour used only on the
   button that finishes the job.

   THE × IS TOP RIGHT, always, because that is where a person's hand goes. */
.nbmodal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.nbmodal[hidden] { display: none; }

.nbmodal__scrim {
    position: absolute;
    inset: 0;
    background: rgba(16, 20, 30, .62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.nbmodal__card {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 20px;
    padding: 28px 28px 26px;
    box-shadow: 0 24px 70px rgba(10, 14, 24, .38);
    animation: nbrise .22s ease-out;
}

@keyframes nbrise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.nbmodal__x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f1f3f7;
    color: #5a6473;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.nbmodal__x:hover { background: #e4e8ef; color: #23303c; }

.nbmodal__head {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: 4px 30px 22px 0;
}

.nbmodal__cover {
    width: 96px;
    height: auto;
    flex: 0 0 auto;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(10, 14, 24, .26);
}

.nbmodal__headtext { min-width: 0; }

.nbmodal__eyebrow {
    margin: 0 0 4px;
    font-size: 13px;
    letter-spacing: .04em;
    color: #8a93a3;
}

.nbmodal__title {
    margin: 0;
    font-size: 19px;
    line-height: 1.32;
    color: #1b2033;
    font-weight: 700;
}

/* --- the form itself. Labels sit above their boxes: a placeholder that doubles
       as the label disappears the moment somebody starts typing, and then the
       one person who most needs to know what a box is for cannot see it. */
.nbform__field { margin-bottom: 16px; }

.nbform__label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #2b3444;
}

.nbform__label span { color: #d2691e; }

.nbform__input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: 15px;
    color: #1b2033;
    background: #f7f8fa;
    border: 1.5px solid #e3e7ee;
    border-radius: 11px;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.nbform__input:focus {
    outline: none;
    background: #fff;
    border-color: #f0a830;
    box-shadow: 0 0 0 3px rgba(240, 168, 48, .18);
}

.nbform__input.is-bad {
    border-color: #d9534f;
    background: #fff7f7;
}

.nbform__hint {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: #8a93a3;
}

.nbform__err {
    margin: 6px 0 0;
    font-size: 13px;
    color: #c9302c;
    min-height: 0;
}

.nbform__err:empty { display: none; }

.nbform__err--form { margin-top: 10px; text-align: center; }

/* --- the edition choice, shown only where a Hindi file actually exists */
.nbform__pills { display: flex; gap: 10px; }

.nbpill { flex: 1 1 0; min-width: 0; cursor: pointer; }
.nbpill input { position: absolute; opacity: 0; pointer-events: none; }

.nbpill span {
    display: block;
    padding: 10px 8px;
    text-align: center;
    font-size: 14.5px;
    font-weight: 600;
    color: #5a6473;
    background: #f7f8fa;
    border: 1.5px solid #e3e7ee;
    border-radius: 11px;
    transition: all .15s;
}

.nbpill input:checked + span {
    color: #1b2033;
    background: #fff6e6;
    border-color: #f0a830;
}

.nbpill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(240, 168, 48, .18); }

.nbform__submit {
    width: 100%;
    margin-top: 8px;
    padding: 14px 18px;
    border: 0;
    border-radius: 999px;
    background: #f0a830;
    color: #1b2033;
    font-size: 16px;
    font-weight: 700;
    /* SET, NOT INHERITED. This stylesheet is loaded into three pages that do not
       share a base stylesheet, and /powerof5questions carries its own with a flat
       `line-height: 40px`. That leaked in and turned a button whose label wraps to
       two lines into a 108px lozenge on a phone. A shared component cannot rely on
       what the page around it happens to set. */
    line-height: 1.35;
    cursor: pointer;
    transition: background .15s, transform .06s;
}

.nbform__submit:hover:not(:disabled) { background: #e59a1c; }
.nbform__submit:active:not(:disabled) { transform: translateY(1px); }
.nbform__submit:disabled { opacity: .62; cursor: default; }

/* --- what a person sees once it has actually gone */
.nbmodal__done { text-align: center; padding: 14px 4px 8px; }

.nbmodal__tick {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #eaf7ee;
    color: #2e9e5b;
    font-size: 30px;
    line-height: 58px;
}

.nbmodal__done h3 { margin: 0 0 8px; font-size: 20px; color: #1b2033; }
.nbmodal__done p  { margin: 0; font-size: 15px; color: #5a6473; line-height: 1.55; }

/* The covers on the page are a shelf: same height, so the row reads as three
   books rather than three unrelated pictures. */
.lifetransform-section .lt-col img {
    height: 440px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

@media only screen and (max-width: 767px) {
    .nbmodal { padding: 12px; }
    .nbmodal__card { padding: 24px 20px 22px; border-radius: 16px; }
    .nbmodal__cover { width: 78px; }
    .nbmodal__title { font-size: 17px; }
    .lifetransform-section .lt-col img { height: 320px; }
}

/* Firm and city share a row on a wide screen and stack on a phone: they are two
   short answers, and two short boxes on their own lines make a form look longer
   than it is. min-width:0 because a flex child will not shrink below its content
   without it, and that is how a form ends up wider than the card holding it. */
.nbform__row { display: flex; gap: 12px; }
.nbform__row > .nbform__field { flex: 1 1 0; min-width: 0; }

.nbform__textarea { resize: vertical; min-height: 78px; font-family: inherit; line-height: 1.5; }

@media only screen and (max-width: 520px) {
    .nbform__row { display: block; }
}

/* ============================================================================
   सफलता की कहानियाँ — SIX CARDS, THREE ROWS
   ============================================================================
   This was two stacked columns, each filled independently, so the cards ran down
   the page at different rates and nothing lined up with anything beside it — the
   two videos sat diagonally apart and every card was a different height.

   It is a grid now, in the order the section actually argues in: the two video
   testimonials first, because a face and a voice carry further than a paragraph;
   then the two long written ones; then the two short ones. Six cards, three rows,
   and both cards in a row are the same height because the row stretches them. */
.success-story-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.success-story-grid > .story-col-eq {
    display: flex;
    margin-bottom: 26px;
}

.success-story-grid > .story-col-eq > .story-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    margin-bottom: 0;
}

.success-story-grid > .story-col-eq > .story-col > div {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* The author's line is pinned to the bottom, so in a row of two the names sit on
   one line however much text is above them. */
.success-story-grid .story-author,
.success-story-grid .stryauth-two {
    margin-top: auto;
}

@media only screen and (max-width: 767px) {
    .success-story-grid > .story-col-eq { margin-bottom: 18px; }
}

/* The discovery-call form is the same form as the book dialog, laid out along a
   page instead of inside a card — so it borrows the same field styling and only
   changes how the boxes are arranged. Three across, then two, then the message.
   Below 767px they stack, because three boxes on a phone row are three boxes
   nobody can read the labels of. */
.nbform--inline .nbform__row { display: flex; gap: 14px; }
.nbform--inline .nbform__row > .nbform__field { flex: 1 1 0; min-width: 0; }
.nbform--inline .nbform__submit { max-width: 420px; }

@media only screen and (max-width: 767px) {
    .nbform--inline .nbform__row { display: block; }
    .nbform--inline .nbform__submit { max-width: none; }

    /* On a 375px screen the label is one line at 15px and two at 16px. A button
       that says one thing should look like one thing. */
    .nbform--inline .nbform__submit {
        font-size: 15px;
        padding: 14px 12px;
    }
}


/* ============================================================================
   THE MASTERCLASS DIALOG — the same form, inside fancybox
   ============================================================================
   The registration used to be a MailerLite popup. It is now this form in the
   fancybox the page already loads for the privacy notice, so there is no second
   dialog library and the close button comes for free. Sized here rather than in
   the page's style.css because the two headings belong to the form, not to the
   section behind it.
   ============================================================================ */

#masterclass-form {
    width: 100%;
    max-width: 520px;
    padding: 0;
}

#masterclass-form .mstrbox {
    padding: 26px 26px 24px;
    border-radius: 14px;
}

.nbform__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: #1b2033;
}

.nbform__sub {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #5c6478;
}

@media only screen and (max-width: 575px) {
    #masterclass-form .mstrbox { padding: 20px 18px 18px; }
    .nbform__title { font-size: 19px; }
}