/* =========================================================================
   Email sequence specimens (pre-webinar / post-webinar / pre-call) · system B.
   Sits on brand.css. One centred column, a numbered index on top, each email
   rendered in a quiet email-client card. Background changes only fade.
   ========================================================================= */

html{background:var(--ivory)}
body.em-page{
  overflow-x:hidden;
  background:
    radial-gradient(1100px 640px at 50% -240px, rgba(201,165,107,.22), transparent 70%),
    radial-gradient(900px 600px at 100% 40%, rgba(140,90,50,.05), transparent 70%),
    radial-gradient(900px 600px at 0% 75%, rgba(201,165,107,.08), transparent 70%),
    var(--ivory);
}
main{display:block;padding-bottom:120px}

/* ---- hero ---- */
.em-hero{width:min(820px,100% - 40px);margin:0 auto;padding:104px 0 52px;text-align:center}
.em-hero .fb-eyebrow{margin-bottom:20px}
.em-hero__title{font-size:clamp(44px, 6vw, 78px)}
.em-hero__title em{white-space:nowrap}
.em-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;margin:26px 0 0;font:500 15px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.em-meta span{display:inline-flex;align-items:center}
.em-meta span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);margin:0 16px}

/* ---- index ---- */
.toc{width:min(980px,100% - 40px);margin:0 auto 88px}
.toc__d{background:rgba(255,253,249,.72);border:1px solid var(--hair-soft);border-radius:var(--radius);box-shadow:0 1px 2px rgba(27,21,17,.04),0 22px 50px -30px rgba(27,21,17,.25);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.toc__sum{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:14px;min-height:60px;padding:0 24px;
  font:500 15px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid transparent}
.toc__sum::-webkit-details-marker{display:none}
.toc__d[open] .toc__sum{border-bottom-color:var(--hair-soft)}
.toc__chev{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--ease)}
.toc__d[open] .toc__chev{transform:translateY(2px) rotate(225deg)}
.toc__list{list-style:none;margin:0;padding:14px 18px 18px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--rows),auto);grid-template-columns:1fr 1fr;column-gap:28px}
.toc__row{display:flex;align-items:flex-start;gap:16px;padding:14px 14px;border-radius:12px;text-decoration:none;min-height:44px;transition:background .25s var(--ease)}
.toc__row:hover{background:var(--ivory-2)}
.toc__n{flex:none;font:500 28px/1 var(--display);color:var(--gold);width:32px;padding-top:2px;font-variant-numeric:lining-nums}
.toc__txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.toc__meta{display:flex;flex-wrap:wrap;gap:4px 10px;font:500 13px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.toc__tag{color:var(--accent)}
.toc__when{color:var(--faint)}
.toc__subj{font:500 21px/1.25 var(--display);color:var(--ink)}
.toc__subj .tok{font-size:15px}

/* ---- phase divider ---- */
.em-list{width:min(760px,100% - 40px);margin:0 auto}
.phase{display:flex;align-items:center;gap:18px;margin:96px 0 40px;color:var(--gold)}
.phase:first-child{margin-top:0}
.phase::before,.phase::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.phase::after{transform:scaleX(-1)}
.phase__l{font:italic 500 28px/1.1 var(--display);color:var(--ink);text-align:center}

/* ---- one email ---- */
.mail{margin:0 0 64px;scroll-margin-top:28px}
.mail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 6px 16px}
.mail__no{font:500 36px/1 var(--display);color:var(--gold);font-variant-numeric:lining-nums}
.mail__tag{display:inline-flex;align-items:center;min-height:30px;padding:0 14px;border-radius:999px;background:var(--accent);color:var(--accent-ink);
  font:500 13px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.mail__when{display:inline-flex;align-items:center;gap:7px;margin-left:auto;font:500 15px/1.3 var(--sans);letter-spacing:.06em;color:var(--muted)}
.mail__when svg{width:16px;height:16px;flex:none;color:var(--accent)}

.mail__client{background:var(--paper);border:1px solid var(--hair-soft);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.mail__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:46px;padding:0 22px;border-bottom:1px solid var(--hair-soft);
  background:linear-gradient(180deg,rgba(241,233,222,.55),rgba(255,253,249,0))}
.mail__tools{display:flex;gap:16px;color:var(--faint)}
.mail__tools svg{width:18px;height:18px}
.mail__count{font:500 14px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

.mail__head{padding:30px 40px 0}
.mail__subject{font:500 clamp(30px, 3.2vw, 38px)/1.15 var(--display);letter-spacing:-.005em;margin:0 0 24px;color:var(--ink);text-wrap:balance}
.mail__subject .tok{font-size:17px;vertical-align:middle}
.mail__from{display:flex;align-items:center;gap:14px}
.mail__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none;box-shadow:0 0 0 1px var(--hair-soft),0 0 0 3px var(--paper),0 0 0 4px rgba(201,165,107,.55)}
.mail__who{min-width:0;flex:1}
.mail__name{margin:0;font:600 17px/1.35 var(--sans);color:var(--ink)}
.mail__addr{font-weight:400;color:var(--faint)}
.mail__to{margin:2px 0 0;font:400 16px/1.3 var(--sans);color:var(--faint)}
.mail__to .tok{font-size:15px}
.mail__star{width:20px;height:20px;flex:none;color:var(--faint);align-self:flex-start;margin-top:4px}
.mail__pv{display:flex;gap:12px;align-items:baseline;margin:22px 0 0;padding:14px 0;border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft)}
.mail__pv-l{flex:none;font:500 13px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.mail__pv-t{font:italic 400 21px/1.4 var(--display);color:var(--muted)}

/* body */
.mail__body{padding:32px 40px 40px;font:400 19px/1.75 var(--sans);color:var(--ink)}
.mail__body > p{margin:0 0 18px}
.mail__body strong{font-weight:600}

/* merge + link tokens */
.tok{display:inline-flex;align-items:center;gap:6px;vertical-align:baseline;padding:1px 9px;border-radius:7px;
  font:500 .78em/1.6 var(--sans);letter-spacing:.06em;white-space:nowrap}
.tok--merge{background:rgba(201,165,107,.16);color:#6f4f22;box-shadow:inset 0 0 0 1px rgba(201,165,107,.45)}
.tok--link{background:rgba(140,90,50,.08);color:var(--accent-deep);box-shadow:inset 0 0 0 1px rgba(140,90,50,.32)}
.tok__ico{width:15px;height:15px;flex:none}

/* primary link: a calm button-shaped line, the token beside it */
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:28px 0 28px!important;padding:18px 20px;border-radius:14px;
  background:linear-gradient(180deg,rgba(241,233,222,.7),rgba(241,233,222,.35));box-shadow:inset 0 0 0 1px rgba(201,165,107,.35)}
.cta__label{display:inline-flex;align-items:center;gap:10px;font:500 17px/1.35 var(--sans);color:var(--accent-deep);text-decoration:underline;text-decoration-color:rgba(140,90,50,.35);text-underline-offset:4px}
.cta__arrow{text-decoration:none;display:inline-block}
.cta .tok{font-size:15px}

/* pillars (verbatim) */
.pil{list-style:none;margin:6px 0 26px;padding:0;border-top:1px solid var(--hair-soft)}
.pil li{display:flex;gap:18px;padding:18px 2px;border-bottom:1px solid var(--hair-soft)}
.pil__n{flex:none;font:500 26px/1.1 var(--display);color:var(--gold);width:30px}
.pil__t{display:block;font:500 24px/1.25 var(--display);color:var(--ink);margin-bottom:4px}
.pil__l{display:block;font-size:18px;line-height:1.6;color:var(--muted)}

/* lists */
.dots{margin:0 0 22px;padding:0;list-style:none}
.dots li{position:relative;padding-left:24px;margin:0 0 12px}
.dots li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.steps{list-style:none;margin:4px 0 24px;padding:0;counter-reset:s}
.steps li{display:flex;gap:16px;align-items:flex-start;margin:0 0 16px}
.steps__n{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--gold);font:500 20px/1 var(--display);color:var(--accent);margin-top:-1px}

/* Q&A */
.qa{margin:6px 0 24px;border-left:1px solid var(--gold);padding-left:22px}
.qa__q{margin:0 0 6px!important;font:italic 500 23px/1.3 var(--display);color:var(--ink)}
.qa__a{margin:0 0 20px!important;color:var(--muted)}
.qa__a:last-child{margin-bottom:0!important}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:8px 0 26px;background:var(--hair-soft);border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--hair-soft)}
.stats__c{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:8px;padding:22px 12px;background:var(--paper)}
.stats__n{font:500 42px/1 var(--display);color:var(--accent)}
.stats__l{font:400 15px/1.45 var(--sans);color:var(--muted)}

/* images */
.fig{margin:8px 0 26px}
.fig__frame{position:relative;display:block;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--hair-soft),0 14px 34px -20px rgba(27,21,17,.35)}
.fig img{width:100%;height:auto}
.fig--cover{max-width:300px;margin-inline:auto}
.fig--wide img{aspect-ratio:16/9;object-fit:cover;object-position:50% 40%}
.fig--video img{aspect-ratio:16/9;object-fit:cover}
.fig__play{position:absolute;left:50%;top:34%;width:56px;height:56px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;
  background:rgba(20,16,13,.72);color:var(--accent-ink);box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.fig__play svg{width:24px;height:24px;margin-left:3px}
.fig figcaption{margin-top:10px;text-align:center;font:italic 400 19px/1.4 var(--display);color:var(--muted)}

/* sign-off + P.S. */
.sign{margin:30px 0 0!important;display:flex;flex-direction:column;gap:2px}
.sign__close{font:400 18px/1.4 var(--sans);color:var(--muted)}
.sign__name{font:italic 500 34px/1.1 var(--display);color:var(--ink)}
.ps{margin:28px 0 0!important;padding-top:20px;border-top:1px dashed rgba(201,165,107,.6);font-size:18px;color:var(--muted)}
.ps strong{color:var(--accent);font-weight:600;letter-spacing:.04em}

/* ---- tablet / phone ---- */
@media (max-width:900px){
  .toc__list{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none}
}
@media (max-width:700px){
  .em-hero{padding:72px 0 36px}
  .em-hero .fb-eyebrow{font-size:13px;letter-spacing:.18em}
  .em-hero__title{font-size:42px}
  .em-meta{font-size:13px;letter-spacing:.12em}
  .em-meta{flex-direction:column;align-items:center;gap:8px}
  .em-meta span+span::before{display:none}
  .toc{width:calc(100% - 32px);margin-bottom:64px}
  .toc__list{padding:8px 6px 10px}
  .toc__row{padding:12px 10px;gap:12px}
  .toc__n{font-size:24px;width:26px}
  .toc__subj{font-size:20px}
  .em-list{width:calc(100% - 32px)}
  .phase{margin:72px 0 32px}
  .phase__l{font-size:24px}
  .mail{margin-bottom:52px}
  .mail__meta{margin:0 2px 14px;gap:8px 12px}
  .mail__no{font-size:30px}
  .mail__when{margin-left:0;width:100%;font-size:15px}
  .mail__bar{padding:0 16px}
  .mail__head{padding:24px 20px 0}
  .mail__subject{font-size:30px;margin-bottom:20px}
  .mail__addr{display:block;font-size:15px;overflow-wrap:anywhere}
  .mail__pv{flex-direction:column;gap:4px}
  .mail__pv-t{font-size:20px}
  .mail__body{padding:26px 20px 30px;font-size:19px}
  .cta{padding:16px}
  .pil li{gap:12px}
  .pil__n{width:24px;font-size:24px}
  .pil__t{font-size:22px}
  .stats{grid-template-columns:1fr 1fr}
  .stats__n{font-size:36px}
  .qa{padding-left:16px}
  .qa__q{font-size:22px}
}
@media (max-width:420px){
  .tok{white-space:normal}
}