/* ============================================================================
layout-editorial.css — the "editorial" layout for seoigaming.agency
A LIGHT, refined magazine/editorial skin on top of theme.css.
Serif display headlines + Inter body, thin 1px rules, generous whitespace,
restrained cyan accents (--brand #0e7490 / --brand-2 #22d3ee).
Structurally & visually DISTINCT from the dark "bold" sibling.
Mobile-first; the page never scrolls horizontally.
========================================================================= */
:root{ --ed-max:1180px;
--ed-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif; }
.ed-body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.ed-body a{color:var(--brand)}
.ed-body .muted{color:var(--muted)}
.ed-body .small{font-size:.85rem}
.ed-body img{max-width:100%}
.ed-body .container{max-width:var(--ed-max);margin:0 auto;padding:0 24px}
.ed-body .wrap{padding:0}
/* editorial type scale */
.ed-body h1,.ed-body h2,.ed-body h3{font-family:var(--ed-serif);color:var(--ink);letter-spacing:-.01em}
.ed-body h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.06;font-weight:700}
.ed-body h2{font-size:clamp(1.55rem,3vw,2.3rem);line-height:1.12;font-weight:700}
.ed-body h3{font-size:1.2rem;line-height:1.28;font-weight:700}
/* shared kicker / small-caps label */
.ed-kicker{display:inline-block;text-transform:uppercase;letter-spacing:.16em;font-family:var(--font);
font-size:.7rem;font-weight:700;color:var(--brand);margin-bottom:8px}
/* ---------- section scaffold ---------- */
.ed-home > section{max-width:var(--ed-max);margin:0 auto;padding:66px 24px}
.ed-home > section + section{border-top:1px solid var(--line)}
/* section head: big serif numeral + kicker + title */
.ed-sec-head{display:flex;align-items:baseline;gap:22px;margin:0 0 36px}
.ed-sec-no{font-family:var(--ed-serif);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:var(--brand-2);
line-height:1;flex:none;min-width:1.6em}
.ed-sec-head h2{margin:0}
/* ---------- buttons / links ---------- */
.ed-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:600;
font-size:.95rem;border-radius:8px;padding:13px 24px;cursor:pointer;border:1px solid transparent;text-decoration:none;
transition:background .18s,color .18s,border-color .18s,transform .12s,box-shadow .18s}
.ed-btn:hover{text-decoration:none;transform:translateY(-1px)}
.ed-btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 22px rgba(14,116,144,.20)}
.ed-btn-primary:hover{background:var(--ink);color:#fff;box-shadow:0 12px 30px rgba(14,27,38,.22)}
.ed-btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.ed-btn-ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--bg-soft)}
/* ---------------------------------------------------------------------------
HEADER — slim editorial masthead with a Services dropdown
------------------------------------------------------------------------- */
.ed-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 90%,transparent);
backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line)}
.ed-hd{display:flex;align-items:center;gap:26px;height:74px}
.ed-brand{display:inline-flex;align-items:center;text-decoration:none}
.ed-brand:hover{text-decoration:none}
.edl-logo{display:inline-flex;align-items:center;gap:11px}
.edl-mark{flex:none;display:block}
.edl-word{font-family:var(--ed-serif);font-weight:700;font-size:1.42rem;letter-spacing:-.01em;color:var(--ink);line-height:1}
.edl-word b{color:var(--brand);font-weight:700}
.ed-nav{display:flex;align-items:center;gap:26px;margin-left:8px;flex:1}
.ed-nav > a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.94rem;position:relative;padding:4px 0;transition:color .15s}
.ed-nav > a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1.5px;background:var(--brand);transition:right .22s ease}
.ed-nav > a:hover{color:var(--brand)}
.ed-nav > a:hover::after{right:0}
.ed-nav-cta{display:none}
/* dropdown */
.ed-dd{position:relative;display:inline-flex;align-items:center}
.ed-dd-btn{background:none;border:0;color:var(--ink);font-family:var(--font);font-weight:500;font-size:.94rem;cursor:pointer;
display:inline-flex;align-items:center;gap:6px;padding:0;transition:color .15s}
.ed-dd-btn:hover{color:var(--brand)}
.ed-caret{font-size:.66rem;transition:transform .2s;color:var(--brand)}
.ed-dd:hover .ed-caret,.ed-dd.open .ed-caret{transform:rotate(180deg)}
.ed-dd-menu{position:absolute;top:calc(100% + 18px);left:0;min-width:300px;background:var(--bg);border:1px solid var(--line);
border-radius:12px;padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;visibility:hidden;
transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;
box-shadow:0 26px 60px rgba(14,27,38,.14);z-index:70}
.ed-dd-menu::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.ed-dd:hover .ed-dd-menu,.ed-dd.open .ed-dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.ed-dd-menu a{padding:10px 13px;border-radius:7px;color:var(--ink)!important;text-decoration:none;font-size:.9rem;font-weight:500;transition:background .14s,color .14s}
.ed-dd-menu a:hover{background:var(--bg-soft);color:var(--brand)!important}
.ed-hd-right{display:flex;align-items:center;gap:16px;margin-left:auto}
.ed-lang{display:flex;gap:6px}
.ed-lang-link{border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:.74rem;font-weight:600;color:var(--muted);text-decoration:none}
.ed-lang-link:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.ed-hdr-cta{background:var(--brand);color:#fff;font-weight:600;font-size:.9rem;padding:10px 18px;border-radius:8px;
text-decoration:none;white-space:nowrap;transition:background .15s,transform .12s}
.ed-hdr-cta:hover{background:var(--ink);color:#fff;transform:translateY(-1px);text-decoration:none}
/* burger (mobile only) */
.ednav-burger{display:none;margin-left:auto;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
border:1px solid var(--line);border-radius:9px;cursor:pointer;padding:0 11px;background:var(--bg)}
.ednav-burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
/* ---------------------------------------------------------------------------
1. HERO
------------------------------------------------------------------------- */
.ed-hero{padding-top:72px;padding-bottom:72px;
background:radial-gradient(900px 460px at 92% -8%,color-mix(in srgb,var(--brand-2) 16%,transparent),transparent 62%)}
.ed-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.ed-eyebrow{display:inline-flex;align-items:center;gap:11px;text-transform:uppercase;letter-spacing:.18em;
font-size:.72rem;font-weight:700;color:var(--brand);margin:0 0 20px}
.ed-eyebrow::before{content:"";width:30px;height:2px;background:var(--brand-2)}
.ed-hero-h1{margin:0 0 18px;max-width:16ch}
.ed-hero-sub{font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.6;color:var(--muted);max-width:56ch;margin:0 0 30px;font-family:var(--font)}
.ed-hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.ed-hero-facts{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.ed-hero-facts li{position:relative;padding-left:24px;color:var(--ink);font-weight:500;font-size:.92rem}
.ed-hero-facts li::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:50%;background:var(--brand);
-webkit-mask:url("data:image/svg+xml;utf8,") center/11px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/11px no-repeat}
.ed-hero-art{position:relative}
.ed-hero-art svg{display:block;width:100%;height:auto}
/* ---------------------------------------------------------------------------
2. CREDIBILITY STRIP
------------------------------------------------------------------------- */
.ed-cred{border-top:1px solid var(--line)}
.ed-cred-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 28px}
.ed-metric{text-align:center;padding:6px 14px;border-left:1px solid var(--line)}
.ed-metric:first-child{border-left:0}
.ed-metric b{display:block;font-family:var(--ed-serif);font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:700;color:var(--ink);line-height:1}
.ed-metric span{display:block;margin-top:8px;color:var(--muted);font-size:.86rem}
.ed-cred-chips{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
border-top:1px solid var(--line);padding-top:26px}
.ed-cred-label{text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;font-weight:700;color:var(--muted);margin-right:4px}
.ed-chip{border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-weight:600;font-size:.84rem;color:var(--ink);background:var(--bg-soft)}
/* ---------------------------------------------------------------------------
3. SERVICES / EXPERTISE GRID
------------------------------------------------------------------------- */
.ed-svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ed-svc-card{display:flex;flex-direction:column;align-items:flex-start;background:var(--bg);padding:28px 26px;
text-decoration:none;color:var(--ink);position:relative;transition:background .16s,transform .16s}
.ed-svc-card:hover{background:var(--bg-soft);text-decoration:none}
.ed-svc-ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:11px;
background:var(--bg-soft);color:var(--brand);border:1px solid var(--line);margin-bottom:18px;transition:background .16s,color .16s,border-color .16s}
.ed-svc-card:hover .ed-svc-ic{background:var(--brand);color:#fff;border-color:var(--brand)}
.ed-svc-ic svg{width:24px;height:24px}
.ed-svc-card h3{margin:0 0 9px}
.ed-svc-card p{margin:0 0 18px;font-family:var(--font);font-size:.93rem;line-height:1.6;color:var(--muted)}
.ed-svc-go{margin-top:auto;color:var(--brand);font-weight:600;font-size:.88rem;font-family:var(--font);letter-spacing:.01em}
.ed-svc-card:hover .ed-svc-go{color:var(--ink)}
.ed-svc-static{cursor:default}
.ed-svc-static:hover{background:var(--bg)}
/* ---------------------------------------------------------------------------
4. METHODOLOGY — stepped ribbon with connecting hairline
------------------------------------------------------------------------- */
.ed-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.ed-step{position:relative;padding:26px 26px 8px 0;border-top:2px solid var(--ink)}
.ed-step + .ed-step{padding-left:26px;border-left:1px solid var(--line)}
.ed-step-n{display:block;font-family:var(--ed-serif);font-size:1.6rem;font-weight:700;color:var(--brand-2);line-height:1;margin-bottom:14px}
.ed-step h3{margin:0 0 8px;font-size:1.12rem}
.ed-step p{margin:0;font-family:var(--font);font-size:.92rem;line-height:1.6;color:var(--muted)}
/* ---------------------------------------------------------------------------
5. INTRO PROSE — reading measure + drop cap
------------------------------------------------------------------------- */
.ed-measure{max-width:70ch}
.ed-measure p{font-family:var(--font);font-size:1.1rem;line-height:1.78;color:var(--ink);margin:0 0 1.15em}
.ed-measure p:last-child{margin-bottom:0}
.ed-measure p:first-of-type::first-letter{font-family:var(--ed-serif);font-size:3.4rem;line-height:.82;font-weight:700;
float:left;margin:6px 14px 0 0;color:var(--brand)}
.ed-measure a{color:var(--brand);border-bottom:1px solid color-mix(in srgb,var(--brand) 35%,transparent)}
.ed-measure a:hover{text-decoration:none;border-bottom-color:var(--brand)}
.ed-intro-grid{display:grid;grid-template-columns:1fr 320px;gap:16px 48px;align-items:center}
.ed-intro-grid .ed-measure{max-width:none}
.ed-intro-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
/* ---------------------------------------------------------------------------
6. TEAM / E-E-A-T
------------------------------------------------------------------------- */
.ed-team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}
.ed-member{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:26px 18px;text-align:center;
transition:transform .15s,border-color .15s,box-shadow .15s}
.ed-member:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand) 40%,var(--line));box-shadow:0 14px 34px rgba(14,116,144,.10)}
.ed-avatar{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:16px;
background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;font-family:var(--ed-serif);font-weight:700;
font-size:1.5rem;margin-bottom:14px;box-shadow:0 8px 20px rgba(14,116,144,.22)}
.ed-avatar-img{width:64px;height:64px;border-radius:16px;object-fit:cover;margin-bottom:14px;box-shadow:0 8px 20px rgba(14,116,144,.22)}
.ed-member figcaption a{text-decoration:none}
.ed-member figcaption b{display:block;font-family:var(--font);font-size:1rem;color:var(--ink)}
.ed-member figcaption .muted{display:block;font-size:.83rem;margin-top:4px}
/* ---------------------------------------------------------------------------
7. TESTIMONIALS
------------------------------------------------------------------------- */
.ed-voices-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.ed-quote{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:26px 26px 24px;
display:flex;flex-direction:column;gap:14px}
.ed-stars{color:var(--brand-2);letter-spacing:2px;font-size:1rem}
.ed-quote blockquote{margin:0;font-family:var(--ed-serif);font-size:1.12rem;line-height:1.5;color:var(--ink);flex:1;font-style:italic}
.ed-quote blockquote::before{content:"\201C";color:var(--brand);font-style:normal;font-weight:700;margin-right:2px}
.ed-quote figcaption{display:flex;align-items:center;gap:12px}
.ed-q-avatar{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;flex:none;
background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;font-family:var(--ed-serif);font-weight:700;font-size:1.05rem}
.ed-q-avatar-img{width:42px;height:42px;border-radius:11px;object-fit:cover;flex:none}
.ed-q-meta b{display:block;font-family:var(--font);font-size:.94rem;color:var(--ink)}
.ed-q-meta .muted{display:block;font-size:.82rem}
/* ---------------------------------------------------------------------------
8. FAQ
------------------------------------------------------------------------- */
.ed-faq-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.ed-faq-list details{border-bottom:1px solid var(--line)}
.ed-faq-list summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-family:var(--ed-serif);font-weight:700;
font-size:1.08rem;color:var(--ink);position:relative}
.ed-faq-list summary::-webkit-details-marker{display:none}
.ed-faq-list summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--brand);
font-size:1.5rem;font-weight:400;line-height:1;transition:transform .2s}
.ed-faq-list details[open] summary::after{content:"\2013"}
.ed-faq-list .faq-a{padding:0 40px 22px 0;font-family:var(--font);color:var(--muted);line-height:1.7}
/* ---------------------------------------------------------------------------
9. FEATURED / LATEST CARDS
------------------------------------------------------------------------- */
.ed-card-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:26px}
.ed-artcard{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;text-decoration:none;transition:box-shadow .18s,transform .14s,border-color .18s}
.ed-artcard:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 14px 40px rgba(14,116,144,.12);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.ed-artcard-thumb{display:block;background:var(--bg-soft);aspect-ratio:16/9;overflow:hidden}
.ed-artcard-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.ed-artcard:hover .ed-artcard-thumb img{transform:scale(1.04)}
.ed-artcard-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.ed-artcard .ed-kicker{margin-bottom:9px}
.ed-artcard-body h3{margin:0 0 .5em;font-size:1.08rem;line-height:1.3;color:var(--ink)}
.ed-artcard-excerpt{font-family:var(--font);font-size:.92rem;line-height:1.55;margin:0;color:var(--muted);
display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ed-artcard-meta{margin-top:auto;padding-top:14px;font-family:var(--font);font-size:.76rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.ed-related .ed-artcard.car-item{flex:0 0 300px;scroll-snap-align:start;margin:0}
@media(max-width:560px){.ed-related .ed-artcard.car-item{flex:0 0 82%}}
/* ---------------------------------------------------------------------------
10. LEAD BAND
------------------------------------------------------------------------- */
.ed-lead{background:radial-gradient(760px 380px at 12% 0%,color-mix(in srgb,var(--brand-2) 14%,transparent),transparent 62%),var(--bg-soft);
border-top:1px solid var(--line)}
.ed-lead-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.ed-lead-copy h2{margin:0 0 12px}
.ed-lead-copy p{font-family:var(--font);color:var(--muted);line-height:1.6;margin:0 0 18px;max-width:46ch}
.ed-lead-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ed-lead-list li{position:relative;padding-left:28px;color:var(--ink);font-weight:500}
.ed-lead-list li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--brand);
-webkit-mask:url("data:image/svg+xml;utf8,") center/12px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/12px no-repeat}
.ed-lead-form{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:14px;
box-shadow:0 20px 50px rgba(14,27,38,.08)}
.ed-field{display:flex;flex-direction:column;gap:6px}
.ed-field span{font-family:var(--font);font-size:.8rem;font-weight:600;color:var(--muted)}
.ed-lead-form input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px 14px;color:var(--ink);font:inherit;font-family:var(--font)}
.ed-lead-form input::placeholder{color:color-mix(in srgb,var(--muted) 80%,transparent)}
.ed-lead-form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.ed-lead-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ed-lead-fine{margin:2px 0 0}
.hp{position:absolute!important;left:-9999px!important;height:0;width:0;overflow:hidden}
/* ---------------------------------------------------------------------------
FOOTER — balanced flat grid
------------------------------------------------------------------------- */
.ed-footer{position:relative;border-top:1px solid var(--line);background:var(--bg-soft);margin-top:72px;padding:48px 0 14px}
.ed-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand),#22d3ee 55%,var(--brand))}
.ed-ft{display:grid;grid-template-columns:1.4fr 1.5fr .9fr 1.15fr;gap:32px;padding:60px 24px 40px;align-items:start}
.ed-ft-brand{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 26px;box-shadow:0 2px 8px rgba(14,116,144,.06)}
.ed-ft-brand .ed-brand{display:inline-flex;margin-bottom:16px}
.ed-ft-brand .muted{margin:0 0 16px;max-width:32ch;line-height:1.6;font-family:var(--font)}
.ed-ft-social{display:flex;gap:14px;margin:12px 0}
.ed-ft-social a{color:var(--muted);text-decoration:none;font-size:.9rem}
.ed-ft-social a:hover{color:var(--brand)}
.ed-ft-age{display:inline-block;font-size:.72rem;color:var(--brand);border:1px solid rgba(14,116,144,.3);background:rgba(14,116,144,.06);padding:5px 12px;border-radius:999px;margin-top:6px;font-family:var(--font)}
.ed-ft-col:not(.ed-ft-col--cta){padding-top:28px}
.ed-ft-col h4{font-family:var(--font);font-size:.74rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin:0 0 18px}
.ed-ft-nav{display:flex;flex-direction:column;gap:11px}
.ed-ft-nav a{color:var(--ink);text-decoration:none;font-size:.91rem;font-family:var(--font);transition:color .12s}
.ed-ft-nav a:hover{color:var(--brand)}
.ed-ft-nav--multi{display:block;columns:2;column-gap:26px}
.ed-ft-nav--multi a{display:block;margin-bottom:11px;break-inside:avoid}
.ed-ft-col--cta{background:linear-gradient(160deg,rgba(34,211,238,.14),rgba(14,116,144,.05));border:1px solid rgba(14,116,144,.28);border-radius:16px;padding:26px 24px}
.ed-ft-col--cta h4{color:var(--brand)}
.ed-ft-col--cta .muted{color:var(--ink);line-height:1.55;margin:0 0 16px;font-family:var(--font)}
.ed-ft-cta{margin-top:2px;width:100%;text-align:center}
.ed-ft-legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 24px;border-top:1px solid var(--line)}
.ed-body .ed-ft{padding-bottom:48px}
.ed-body .ed-ft-legal{padding-top:22px;padding-bottom:2px}
.ed-ft-legal .muted{font-family:var(--font)}
/* ---------------------------------------------------------------------------
POPUP / BREADCRUMBS (light editorial)
------------------------------------------------------------------------- */
.cf-popup-card{border-top:4px solid var(--brand);border-radius:14px}
.cf-popup-title{font-family:var(--ed-serif);letter-spacing:-.01em}
.cf-popup-cta{background:var(--brand);border-radius:8px}
.cf-popup-cta:hover{background:var(--ink)}
.cf-popup-form input:focus,.cf-popup-form select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.ed-crumbs{padding:18px 0;font-size:.82rem}
.ed-crumbs a{color:var(--muted);text-decoration:none}
.ed-crumbs a:hover{color:var(--brand)}
.ed-sidebar{display:flex;flex-direction:column;gap:0}
/* ---------------------------------------------------------------------------
CTA text color — beat the global anchor-color rule so filled buttons show
------------------------------------------------------------------------- */
.ed-btn-primary,.ed-hdr-cta,.ed-ft-cta{color:#fff!important}
.ed-btn-ghost{color:var(--ink)!important}
.ed-btn-ghost:hover{color:var(--brand)!important}
/* ---------------------------------------------------------------------------
RESPONSIVE (placed last so it wins the cascade over base layout rules)
------------------------------------------------------------------------- */
@media(max-width:960px){
.ed-hero-grid{grid-template-columns:1fr;gap:34px}
.ed-pillar-head-grid{grid-template-columns:1fr;gap:24px}
.ed-pillar-head-art{order:-1}
.ed-lead-inner{grid-template-columns:1fr;gap:32px}
.ed-steps{grid-template-columns:repeat(2,1fr)}
.ed-ft{grid-template-columns:repeat(2,1fr);gap:32px}
.ed-hero{padding-top:52px;padding-bottom:56px}
}
@media(max-width:860px){
.ednav-burger{display:flex}
.ed-hdr-cta{display:none}
.ed-hd{height:64px;gap:14px}
.ed-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;flex:none;margin:0;
background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 20px 44px rgba(0,0,0,.12);
max-height:0;overflow:hidden;opacity:0;padding:0 20px;transition:max-height .28s ease,opacity .2s ease,padding .28s ease}
.ed-header.nav-open .ed-nav{max-height:calc(100vh - 64px);opacity:1;padding:8px 20px 16px;overflow-y:auto}
.ed-nav > a,.ed-nav-cta{padding:13px 2px;border-bottom:1px solid var(--line);width:100%}
.ed-nav > a::after{display:none}
.ed-nav-cta{display:block;color:var(--brand)!important;font-weight:700;border-bottom:0}
.ed-dd{display:block;width:100%}
.ed-dd-btn{width:100%;justify-content:space-between;padding:13px 2px;border-bottom:1px solid var(--line)}
.ed-dd-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;
display:none;grid-template-columns:1fr;padding:2px 0 6px;min-width:0}
.ed-dd.open .ed-dd-menu{display:grid}
.ed-dd-menu a{display:block;padding:10px 12px}
.ed-header.nav-open .ednav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ed-header.nav-open .ednav-burger span:nth-child(2){opacity:0}
.ed-header.nav-open .ednav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.ed-cred-metrics{grid-template-columns:repeat(2,1fr);row-gap:22px}
.ed-metric:nth-child(2n+1){border-left:0}
.ed-steps{grid-template-columns:1fr}
.ed-lead-row{grid-template-columns:1fr}
.ed-ft{grid-template-columns:1fr;gap:26px;padding:44px 20px 30px}
.ed-ft-nav--multi{columns:1}
.ed-sec-head{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:28px}
}
@media(max-width:520px){
.ed-cred-metrics{grid-template-columns:1fr}
.ed-metric{border-left:0;text-align:left;padding:6px 0}
.ed-hero{padding-top:40px;padding-bottom:44px}
.ed-measure p:first-of-type::first-letter{font-size:2.8rem}
.ed-lead{padding-left:0;padding-right:0}
}
/* ---- Free Resources page (agency, editorial) ---- */
.ed-res-hero{text-align:center;padding-top:74px;padding-bottom:56px;background:radial-gradient(820px 420px at 50% -8%,color-mix(in srgb,var(--brand-2) 14%,transparent),transparent 60%)}
.ed-res-hero .ed-hero-h1{max-width:22ch;margin-left:auto;margin-right:auto}
.ed-res-hero .ed-hero-sub{margin-left:auto;margin-right:auto}
.ed-res-hero .ed-hero-actions{justify-content:center}
.ed-res-lead{font-family:var(--font);line-height:1.6;max-width:72ch;margin:0 0 24px}
.ed-resources .res-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:80ch}
.ed-resources .res-list li{position:relative;padding-left:34px;line-height:1.6;color:var(--muted);font-family:var(--font)}
.ed-resources .res-list li b{font-weight:700;color:var(--ink)}
.ed-resources .res-list li::before{content:"✓";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:.76rem;display:grid;place-items:center}
.ed-resources .res-list--num{counter-reset:res}
.ed-resources .res-list--num li::before{content:counter(res);counter-increment:res;font-size:.82rem}
.ed-resources .res-list code{background:var(--bg-soft);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:.9em;color:var(--brand);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* ---- home answer-first depth sections ---- */
.ed-answers{max-width:var(--ed-max);margin:0 auto;padding:66px 24px;border-top:1px solid var(--line)}
.ed-answers-grid{display:grid;grid-template-columns:1fr 280px;gap:16px 56px;align-items:start}
.ed-answers-main{min-width:0}
.ed-answer-block{padding:22px 0}
.ed-answer-block + .ed-answer-block{border-top:1px solid var(--line)}
.ed-answer-block h3{font-family:var(--ed-serif);font-size:1.3rem;font-weight:700;margin:0 0 12px;color:var(--ink)}
.ed-answer-block .ed-measure{margin:0}
.ed-answer-block .ed-measure p:first-of-type::first-letter{font-size:inherit;font-family:inherit;font-weight:inherit;float:none}
.ed-measure ul{margin:4px 0 18px;padding-left:22px}
.ed-measure li{margin:0 0 9px;line-height:1.65;font-family:var(--font)}
.ed-measure .table-wrap{margin:22px 0 6px;max-width:none}
.ed-callout{border-left:3px solid var(--brand);background:var(--bg-soft);border-radius:0 10px 10px 0;padding:16px 20px;margin:22px 0;font-size:1.04rem;line-height:1.55;color:var(--ink);font-family:var(--font)}
.ed-callout b{color:var(--brand)}
/* sticky rail: jump-nav + audit CTA, fills the air beside the narrow answer column */
.ed-answers-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.ed-answers-nav{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:20px}
.ed-answers-nav-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-family:var(--font)}
.ed-answers-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ed-answers-nav a{display:block;font-size:.87rem;line-height:1.4;color:var(--muted);border-left:2px solid var(--line);padding-left:12px;text-decoration:none;font-family:var(--font);transition:color .12s,border-color .12s}
.ed-answers-nav a:hover{color:var(--ink);border-left-color:var(--brand)}
.ed-answers-cta{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:22px}
.ed-answers-cta h4{margin:0 0 8px;font-size:1.05rem;font-weight:700;font-family:var(--ed-serif);color:var(--ink)}
.ed-answers-cta p{margin:0 0 16px;font-size:.86rem;line-height:1.5}
.ed-btn-block{display:flex;width:100%}
/* ---- pillar (hub) page: layout-specific override, real H2 structure instead of a wall of ---- */
.ed-pillar-head{max-width:var(--ed-max);margin:0 auto;padding:56px 24px 40px}
.ed-pillar-head h1{font-family:var(--ed-serif);font-size:clamp(2rem,4vw,2.9rem);font-weight:700;margin:14px 0 14px;max-width:20ch;color:var(--ink)}
.ed-pillar-head .ed-hero-sub{margin:0;max-width:62ch}
.ed-pillar-head-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.ed-pillar-head-art{position:relative}
.ed-pillar-hero{display:block;width:100%;height:auto;border-radius:4px}
.ed-pillar-intro-band{max-width:var(--ed-max);margin:0 auto;padding:40px 24px 66px}
.ed-pillar-intro p{font-family:var(--font);font-size:1.1rem;line-height:1.78;color:var(--ink);max-width:70ch;margin:0 0 1.15em}
.ed-byline{display:flex;align-items:center;gap:14px;margin:36px 0 0;padding-top:22px;border-top:1px solid var(--line);max-width:70ch}
.ed-byline-avatar{width:46px;height:46px;border-radius:12px;object-fit:cover;flex:none}
.ed-byline-fallback{display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;font-family:var(--ed-serif);font-weight:700;font-size:.9rem}
.ed-byline p{margin:0;font-size:.94rem;font-family:var(--font)}
.ed-byline a{color:var(--ink);text-decoration:none}
.ed-pillar-intro h2{font-family:var(--ed-serif);font-size:1.5rem;font-weight:700;margin:38px 0 14px;color:var(--ink);max-width:70ch}
.ed-pillar-intro h2:first-child{margin-top:0}
.ed-pillar-arts{max-width:var(--ed-max);margin:0 auto;padding:20px 24px 66px}
@media(max-width:960px){
.ed-answers-grid{grid-template-columns:1fr}
.ed-answers-side{position:static}
.ed-intro-grid{grid-template-columns:1fr}
.ed-intro-img{max-width:420px}
}