/* EAP single post mock. Three columns like the RealDialer post: topic list, the post, page map. */
.navy-band{position:relative}
.progress{position:sticky;top:0;z-index:40;height:3px;background:var(--line)}
.progress i{display:block;height:100%;background:var(--primary);transform-origin:0 50%;transform:scaleX(.18)}
.docs{max-width:1320px;margin:0 auto;padding:var(--s6) var(--s6) 0;display:grid;grid-template-columns:250px minmax(0,1fr) 250px;gap:var(--s7);align-items:start}
.side{position:sticky;top:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}

/* left: the other posts in this topic */
.seq{padding:var(--s4)}
.seq-h{display:flex;align-items:center;gap:10px}
.seq-h b{display:block;font-size:var(--t-md);color:var(--fg)}
.seq-h small{display:block;font-size:var(--t-sm);color:var(--muted-fg)}
.seq ol{list-style:none;margin-top:var(--s3);display:flex;flex-direction:column;gap:2px}
.seq li a{display:flex;gap:10px;padding:8px;border-radius:8px;font-size:var(--t-base);line-height:1.4;color:var(--fg2);transition:background .15s}
.seq li a:hover{background:var(--hover)}
.seq li a .n{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--bg);font:700 10px/1 var(--mono);color:var(--muted-fg)}
.seq li a.on{background:var(--primary-soft);color:var(--primary-d);font-weight:600}
.seq li a.on .n{background:var(--primary);color:#fff}
.seq .all{display:inline-flex;margin:var(--s2) 8px 0;font-size:var(--t-sm)}

/* center: title area */
.crumbs{display:flex;align-items:center;gap:6px;font-size:var(--t-base);color:var(--muted-fg)}
.crumbs a:hover{color:var(--primary)}
.crumbs svg{color:var(--muted)}
.post-h h1{margin-top:var(--s4);font-size:var(--t-4xl);line-height:1.12;font-weight:800;letter-spacing:-.035em;color:var(--fg)}
.post-h .dek{margin-top:var(--s4);font-size:var(--t-xl);line-height:1.55;color:var(--muted-fg)}
.post-h .byline{margin-top:var(--s5);font-size:var(--t-md)}
.post-h .byline .eap-av{width:32px;height:32px;font-size:12px}
.post-fig{margin-top:var(--s6);border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);background:var(--navy);box-shadow:var(--shadow-2)}
.post-fig img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
.mtoc{display:none}

/* the short version box: answer first, the way AI answers like it */
.tldr{margin-top:var(--s6);padding:var(--s5);background:var(--th)}
.tldr h2{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-d)}
.tldr .checks{margin-top:var(--s3)}

/* body type */
.prose-post{margin-top:var(--s6);max-width:700px;font-size:17px;line-height:1.75;color:var(--fg2)}
.prose-post > * + *{margin-top:1.1em}
.prose-post h2{font-size:var(--t-2xl);line-height:1.3;letter-spacing:-.02em;color:var(--fg);margin-top:2em;scroll-margin-top:80px}
.prose-post h3{font-size:var(--t-xl);line-height:1.35;color:var(--fg);margin-top:1.6em}
.prose-post ul{padding-left:1.2em}
.prose-post li + li{margin-top:.5em}
.prose-post li::marker{color:var(--primary)}
.prose-post strong{color:var(--fg)}
.prose-post a{color:var(--primary-d);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--primary) 35%,transparent)}
.steps{list-style:none;padding:0!important;counter-reset:s;display:flex;flex-direction:column;gap:var(--s3)}
.steps li{counter-increment:s;display:grid;grid-template-columns:32px 1fr;gap:var(--s3);margin:0!important}
.steps li::before{content:counter(s);width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary-d);font:700 var(--t-md)/1 var(--mono)}
.callout{display:flex;gap:var(--s3);padding:var(--s4) var(--s5);border-radius:var(--r-lg);background:var(--primary-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 16%,transparent);color:var(--fg);font-weight:600;font-size:var(--t-lg);line-height:1.55}
.callout svg{color:var(--primary);margin-top:4px}

/* in-post offer */
.offer{display:grid;grid-template-columns:1.25fr 1fr;overflow:hidden;margin:2.2em 0!important}
.offer .o-t{padding:var(--s5)}
.offer .over{margin-bottom:var(--s3)}
.offer h3{margin:0!important;font-size:var(--t-xl);line-height:1.3;color:var(--fg)}
.offer p{font-size:var(--t-md);line-height:1.6;color:var(--muted-fg);margin-top:var(--s2)}
.offer .acts{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
.offer .c-ui{background:var(--navy);padding:var(--s4);display:flex;flex-direction:column;justify-content:center;gap:8px}
.offer .ui-row{font-size:var(--t-base);padding:10px 12px}

/* questions */
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{border:1px solid var(--border-soft);border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow-1);transition:background .15s}
.faq details[open]{background:var(--th)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--s3);padding:14px var(--s4);font-size:var(--t-lg);font-weight:600;color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{margin-left:auto;color:var(--muted);transition:transform .2s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{padding:0 var(--s4) var(--s4);font-size:var(--t-md);line-height:1.65;margin:0}
.sign{font-weight:600;color:var(--fg)}
.sign small{display:block;font-weight:500;color:var(--muted-fg);font-size:var(--t-md)}

/* after the post */
.after{max-width:700px;margin-top:var(--s7);display:flex;flex-direction:column;gap:var(--s4)}
.vote{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);flex-wrap:wrap}
.vote b{font-size:var(--t-md);color:var(--fg);margin-right:auto}
.author{display:grid;grid-template-columns:72px 1fr;gap:var(--s4);padding:var(--s5)}
.author .eap-av{width:72px;height:72px;font-size:24px;box-shadow:0 0 0 4px #fff,0 0 0 5px var(--line)}
.author .over{margin-bottom:var(--s2)}
.author h2{font-size:var(--t-xl);color:var(--fg)}
.author .a-title{margin-top:2px;font-size:var(--t-base);font-weight:600;color:var(--slate-ink);line-height:1.4}
.author .a-bio{font-size:var(--t-md);color:var(--muted-fg);margin-top:var(--s2);line-height:1.6}
.author .link{margin-top:var(--s3);font-size:var(--t-md)}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.prevnext a{padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:4px;transition:border-color .2s}
.prevnext a:hover{border-color:color-mix(in srgb,var(--primary) 28%,transparent)}
.prevnext small{display:flex;align-items:center;gap:4px;font-size:var(--t-sm);font-weight:600;color:var(--muted-fg)}
.prevnext b{font-size:var(--t-md);line-height:1.4;color:var(--fg)}
.prevnext .nx{text-align:right;align-items:flex-end}
.related{margin-top:var(--s8)}
.related .b-head{display:flex;align-items:flex-end;margin-bottom:var(--s4)}
.related .b-head h2{font-size:var(--t-2xl);font-weight:700;letter-spacing:-.02em;color:var(--fg)}
.related .b-head .r{margin-left:auto;font-size:var(--t-md)}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.rel{padding:10px 10px var(--s4);display:flex;flex-direction:column;gap:var(--s3);transition:border-color .2s}
.rel:hover{border-color:color-mix(in srgb,var(--primary) 28%,transparent)}
.rel .tags{padding:0 6px}
.rel h3{padding:0 6px;font-size:var(--t-lg);line-height:1.35;color:var(--fg)}
.rel .mono{padding:0 6px;font-size:var(--t-sm);color:var(--muted-fg)}

/* right: page map, share, small offer */
.toc{padding:var(--s4)}
.toc h2,.share h2{font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg);margin-bottom:var(--s2)}
.toc a{display:block;padding:7px 10px;border-radius:8px;font-size:var(--t-base);line-height:1.4;color:var(--muted-fg);transition:background .15s,color .15s}
.toc a:hover{color:var(--fg);background:var(--hover)}
.toc a.on{background:var(--primary-soft);color:var(--primary-d);font-weight:600}
.share{padding:var(--s4)}
.share div{display:flex;gap:6px}
.share .ib{width:36px;height:36px;border:1px solid var(--border);background:#fff}
.share .ib.done{background:var(--primary-soft);color:var(--primary-d);border-color:transparent}
.mini{padding:var(--s5);background:var(--navy);border-color:transparent;color:var(--navy-fg)}
.mini b{display:block;font-size:var(--t-lg);color:#fff;line-height:1.3}
.mini p{font-size:var(--t-base);margin:var(--s2) 0 var(--s4);line-height:1.55}

@media (max-width:1200px){
  .docs{grid-template-columns:minmax(0,1fr) 250px;max-width:1080px}
  .docs > .side.l{display:none}
}
@media (max-width:900px){
  .docs{grid-template-columns:1fr;padding:var(--s5) var(--s4) 0;gap:0}
  .docs > .side.r{display:none}
  .mtoc{display:block;margin-top:var(--s5)}
  .mtoc summary{list-style:none;display:flex;align-items:center;gap:var(--s2);padding:12px var(--s4);font-size:var(--t-md);font-weight:600;color:var(--fg);cursor:pointer}
  .mtoc summary::-webkit-details-marker{display:none}
  .mtoc summary span{margin-left:auto;font:600 var(--t-sm)/1 var(--mono);color:var(--muted-fg)}
  .mtoc nav{padding:0 var(--s2) var(--s2)}
  .mtoc a{display:block;padding:8px 10px;border-radius:8px;font-size:var(--t-md);color:var(--fg2)}
}
@media (max-width:720px){
  .post-h h1{font-size:30px;letter-spacing:-.03em}
  .post-h .byline{row-gap:6px}
  .post-h .byline i:nth-of-type(2){display:none}
  .post-h .byline::after{content:"";flex-basis:100%;height:0}
  .post-h .byline > span:not(.mono):not(.eap-av){order:1}
  .post-h .byline .chip{order:2;margin-left:0!important}
  .post-h .dek{font-size:var(--t-lg)}
  .post-fig{margin-top:var(--s5);border-radius:var(--r-lg)}
  .prose-post{font-size:16px}
  .prose-post h2{font-size:var(--t-xl)}
  .prose-post h3{font-size:var(--t-lg)}
  .callout{font-size:var(--t-md);padding:var(--s4)}
  .offer{grid-template-columns:1fr}
  .faq summary{font-size:var(--t-md)}
  .author{grid-template-columns:56px 1fr;padding:var(--s4)}
  .author .eap-av{width:56px;height:56px;font-size:19px}
  .prevnext{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:1fr}
  .related{margin-top:var(--s7)}
  .related .b-head{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .related .b-head .r{margin-left:0}
  .phone-share{display:flex!important}
}
.phone-share{display:none;align-items:center;gap:6px;margin-top:var(--s4)}
.phone-share .ib{width:36px;height:36px;border:1px solid var(--border);background:#fff}
.phone-share span{font-size:var(--t-sm);font-weight:600;color:var(--muted-fg);margin-right:4px}
.seq-phone{display:none}
@media (max-width:1200px){.seq-phone{display:block}}