/* ═══════════════════════════════════════════════════════════════════════
   The idazery Practice — public subscribe landing (weekly email)
   Same visual language as journal_planner_notes.css (airy, minimal, light).
   All page-specific classes prefixed .tip- to avoid collisions.
   ═══════════════════════════════════════════════════════════════════════ */

/* Secondary "no thanks" option under the account_exists popup's "Access"
   button (see the_idazery_practice.js) — a plain underlined text link
   instead of a second .action-button, so it doesn't compete with the
   primary action for attention. */
.tip-popup-cancel-link {
    display: block;
    margin-top: 0.9rem;
    font-size: 0.85rem;
    color: #6b7280;
    text-decoration: none;
    text-underline-offset: 2px;
    cursor: pointer;
}

.tip-popup-cancel-link:hover {
    color: #374151;
    text-decoration: underline;
}

.tip-page {
    background: #ffffff;
    color: #1f2937;
    overflow-x: hidden;
}

/* Same pattern as home's .how-it-works-section/.how-it-works-container:
   the section itself is full-bleed (so a background like .tip-bg-tint
   spans edge to edge), while .tip-section-content is the actual reading
   column, capped and centered inside it. */
.tip-section {
    padding: 2.5rem 1.5rem;
}
.tip-section-end {
    padding: 0 1.5rem;
    margin: 0 auto;
    max-width: 600px;
}

.tip-section-content {
    max-width: 700px;
    margin: 0 auto;
}

.tip-h1,
.tip-h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
    text-align: center;
}

.tip-h1 {
    font-size: clamp(2rem, 5vw, 2.5rem);
    line-height: 1.2;
    margin: 0 0 1.5rem;
}

.tip-h2 {
    font-size: clamp(1.6rem, 3.6vw, 2.2rem);
    line-height: 1.25;
    margin: 0 0 1.25rem;
}

.tip-lead {
    font-size: 1.1rem;
    line-height: 1.5;
    color: #374151;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}

.tip-lead p {
    margin: 0 0 1.1rem;
}

.tip-promise-intro {
    font-weight: 600;
    color: #111827;
}
p.tip-promise-intro{
    margin: 0 auto 1rem;
    max-width: 380px;
}

.tip-closing-line {
    text-align: center;
    font-size: 1.1rem;
    color: #374151;
    margin: 0 0 1rem;
}

/* ── Hero ─────────────────────────────────────────────────────────── */

.tip-hero {
    padding-top: 4.5rem;
    text-align: center;
    padding-bottom: 2rem;
}

/* Portuguese only, narrow widths only: "Comece grátis" / one-click button
   copy runs wider in PT than the other languages, tight enough at <420px
   that the hero's normal 1.5rem side padding (see .tip-section) was
   crowding it further — give it more room. Anonymous/not-yet-subscribed
   state only: the subscribed state doesn't render any of that content. */
@media (max-width: 420px) {
    .lg-pt .tip-hero:not(.tip-hero-subscribed) {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Already-subscribed visitor: the hero's own CTA is hidden (see
   hide_already_badge in the_idazery_practice.html), leaving .tip-cta-wrap
   empty. Its own margin-top plus the section's own bottom padding then
   stack into a large dead gap before the tinted section even adds its own
   top padding — zero both so only that next section's own padding (a
   normal section-to-section gap) remains. */
.tip-hero-subscribed {
    margin-bottom: 0;
    padding-bottom: 2rem;
}

.tip-hero-subscribed .tip-cta-wrap {
    margin-top: 0;
}

/* Same reasoning as .tip-hero-subscribed .tip-cta-wrap above, applied to
   the closing section: with its own heading gone (see
   the_idazery_practice.html), .tip-cta-wrap's normal margin-top (there to
   clear that heading) was stacking with this section's own top padding
   into an oversized gap above "You're already receiving it." */
.tip-closing-subscribed .tip-cta-wrap {
    margin-top: 0;
}
.tip-closing-subscribed {
    margin: 1rem 1.5rem 3.5rem;
    padding: 0;
}

.tip-hero-tag {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 1.5rem;
}

.tip-hero-subtitle {
    font-size: 1.2rem;
    font-weight: 600;
    color: #248fa3;
    margin: 0 0 2rem;
    line-height: 1.65rem;
    max-width: 500px;
    margin: 0 auto;
}

/* ── Method grid (Think / See / Decide / Do) ─────────────────────────── */

.tip-method-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin: 3rem 0 0;
}

.tip-method-step {
    text-align: center;
}

.tip-method-step-title {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    color: #248fa3;
    margin-bottom: 0.5rem;
}

.tip-method-step p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

.tip-highlight {
    /*background: linear-gradient(135deg, #f8fbff 0%, #e8f4f8 100%);
    border: 1px solid rgba(36, 143, 163, 0.12);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);*/
    padding: 2.25rem 2.25rem;
    margin-top: 1rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #1f2937;
    text-align: center;
}

.tip-highlight p {
    margin: 0 auto 0.4rem;
    max-width: 380px;
}

.tip-highlight p:last-child {
    margin-bottom: 0;
}

/* ── CTA ──────────────────────────────────────────────────────────── */

.tip-cta-wrap {
    text-align: center;
    margin-top: 2.5rem;
}

/* Email control (.form-group, label float, 330px max-width) is the site's
   real signup-form component — same one as pricing's #email_inpage (see
   idazery.css's .form-group rules and w_oC.updateFloatingLabel, wired up
   in the_idazery_practice.js) — not a page-local pill input. Stacked
   column instead of the old side-by-side pill+button row: .form-group is
   a block element (relies on its own margin:auto for centering), and the
   raised floating label needs the room a row didn't give it.

   display:inline-flex (shrinks to its widest child, here the button —
   see .action-button.start-free's min-width in plans.css) + align-items:
   stretch (default, spelled out for clarity) makes .form-group stretch to
   that same width automatically, so the input always matches the button's
   width without hardcoding it here as a magic number that could drift out
   of sync if the button's own sizing ever changes. */
.tip-cta-form {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
}

/* Spanish/Portuguese only: fixed 320px instead of letting the container
   size itself to the button's own (longer, in these two languages) text —
   .form-group's align-items:stretch above still applies, so the email
   input matches this same 320px automatically. */
.lg-es .tip-cta-form,
.lg-pt .tip-cta-form {
    width: 320px;
}

/* .form-group's global rule (idazery.css) sets margin:25px auto for
   free-standing use — but auto side margins on a flex item override
   align-items:stretch (the spec gives auto margins the extra space
   instead), which was silently defeating the stretch above and leaving
   the input at its own content width. Zero only the sides here so
   stretch can do its job; the 25px top/bottom spacing is unaffected.
   max-width:none drops the global 330px cap too — this button's label
   ("I want to receive The idazery Practice") runs wider than that in
   every language, so capping the input at 330px would leave it narrower
   than the button again; letting stretch size it to the button's own
   (wider) natural width is what actually keeps the two matched. */
.tip-cta-form .form-group {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

/* The CTA button itself is .action-button.start-free + .button-arrow —
   the site's real "start free" component (see core/plans.css), not a
   page-local copy. .is-loading lives in landing-minimal.css (shared with
   journal_planner_notes, even though only this page's JS uses it today). */

/* Taller + larger font, matching pricing's #email_inpage "Start free"
   button (.pricing-plan .plan-button: height ~51px via 1rem padding,
   font-size 1.15rem) — the 46px/16px .action-button.start-free default
   was shorter than the .form-group input sitting right above it. Scoped
   to .tip-cta-form (the anonymous subscribe submit button) only, not
   .tip-cta-account's logged-in one-click link, which also reuses
   .action-button.start-free and must stay untouched. */
.tip-cta-form .action-button.start-free {
    height: 51px;
    font-size: 1.15rem;
}

.tip-cta-micro {
    display: block;
    margin-top: 0.5rem;
    /* Same as home's .hero-cta-benefits (the "No Credit Card · Private &
       Secure" note under the hero CTA). */
    font-size: 0.9rem;
    color: #8895a7;
}

.tip-cta-already {
    font-size: 1.05rem;
    color: #374151;
    max-width: 420px;
    margin: 0 auto;
}

.tip-cta-confirm {
    display: none;
    margin-top: 1rem;
}

/* display:none rather than opacity:0 — this sits right under the
   subscribe button/micro-copy, and while hidden it was still reserving
   its own line of space (a .subscribed-badge is inline-flex), pushing
   everything below down before there was anything to show there. */
.tip-cta-confirm.is-visible {
    display: inline-flex;
}

/* Own color/weight/pill shape come from .subscribed-badge (idazery.css) —
   this combined selector just makes sure that wins over this file's own
   plain-text rule above regardless of stylesheet load order, so this
   reads as the same "you're in" status pill as the badge shown above it
   for an already-subscribed visitor, not a differently-styled sentence. */
.tip-cta-confirm.subscribed-badge {
    color: #1f7a3d;
    font-weight: 600;
}

.tip-cta-error {
    color: #c0392b;
    font-size: 0.9rem;
    margin: 0 0 0.75rem;
}

/* ── Section background variants ─────────────────────────────────────── */

.tip-bg-tint {
    background: #f7fafb;
    padding: 1.5rem;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .tip-method-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.75rem 1.25rem;
    }
}