/* THE PRACTICE LETTER (include/i_core_practice_letter.html): the sign-up block of The idazery Practice, shared by the home and the landings. Moved here from home/home.css on
   2026-11-05 (so the pages that do not load home.css can use it too); load it before home.css, whose "body.pg_home" rules adjust it on the home. */

/* HOME V2 THE IDAZERY PRACTICE (include/i_home_v2_practice.html) — last
   section, the "second chance". Reading column; the real excerpt reuses
   the .thinking-practice-preview styles; inline email form. Its button is
   deliberately teal, not the green of the purchase CTAs: it's the
   secondary action on the page. (Not .start-free: plans.js hijacks that
   class to open the pricing popup.) */
.hv2-practice-section {
    padding: 4.5rem 1.5rem 5rem;
    background: #ffffff;
    border-top: 1px solid rgba(44, 62, 80, 0.08);
}
.hv2-practice {
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
}
.hv2-practice-kicker {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #357a8a;
    margin-bottom: 0.6rem;
}
.hv2-practice-title {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
    margin: 0 0 1.25rem;
}
.hv2-practice > p {
    font-size: 1.15rem;
    color: #4a5a6a;
    line-height: 1.7;
    margin: 0 0 1rem;
}
.hv2-practice > p strong {
    color: #2c3e50;
}
.hv2-practice-example {
    margin: 1.75rem 0 2rem;
    padding-left: 1.1rem;
    border-left: 3px solid rgba(74, 144, 164, 0.3);
}
.hv2-practice-form {
    display: flex;
    gap: 0.75rem;
    align-items: stretch; /* button as tall as the email field */
    flex-wrap: wrap;
}
.hv2-practice-email {
    flex: 1 1 260px;
    margin: 0;
    max-width: none; /* the shared .form-group caps it at 330px */
}
.hv2-practice-form .hv2-practice-email input {
    width: 100%; /* the shared .form-group input rule leaves it narrower */
    box-sizing: border-box;
}
.hv2-practice-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #0891b2 0%, #19b2cb 100%);   /* the colours of the usual button gradient (.action-button), reversed: the lighter part on the right */
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(74, 144, 164, 0.2);
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
}
.hv2-practice-button:hover {
    background: linear-gradient(135deg, #0a9fc0 0%, #2cc3da 100%);
    color: #ffffff;
}
/* the shine that crosses the usual buttons from left to right (idz-shine, in css/idazery.css), started 2.3s after the hero's button and 1.2s before the closing one so they never shine together */
.hv2-practice-button::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: idz-shine 7s ease-in-out 2.3s infinite;
}
.hv2-practice-button > * {
    position: relative;
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    .hv2-practice-button::before { animation: none; display: none; }
}
.hv2-practice-button:disabled {
    opacity: 0.7;
    cursor: default;
}
.hv2-practice .hv2-practice-note {
    font-size: 0.9rem;
    color: #8895a7;
    margin: 0.7rem 0 0;
}
.hv2-practice-cta.is-hidden {
    display: none;
}
/* Signed in (2026-11-05): the field of the letter is the same as the visitor's, but read-only: it shows the masked address of the account, with the label always raised,
   and it does not react to hover or focus (nothing to type). */
.hv2-practice-email-readonly input,
.hv2-practice-email-readonly input:hover,
.hv2-practice-email-readonly input:focus {
    background-color: #f8f9fa;
    border-color: #b0b1b1;
    color: #4a5568;
    cursor: default;
    outline: none;
}
.hv2-practice-email-readonly label.float { color: #999999; }
/* The confirmation under the one-click button ("OK, you'll receive the next practice on Sunday.") was only transparent (opacity 0), so it kept its height (about 47px plus margins)
   and pushed the link "See what The idazery Practice is like" far down for a signed-in visitor. In the letter it takes no room until it is shown (2026-11-05). */
body.pg_home .hv2-letter .thinking-practice-signup-confirm { display: none; }
body.pg_home .hv2-letter .thinking-practice-signup-confirm.is-visible { display: inline-flex; }

/* THE LETTER WITH AN ENVELOPE AND A HOOK (2026-11-05, include/i_core_practice_letter.html: shared by the home and the landings) */
/* the envelope of the mail popups, still: the letter peeks out of the open flap (the "done" state of core/mail-popup.css without the badge) */
.idz-letter-envelope { display: block; line-height: 0; margin: 0 0 1rem; }
.idz-letter-envelope svg { overflow: visible; }
.idz-letter-envelope .m-back { fill: #d6e3ec; }
.idz-letter-envelope .m-front { fill: #eef4f8; stroke: #c3d3de; stroke-width: 1.2; stroke-linejoin: round; }
.idz-letter-envelope .m-flap-open { fill: #c4d6e2; }
.idz-letter-envelope .m-letter { transform: translateY(-10px); }
.idz-letter-envelope .m-letter rect { fill: #ffffff; stroke: #c3d3de; stroke-width: 1.2; }
.idz-letter-envelope .m-letter path { fill: none; stroke: #2e8fb8; stroke-width: 3; stroke-linecap: round; opacity: 0.75; }
/* the hook: title weight, the typeface of the headings */
.hv2-practice.hv2-letter .hv2-letter-hook {
    margin: 0;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.15rem, 1rem + 0.55vw, 1.4rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #2c3e50;
}
/* on a landing: the page background and the half band above and below, as the other sections of the page (the variable --hv2-band-y comes from the body of the landing) */
.hv2-letter-section--landing {
    background: none;
    border-top: 0;
    padding: calc(var(--hv2-band-y, 8rem) * 0.5) 1.5rem;
    overflow-x: clip;
}
@media (max-width: 560px) {
    .hv2-letter-section--landing { padding-left: 1.25rem; padding-right: 1.25rem; }
}
.hv2-letter-section--landing .hv2-letter-more { margin: 0.9rem 0 0; font-size: 0.95rem; }
.hv2-letter-section--landing .hv2-letter-more a { color: #4a90a4; text-decoration: none; border-bottom: 1px solid rgba(74, 144, 164, 0.4); }
.hv2-letter-section--landing .hv2-letter-more a:hover { color: #357a8a; border-color: #357a8a; }
.hv2-letter-section--landing .thinking-practice-signup-confirm { display: none; }
.hv2-letter-section--landing .thinking-practice-signup-confirm.is-visible { display: inline-flex; }
.hv2-practice .thinking-practice-signup-confirm,
.hv2-practice .subscribed-badge {
    margin: 1rem 0 0;
}
/* Secondary "Cancel" link under the "account exists" popup's button */
.hv2-popup-cancel-link {
    display: block;
    margin-top: 0.9rem;
    font-size: 0.85rem;
    color: #6b7280;
    text-decoration: none;
    text-underline-offset: 2px;
    cursor: pointer;
}
.hv2-popup-cancel-link:hover {
    color: #374151;
    text-decoration: underline;
}
@media (max-width: 768px) {
    .hv2-practice-title { font-size: 1.6rem; }
    .hv2-practice > p { font-size: 1.05rem; }
}
@media (max-width: 480px) {
    .hv2-practice-section { padding: 3rem 1rem 3.5rem; }
    .hv2-practice-title { font-size: 1.4rem; }
    .hv2-practice-form { flex-direction: column; align-items: stretch; }
    .hv2-practice-email { flex-basis: auto; }
    .hv2-practice-button { width: 100%; }
}

/* THE COUPON (2026-11-05): the letter is a sheet of paper with a dashed, rounded border, as a coupon in a direct-mail letter. It is the only boxed block of the page, so it
   stands out without any loud colour. Compact: the title and the envelope share the first row. */
.hv2-practice.hv2-letter {
    position: relative;
    box-sizing: border-box;
    max-width: 700px;
    margin: 0 auto;
    padding: 1.6rem 2rem 1.4rem;
    border: 2px dashed rgba(46, 143, 184, 0.55);
    border-radius: 18px;
}
.idz-letter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.9rem;
}
.idz-letter-top .idz-letter-envelope { flex: 0 0 auto; margin: 0; }
.idz-letter-top .idz-letter-envelope svg { width: 54px; height: 43px; }
@media (max-width: 560px) {
    .hv2-practice.hv2-letter { padding: 1.4rem 1.15rem 1.25rem; border-radius: 16px; }
    .idz-letter-top .idz-letter-envelope svg { width: 46px; height: 37px; }
}