/* Home hero, compact timer creator and guest signup modal */
:root {
    --ect-ink: #1D1A27;
    --ect-muted: #5B5566;
    --ect-line: #EFE5DA;
    --ect-cream: #FFFAF4;
    --ect-tint: #FFF1E3;
    --ect-orange: #FE8A22;
    --ect-orange-text: #A84A05;
    --ect-display: 'Bricolage Grotesque', 'Source Sans Pro', sans-serif;
}

.ect-hero { background: var(--ect-cream); color: var(--ect-ink); padding: 56px 0 72px; border-bottom: 1px solid var(--ect-line); }
.ect-hero__badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--ect-line); border-radius: 999px; padding: 5px 14px 5px 5px; font-size: 14px; font-weight: 600; margin-bottom: 22px; }
.ect-hero__badge span { background: var(--ect-orange); color: var(--ect-ink); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.ect-hero__title { font-family: var(--ect-display); font-weight: 800; font-size: clamp(40px, 5.2vw, 66px); line-height: 1.03; letter-spacing: -0.02em; margin: 0 0 20px; }
.ect-hero__title mark { background: #FFE3C4; color: inherit; padding: 0 .18em; border-radius: .18em; }
.ect-hero__lead { font-size: 20px; line-height: 1.5; color: var(--ect-muted); max-width: 540px; margin-bottom: 24px; }
.ect-hero__chips { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.ect-hero__chips li { display: flex; align-items: center; gap: 8px; background: var(--ect-tint); border-radius: 10px; padding: 8px 14px; font-size: 15px; font-weight: 600; }
.ect-hero__chips i { color: var(--ect-orange-text); font-size: 18px; }
.ect-hero__stats { display: flex; gap: 40px; border-top: 1px solid var(--ect-line); padding-top: 22px; }
.ect-hero__stats strong { display: block; font-family: var(--ect-display); font-weight: 800; font-size: 34px; line-height: 1.1; }
.ect-hero__stats span { font-size: 15px; color: var(--ect-muted); }

.ect-creator { background: #fff; border: 1px solid var(--ect-line); border-radius: 24px; padding: 28px; box-shadow: 0 24px 48px -28px rgba(29, 26, 39, .28); }
.ect-creator__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.ect-creator__head h2 { font-family: var(--ect-display); font-weight: 700; font-size: 22px; margin: 0; }
.ect-creator__head span { font-size: 14px; color: var(--ect-muted); }
.ect-creator__preview { background: #FFF6EC; border-radius: 18px; padding: 18px 8px; margin-bottom: 18px; overflow: hidden; }
.ect-creator .data-label { font-size: 13px; font-weight: 700; color: var(--ect-muted); margin-bottom: 4px; }
.ect-creator__hint { text-align: center; font-size: 14px; color: var(--ect-muted); margin: 14px 0 0; }

.ect-btn-primary { display: inline-block; border: 0; background: var(--ect-orange); color: var(--ect-ink); border-radius: 14px; padding: 15px 20px; font-weight: 800; font-size: 18px; text-align: center; text-decoration: none; }
.ect-btn-primary:hover { background: #F07A12; color: var(--ect-ink); }
.ect-btn-primary:disabled { opacity: .7; }
.ect-btn-google, .ect-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1.5px solid #D9CEC2; background: #fff; border-radius: 14px; padding: 13px 16px; font-weight: 700; font-size: 16px; color: var(--ect-ink); text-decoration: none; }
.ect-btn-google:hover, .ect-btn-outline:hover { border-color: var(--ect-ink); color: var(--ect-ink); }

.ect-modal { position: fixed; inset: 0; z-index: 1060; background: rgba(29, 26, 39, .62); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ect-modal__dialog { position: relative; width: 100%; max-width: 520px; background: #fff; border-radius: 24px; padding: 36px 36px 28px; color: var(--ect-ink); max-height: calc(100vh - 32px); overflow-y: auto; }
.ect-modal__dialog h2 { font-family: var(--ect-display); font-weight: 800; font-size: 30px; line-height: 1.12; margin: 0 40px 10px 0; }
.ect-modal__close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #F7F1EA; color: var(--ect-ink); }
.ect-modal__text { font-size: 17px; line-height: 1.5; color: var(--ect-muted); margin-bottom: 18px; }
.ect-modal__dialog .form-control-lg { border: 2px solid var(--ect-ink); border-radius: 12px; font-weight: 600; }
.ect-modal__optin { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ect-muted); margin: 12px 0 14px; }
.ect-modal__optin input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--ect-ink); }
.ect-modal__error { color: #B42318; font-size: 14px; font-weight: 600; margin-top: 8px; }
.ect-modal__or { display: flex; align-items: center; gap: 14px; color: #8A8294; font-size: 14px; margin: 16px 0; }
.ect-modal__or::before, .ect-modal__or::after { content: ''; flex: 1; height: 1px; background: var(--ect-line); }
.ect-modal__legal { font-size: 13px; color: #6E6778; text-align: center; margin: 14px 0 0; }
.ect-modal__legal a { color: var(--ect-orange-text); }
.ect-modal__icon { width: 84px; height: 84px; border-radius: 24px; background: var(--ect-tint); color: #E0600B; display: flex; align-items: center; justify-content: center; font-size: 40px; margin-bottom: 16px; }
.ect-modal__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ect-modal__note { background: #F7F1EA; border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--ect-muted); margin: 0; }
.ect-modal__actions { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
.ect-modal__actions .btn-link { color: var(--ect-orange-text); font-weight: 700; text-decoration: none; }

@media (max-width: 991px) {
    .ect-hero { padding: 32px 0 48px; }
    .ect-hero__stats { gap: 24px; }
    .ect-hero__stats strong { font-size: 26px; }
}
@media (max-width: 575px) {
    .ect-creator { padding: 18px; border-radius: 20px; }
    .ect-modal__dialog { padding: 28px 22px 22px; }
    .ect-modal__dialog h2 { font-size: 25px; }
    .ect-modal__links { grid-template-columns: 1fr; }
}

/* On the home the header blends with the hero */
.navbar { background: var(--ect-cream); border-bottom: 1px solid var(--ect-line); }
.ect-anchor { display: block; position: relative; top: -90px; visibility: hidden; }

/* ===== Option A2: centered intro + full-width "studio" (inbox preview + numbered steps) ===== */
.ect-hero--studio { padding: 40px 0 36px; }
.ect-hero__intro { text-align: center; max-width: 980px; margin: 0 auto 28px; }
.ect-hero__intro .ect-hero__title { font-size: clamp(38px, 4.6vw, 58px); margin-bottom: 14px; }
.ect-hero__intro .ect-hero__lead { margin: 0 auto; max-width: 740px; }
.ect-hero__stats--center { justify-content: center; border-top: 0; padding-top: 28px; text-align: center; gap: 64px; }

.ect-studio { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: #fff; border: 1px solid #E4D8CB; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(29, 26, 39, .35); text-align: left; }
.ect-studio__preview { background: #EEF0F3; padding: 28px 32px; }
.ect-studio__controls { padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; }
.ect-studio__head h2 { font-family: var(--ect-display); font-weight: 800; font-size: 26px; margin: 0; }
.ect-studio__head span { font-size: 15px; color: var(--ect-muted); }

.ect-mail { background: #fff; border: 1px solid #DDE1E6; border-radius: 14px; overflow: hidden; }
.ect-mail__toolbar { display: flex; justify-content: space-between; align-items: center; padding: 9px 16px; background: #F8F9FB; border-bottom: 1px solid #E8EBEF; font-size: 12px; color: #8A909A; }
.ect-mail__icons { display: flex; gap: 16px; font-size: 15px; }
.ect-mail__head { padding: 14px 20px 12px; border-bottom: 1px solid #EEF0F3; }
.ect-mail__subject { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.ect-mail__subject span { font-size: 12px; font-weight: 600; background: #EEF0F3; color: #5F6670; border-radius: 4px; padding: 2px 6px; vertical-align: middle; }
.ect-mail__from { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.3; }
.ect-mail__avatar { width: 34px; height: 34px; border-radius: 50%; background: #6D4AFF; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.ect-mail__muted { color: #6E757F; }
.ect-mail__canvas { background: #F6F2EE; padding: 20px; }
.ect-mail__body { background: #fff; max-width: 540px; margin: 0 auto; text-align: center; }
.ect-mail__brand { background: #2E2340; color: #fff; padding: 14px; font-family: Georgia, serif; font-size: 17px; letter-spacing: .28em; }
.ect-mail__content { padding: 24px 26px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ect-mail__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: #9A6A3B; }
.ect-mail__title { font-family: Georgia, serif; font-size: 28px; line-height: 1.15; max-width: 380px; }
.ect-mail__text { font-size: 14px; color: #6E6778; margin: 0; }
.ect-mail__timer { position: relative; width: 100%; margin: 14px 0 6px; padding: 16px 8px 8px; border: 2px dashed var(--ect-orange); border-radius: 12px; }
.ect-mail__tag { position: absolute; top: -13px; right: 12px; background: var(--ect-orange); color: var(--ect-ink); font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; }
.ect-mail__timer .timer-preview .timer { border: 0; }
.ect-mail__watermark { font-size: 10px; color: #8A8294; margin-top: 4px; }
.ect-mail__cta { background: #2E2340; color: #fff; padding: 12px 32px; font-size: 13px; letter-spacing: .16em; font-weight: 700; margin-top: 4px; }
.ect-mail__footer { font-size: 11px; color: #9A949F; margin-top: 8px; }

.ect-step { display: flex; flex-direction: column; gap: 10px; }
.ect-step__title { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; }
.ect-step__title span { width: 26px; height: 26px; border-radius: 50%; background: var(--ect-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.ect-step__hint { font-size: 13px; color: #6E6778; }

.ect-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ect-style { border: 1px solid #E4D8CB; background: #fff; border-radius: 12px; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ect-muted); line-height: 1.15; }
.ect-style.is-active { border: 2px solid var(--ect-ink); background: #FFF6EC; color: var(--ect-ink); font-weight: 700; }
.ect-style__icon { display: flex; gap: 3px; }
.ect-style__icon i { width: 13px; height: 15px; background: var(--ect-orange); display: block; }
.ect-style__icon--2 i { width: 15px; height: 15px; border-radius: 50%; }
.ect-style__icon--3 i { border-radius: 3px; }
.ect-style__icon--4 i { border-radius: 5px; width: 14px; height: 16px; }
.ect-style__icon--9 i { box-shadow: inset 0 -5px 0 rgba(255, 255, 255, .75); }
.ect-style__icon--7 i { width: 15px; height: 15px; border-radius: 50%; background: transparent; border: 2px solid var(--ect-orange); }

.ect-colors { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ect-colors__label { font-size: 13px; font-weight: 700; color: var(--ect-muted); margin-right: 2px; }
.ect-swatch { width: 30px; height: 30px; border-radius: 9px; border: 0; padding: 0; position: relative; cursor: pointer; }
.ect-swatch.is-active { outline: 2px solid var(--ect-ink); outline-offset: 2px; }
.ect-swatch--custom { background: #fff; border: 1px solid #E4D8CB; display: inline-flex; align-items: center; justify-content: center; color: var(--ect-muted); margin: 0; }
.ect-swatch--custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

.ect-studio > * { min-width: 0; }
.ect-mail__timer-inner { overflow: hidden; }
/* zoom (not transform) so the preview also takes less layout space */
@media (max-width: 1199px) {
    .ect-mail__timer .timer-preview { zoom: 0.8; }
}
@media (max-width: 991px) {
    .ect-studio { grid-template-columns: minmax(0, 1fr); }
    .ect-mail__timer .timer-preview { zoom: 1; }
    .ect-studio__preview { padding: 18px; }
    .ect-studio__controls { padding: 22px 20px; }
    .ect-hero__stats--center { gap: 28px; }
}
@media (max-width: 575px) {
    .ect-mail__canvas { padding: 10px; }
    .ect-mail__content { padding: 18px 12px 16px; }
    .ect-mail__title { font-size: 22px; }
    .ect-mail__timer .timer-preview { zoom: 0.62; transform: none; }
    .ect-mail__tag { right: 50%; transform: translateX(50%); white-space: nowrap; }
    .ect-styles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Social proof right under the intro, before the creator */
.ect-hero__stats--inline { justify-content: center; border-top: 0; padding-top: 18px; gap: 44px; text-align: center; }
.ect-hero__stats--inline strong { font-size: 26px; }
.ect-hero__stats--inline span { font-size: 14px; }
@media (max-width: 575px) { .ect-hero__stats--inline { gap: 20px; } .ect-hero__stats--inline strong { font-size: 21px; } }