/* Guide pages: shared by every guide. Site-wide styles are in /assets/site.css. */
.preview{padding:clamp(20px,2.2vw,28px)}
.preview__title{font:800 clamp(1.6rem,1.3rem + .8vw,2rem)/1 var(--display)}
.inboxrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.inboxrow__from{font:700 .9375rem/1.4 var(--mail)}
.inboxrow__time{font:400 .8125rem/1.4 var(--mail);color:var(--ink-2)}
.inboxrow__line{grid-column:1 / -1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 .9375rem/1.5 var(--mail);color:var(--ink-2)}
.inboxrow__line b{margin-right:.4em;color:var(--ink)}
.inboxrow .sticker{grid-column:1 / -1;justify-self:start;margin:8px 0 0}
.preview__note{margin-top:16px;font-size:.8125rem;color:var(--ink-2)}

.steps{display:grid;gap:26px;margin-top:28px;counter-reset:step}
.steps li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:6px 18px;counter-increment:step}
.steps li::before{content:counter(step);grid-row:1 / span 2;font:900 3.25rem/.8 var(--display);color:var(--cobalt)}
.steps h3{font:800 clamp(1.6rem,1.3rem + .8vw,2rem)/1 var(--display)}
.steps p{grid-column:2;font-size:1.125rem;line-height:1.6}
.slidebox{margin-top:24px;padding:clamp(16px,2.4vw,28px);border-radius:var(--r);background:var(--cobalt);color:var(--white)}
.slidebox :focus-visible{outline-color:var(--sun)}
.checker{margin-top:24px;padding:clamp(22px,2.6vw,32px)}
.checker label{display:block;font-weight:700}
.area{display:block;width:100%;min-height:120px;margin-top:10px;padding:14px 16px;border:2px solid var(--night);border-radius:16px;background:var(--night);color:var(--white);font:400 1.0625rem/1.5 var(--mail);resize:vertical}
.area::placeholder{color:#8F96C8}
.area:focus{outline:none;border-color:var(--sun)}
.checker__actions{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:14px}
.result{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18)}
.result__verdict{font:900 clamp(2.6rem,2rem + 1.6vw,3.6rem)/.9 var(--display)}
.result__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.result__chips span{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:var(--night);font-size:.875rem;font-weight:700}
.result__chips .is-bad{background:var(--red)}
.result__chips .is-good{background:var(--sun);color:var(--ink)}
.prose .result__tip{margin-top:14px;font-size:1rem;color:var(--mist)}
.prose .checker__note{margin-top:16px;font-size:.875rem;color:var(--mist)}
.openers{display:flex;flex-direction:column;gap:16px;margin-top:24px;padding:clamp(22px,2.6vw,32px)}
.openers .tpl p{font-size:1rem;line-height:1.6}

/* Ending rows: two ways to close the same email */
.endrow{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.endrow__label{font-size:.8125rem;font-weight:700;color:var(--ink-2)}
.endrow__text{margin-top:4px;font:400 1.0625rem/1.5 var(--mail);overflow-wrap:anywhere}
.endrow .sticker{margin:8px 0 0}

/* One-line input in a checker */
.area--line{min-height:0;height:58px;resize:none}

/* A copy card with a title */
.tpl__title{font:900 1.6rem/1 var(--display)}

/* Sending domain finder */
.domains{margin-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.domains li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.domains b{font:400 1.0625rem/1.4 var(--mail);overflow-wrap:anywhere}
.domains span{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:var(--night);font-size:.8125rem;font-weight:800;white-space:nowrap}
.domains .is-free{background:var(--sun);color:var(--ink)}
.domains .is-taken{background:transparent;box-shadow:inset 0 0 0 2px var(--mist)}

/* Rules table */
.reqs-scroll{margin-top:22px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.reqs{width:100%;min-width:600px;border-collapse:separate;border-spacing:0;font-size:.9375rem;line-height:1.45}
.reqs th,.reqs td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.reqs thead th{border-bottom:2px solid var(--ink);font-weight:800}
.reqs tbody th{font:900 1.3rem/1.05 var(--display)}
.reqs tr:last-child th,.reqs tr:last-child td{border-bottom:0}
.prose .reqs-scroll + p{margin-top:1.25rem}

/* Sources */
.sources{margin-top:16px;border-top:1px solid var(--line)}
.sources li{padding:12px 0;border-bottom:1px solid var(--line);font-size:.9375rem;line-height:1.5}
.sources a{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}