/* SEO pages batch 1 (October 2026): layout system from docs/comps/email-service-page-comp.html.
   Scoped to .hfs so the Webflow source CSS for the shared header and footer is untouched.
   Site tokens only: text #333, green #29b955, mint #cdeeef, tint #f7f8fc, plus the existing
   #878aa5 caption grey and #e5e5e5 rule. Poppins is self-hosted in fonts.css. */
.hfs { --ink:#333; --mute:#878aa5; --line:#e5e5e5; --tint:#f7f8fc; --mint:#cdeeef; --green:#29b955;
  color:var(--ink); font-family:Poppins,"Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:1.65; }
.hfs *, .hfs *::before, .hfs *::after { box-sizing:border-box; }
.hfs a { color:inherit; }
.hfs img { max-width:100%; height:auto; display:block; }
.hfs .wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
.hfs h1, .hfs h2, .hfs h3 { margin:0; padding:0; color:var(--ink); font-family:inherit; line-height:1.15; letter-spacing:-.01em; }
.hfs h1 { font-size:clamp(34px,4.6vw,54px); font-weight:700; }
.hfs h2 { font-size:clamp(28px,3.2vw,38px); font-weight:700; line-height:1.2; }
.hfs h3 { font-size:20px; font-weight:600; line-height:1.35; }
.hfs p { margin:0 0 1em; }
.hfs ul { margin:12px 0 0; padding-left:20px; }
.hfs li { margin-bottom:8px; }
.hfs .lede { font-size:19px; line-height:1.7; }
.hfs .sub { font-size:20px; line-height:1.5; font-weight:500; margin:18px 0 0; }
.hfs .btn { display:inline-block; background:var(--green); color:var(--ink); text-decoration:none; font-weight:600; padding:16px 26px; border-radius:8px; font-size:16px; line-height:1.2; }
.hfs .btn:focus-visible, .hfs a:focus-visible, .hfs summary:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.hfs .link, .hfs p a, .hfs li a, .hfs .ans a, .hfs .who a { text-decoration:underline; text-decoration-color:var(--green); text-decoration-thickness:2px; text-underline-offset:3px; font-weight:500; }
.hfs .actions { display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; }

/* Hero */
.hfs .hero { padding:72px 0 64px; }
.hfs .hero .wrap { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hfs .hero .lede { margin:22px 0 28px; max-width:34em; }
.hfs .hero.solo .wrap { grid-template-columns:1fr; max-width:880px; }
@media (max-width:860px) { .hfs .hero .wrap { grid-template-columns:1fr; } .hfs .hero { padding:48px 0; } }

/* Mint panel (holds phones, SVGs, thumbs) */
.hfs .mint { background:var(--mint); border-radius:18px; padding:32px 28px 24px; position:relative; }
.hfs .mint svg { width:100%; height:auto; display:block; }
.hfs .mint .fcap, .hfs .fcap { font-size:14px; color:var(--ink); margin:14px 0 0; }
.hfs .panel-gap { margin:48px 0 8px; }

/* Phone-framed before/after pair with the green arrow */
.hfs .phones { display:grid; grid-template-columns:1fr 44px 1fr; gap:14px; align-items:center; padding:40px 24px 22px; }
.hfs .arrow { width:44px; height:44px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; margin-top:-30px; }
.hfs .phone { border:5px solid var(--ink); border-radius:26px; overflow:hidden; background:#fff; aspect-ratio:9/16; box-shadow:0 16px 40px rgba(0,0,0,.14); }
.hfs .phone img { width:100%; height:100%; object-fit:cover; object-position:top; }
.hfs .phone.square { aspect-ratio:4/5; }
.hfs .cap { display:flex; justify-content:space-between; font-size:13px; margin-top:10px; }
.hfs .cap b { font-weight:600; }
.hfs .phones .tag { position:absolute; right:18px; top:12px; font-size:13px; }
.hfs .phones .tag a { text-decoration:none; }
@media (max-width:860px) { .hfs .phones { max-width:520px; grid-template-columns:1fr 36px 1fr; gap:8px; padding:40px 12px 16px; } .hfs .arrow { width:36px; height:36px; font-size:18px; } }

/* Single phone with an SMS thread */
.hfs .phone.thread { max-width:300px; margin:0 auto; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; padding:18px 14px; aspect-ratio:9/16; }
.hfs .bubble { font-size:14px; line-height:1.45; padding:10px 14px; border-radius:16px; max-width:85%; }
.hfs .bubble.in { background:var(--tint); align-self:flex-start; border-bottom-left-radius:4px; }
.hfs .bubble.out { background:var(--green); align-self:flex-end; border-bottom-right-radius:4px; }
.hfs .thread .from { font-size:12px; color:var(--mute); text-align:center; margin-bottom:auto; }

/* Results tiles band with the logo strip */
.hfs .results { background:var(--tint); padding:56px 0; }
.hfs .tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hfs .tiles.four { grid-template-columns:repeat(4,1fr); }
.hfs .tile { border-left:4px solid var(--green); padding:4px 0 4px 20px; }
.hfs .tile .num { font-size:clamp(26px,3vw,34px); font-weight:700; line-height:1.1; letter-spacing:-.02em; }
.hfs .tile .who { margin-top:8px; font-size:15px; }
.hfs .results .more { margin:28px 0 0; font-size:15px; }
.hfs .logos { display:grid; grid-template-columns:repeat(6,1fr); gap:28px; align-items:center; opacity:.8; margin-top:44px; }
.hfs .logos img { filter:grayscale(1); max-height:36px; width:auto; margin:0 auto; }
@media (max-width:860px) { .hfs .tiles, .hfs .tiles.four { grid-template-columns:1fr; } .hfs .logos { grid-template-columns:repeat(3,1fr); } }

/* Sections and the two-column feature list */
.hfs .sec { padding:80px 0; }
.hfs .sec.tight-top { padding-top:0; }
.hfs .sec.tint { background:var(--tint); }
.hfs .sec h2 { max-width:22em; margin-bottom:12px; }
.hfs .sec .intro { max-width:38em; margin-bottom:40px; }
.hfs .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:32px 48px; }
.hfs .grid2 h3 { margin-bottom:8px; }
.hfs .grid2 p { margin:0; font-size:16px; }
.hfs .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hfs .card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px 24px; }
.hfs .card h3 { margin-bottom:8px; }
.hfs .card p:last-child { margin-bottom:0; }
.hfs .sec.tint .card { border-color:#fff; }
@media (max-width:760px) { .hfs .grid2, .hfs .grid3 { grid-template-columns:1fr; } }

/* Thumbnail strip (library thumbs) */
.hfs .thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; padding:18px; }
.hfs .thumbs.four { grid-template-columns:repeat(4,1fr); }
.hfs .thumbs a { display:block; border-radius:10px; overflow:hidden; background:#fff; text-decoration:none; }
.hfs .thumbs img { aspect-ratio:1; object-fit:cover; width:100%; }
.hfs .thumbs .lab { font-size:14px; padding:10px 12px; }
@media (max-width:760px) { .hfs .thumbs.four { grid-template-columns:repeat(2,1fr); } }

/* Check card and example cards */
.hfs .checkcard { border:1px solid var(--line); border-radius:12px; padding:22px 24px; margin-top:20px; max-width:44em; background:#fff; }
.hfs .checkcard ul { margin:8px 0 12px 18px; padding:0; font-size:16px; }
.hfs .examples { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
.hfs .example { border-radius:12px; padding:18px 20px; background:#fff; border:1px solid var(--line); }
.hfs .example .label { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.hfs .example.good { border-left:4px solid var(--green); }
.hfs .example.bad { border-left:4px solid var(--mute); }
.hfs .example .text { font-size:16px; margin:0; }
@media (max-width:760px) { .hfs .examples { grid-template-columns:1fr; } }

/* Headshot plus paragraph */
.hfs .working .wrap { display:grid; grid-template-columns:320px 1fr; gap:56px; align-items:center; }
.hfs .working img { border-radius:14px; width:100%; height:auto; }
.hfs .working figure { margin:0; }
.hfs .working figcaption, .hfs .hero figcaption { font-size:14px; color:var(--mute); margin-top:10px; }
.hfs .working p { font-size:18px; line-height:1.7; }
.hfs .hero figure { margin:0; }
.hfs .hero figure img { border-radius:18px; width:100%; height:auto; }
@media (max-width:760px) { .hfs .working .wrap { grid-template-columns:1fr; gap:28px; } .hfs .working img { max-width:280px; } .hfs .hero figure img { max-width:360px; } }

/* Who it is for / not for */
.hfs .fit h2 { font-size:26px; }

/* Price and plain prose */
.hfs .prose p { max-width:40em; font-size:18px; }

/* FAQ: details/summary, closed by default, plus/minus marker */
.hfs .faq h2 { margin-bottom:24px; }
.hfs .faq details { border-top:1px solid var(--line); padding:4px 0; }
.hfs .faq details:last-of-type { border-bottom:1px solid var(--line); }
.hfs .faq summary { cursor:pointer; font-weight:600; font-size:18px; padding:18px 36px 18px 0; list-style:none; position:relative; }
.hfs .faq summary::-webkit-details-marker { display:none; }
.hfs .faq summary::after { content:"+"; position:absolute; right:4px; top:14px; font-size:26px; font-weight:400; color:var(--green); }
.hfs .faq details[open] summary::after { content:"\2212"; }
.hfs .faq .ans { padding:0 0 20px; max-width:44em; font-size:16px; }
.hfs .faq .ans p:last-child { margin-bottom:0; }

/* Dark close band */
.hfs .close { background:var(--ink); color:#fff; padding:72px 0; }
.hfs .close h2 { color:#fff; max-width:18em; margin-bottom:12px; }
.hfs .close p { max-width:36em; font-size:18px; }
.hfs .close .btn { margin-top:10px; }

/* Small heading inside a band (for example "The results we point to") */
.hfs .band-heading { font-size:15px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; margin-bottom:24px; }

/* Small panels and sub-headings that follow a panel inside a section */
.hfs .narrow { max-width:560px; }
.hfs .subhead-gap { margin-top:56px; }

/* Home page comp (docs/comps/home-page-comp.html) */
.hfs .who-we-are { max-width:46em; margin:40px auto 0; text-align:center; font-size:17px; }
.hfs .cards2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:32px; }
.hfs .sec.tint .cards2 .card { border:0; border-radius:14px; padding:26px 24px; }
.hfs .cards2 .card p, .hfs .fit-cards .card p { font-size:15px; margin:0; }
.hfs .fit-cards { margin-top:32px; }
.hfs .fit-cards .card { border-radius:14px; padding:26px 24px; }
.hfs .after-cards { margin:28px 0 0; font-size:16px; max-width:44em; }
@media (max-width:860px) { .hfs .cards2 { grid-template-columns:1fr; } }
/* Outside .hfs: the Webflow hero's text link and the tint behind the existing logo strip */
.hf-text-link { color:#333; font-weight:500; text-decoration:underline; text-decoration-color:#29b955; text-decoration-thickness:2px; text-underline-offset:3px; }
.hf-text-link:focus-visible { outline:3px solid #29b955; outline-offset:3px; }
.hfs-tint { background:#f7f8fc; }
/* Both comps: a FAQ that follows a white section starts without top padding. */
.hfs .sec:not(.tint) + .faq { padding-top:0; }
/* Flow map: under 760px the SVG keeps a readable 900px width and the panel scrolls sideways. */
.hfs .scroll-hint { display:none; }
@media (max-width:759.98px) {
  .hfs .hscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .hfs .hscroll svg { width:900px; max-width:none; }
  .hfs .scroll-hint { display:block; font-size:13px; margin:0 0 10px; }
}
.hfs .hscroll:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
/* Review gate polish (comp fidelity, October 17, 2026) */
.hfs .working figcaption, .hfs .hero figcaption { text-align:left; }
.hfs .faq h2 { max-width:none; }
.hfs .after-cards.wide, .hfs p.after-cards:last-child { max-width:none; }
.hfs .checkcard { margin-top:40px; }
.hfs .checkcard p:last-child { margin-bottom:0; }
.hfs .thumbs .lab { text-decoration:underline; text-underline-offset:3px; }
/* Review gate fixes (accessibility, October 17, 2026): caption text at #333 for AA contrast, and a
   #333 focus outline, which shows on white, tint and mint alike. */
.hfs .working figcaption, .hfs .hero figcaption, .hfs .thread .from { color:var(--ink); }
.hfs .btn:focus-visible, .hfs a:focus-visible, .hfs summary:focus-visible, .hfs .hscroll:focus-visible, .hf-text-link:focus-visible { outline-color:var(--ink, #333); }
.hfs .arrow { color:var(--ink); } /* AA: #333 on green is 4.91:1 (the comp drew a white glyph, 2.57:1) */