.elementor-4020 .elementor-element.elementor-element-f3ef34d{--display:flex;}/* Start custom CSS for html, class: .elementor-element-0affcae *//* ============================================================
   CREATIVE AKIB — BLOG STYLESHEET (ak-blog.css)
   Built for the Ryan CV WordPress theme.
   Paste ONCE into: Appearance > Customize > Additional CSS
   ------------------------------------------------------------
   DARK MODE HOOK (theme-synced):
     Ryan CV toggles a class on <body>:
       light  ->  body.body-style-gradient-n   (default here)
       dark   ->  body.body-style-dark         (overrides below)
     No OS prefers-color-scheme is used, so day/night always
     matches the theme toggle (no mismatch).
   - Everything scoped under .ak-post (no theme leakage)
   - One set of CSS variables drives every component
   - Full width, no left/right gap, works on every device
   - Brand: PURPLE (#7c4dff) + YELLOW (#ffca3a)
   ============================================================ */

/* ---------- 1. TOKENS (light / day defaults) ---------- */
.ak-post{
  --ak-accent:#7c4dff;                 /* purple */
  --ak-accent-tint:rgba(124,77,255,.10);/* soft purple bg */
  --ak-cta:#ffca3a;                    /* yellow (button + highlight) */
  --ak-text-on-cta:#1a1a2e;            /* dark text on yellow (both modes) */
  --ak-card:#ffffff;                   /* card surface */
  --ak-card-2:#f7f5ff;                 /* alt surface */
  --ak-card-ink:#1f2430;               /* text inside cards */
  --ak-border:rgba(20,20,40,.12);
  --ak-muted:#5b6472;                  /* secondary text */
  --ak-good:#0f9d58; --ak-good-bg:rgba(15,157,88,.08);
  --ak-bad:#d93025;  --ak-bad-bg:rgba(217,48,37,.07);
  --ak-code-bg:#0f1729;                /* prompt box (fixed dark) */
  --ak-code-ink:#e7ecf5;
  --ak-code-accent:#b79bff;
  --ak-radius:14px; --ak-radius-sm:10px;
  --ak-shadow:0 1px 2px rgba(20,20,40,.06),0 8px 24px rgba(20,20,40,.06);

  width:100%; max-width:100%; box-sizing:border-box;
  overflow-wrap:break-word; word-wrap:break-word;
  font-size:1.05rem; line-height:1.75;
}
.ak-post *{box-sizing:border-box;}
.ak-post img{max-width:100%;height:auto;}

/* ---------- 2. DARK / NIGHT (theme toggle) ---------- */
body.body-style-dark .ak-post{
  --ak-accent:#b79bff;
  --ak-accent-tint:rgba(183,155,255,.16);
  --ak-card:#161d2b;
  --ak-card-2:#1b2333;
  --ak-card-ink:#e7ecf5;
  --ak-border:rgba(255,255,255,.14);
  --ak-muted:#9aa4b2;
  --ak-good-bg:rgba(15,157,88,.16);
  --ak-bad-bg:rgba(217,48,37,.16);
  --ak-shadow:0 1px 2px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.4);
}

/* ---------- 3. TYPOGRAPHY (prose inherits theme text color) ---------- */
.ak-post h2{font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.25;margin:2.4em 0 .6em;letter-spacing:-.01em;}
.ak-post h2::after{content:"";display:block;width:64px;height:4px;margin-top:.4rem;border-radius:4px;background:linear-gradient(90deg,var(--ak-accent),var(--ak-cta));}
.ak-post h3{font-size:clamp(1.2rem,2.4vw,1.45rem);line-height:1.3;margin:1.8em 0 .5em;}
.ak-post h4{font-size:1.08rem;margin:1.4em 0 .4em;}
.ak-post p{margin:0 0 1.1em;}
.ak-post ul,.ak-post ol{margin:0 0 1.2em;padding-left:1.5em;}
.ak-post li{margin:.4em 0;}
.ak-post a{color:var(--ak-accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;}
.ak-post a:hover{text-decoration-thickness:2.5px;}
.ak-post strong{font-weight:700;}

/* ---------- 4. KICKER + LEAD ---------- */
.ak-kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--ak-accent);padding:.35em .75em;border-radius:999px;margin:0 0 1rem;}
.ak-lead{font-size:clamp(1.12rem,2.2vw,1.28rem);line-height:1.65;color:var(--ak-muted);font-weight:500;margin:0 0 1.6em;}

/* ---------- 5. HIGHLIGHTER (solid = readable in BOTH modes) ---------- */
.ak-post .ak-mark{background:var(--ak-cta);color:var(--ak-text-on-cta);padding:.04em .3em;border-radius:.28em;font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone;}

/* ---------- 6. TABLE OF CONTENTS ---------- */
.ak-toc{background:var(--ak-card-2);border:1px solid var(--ak-border);border-radius:var(--ak-radius);padding:1.1em 1.3em;margin:1.8em 0;color:var(--ak-card-ink);}
.ak-toc p{font-weight:700;margin:0 0 .5em;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:var(--ak-muted);}
.ak-toc ol{margin:0;padding-left:1.3em;}
.ak-toc a{text-decoration:none;}
.ak-toc a:hover{text-decoration:underline;}

/* ---------- 7. CALLOUTS ---------- */
.ak-callout{border:1px solid var(--ak-border);border-left:5px solid var(--ak-accent);background:var(--ak-accent-tint);color:var(--ak-card-ink);border-radius:var(--ak-radius-sm);padding:1em 1.2em;margin:1.6em 0;}
.ak-callout p:last-child{margin-bottom:0;}
.ak-callout.is-warn{border-left-color:var(--ak-cta);background:rgba(255,202,58,.14);}
.ak-callout.is-pro{border-left-color:var(--ak-accent);background:var(--ak-accent-tint);}
.ak-callout .ak-callout-title{font-weight:700;display:block;margin-bottom:.3em;}

/* ---------- 8. STAT CARDS ---------- */
.ak-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin:1.8em 0;}
.ak-stat{background:var(--ak-card);border:1px solid var(--ak-border);border-radius:var(--ak-radius);padding:1.1em;text-align:center;color:var(--ak-card-ink);box-shadow:var(--ak-shadow);}
.ak-stat b{display:block;font-size:1.9rem;line-height:1;background:linear-gradient(90deg,var(--ak-accent),var(--ak-cta));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.3em;}
.ak-stat span{font-size:.9rem;color:var(--ak-muted);}

/* ---------- 9. NUMBERED STEPS (flex = circles never overlap) ---------- */
.ak-post .ak-steps{list-style:none;counter-reset:ak;padding:0;margin:1.8em 0;}
.ak-post .ak-steps>li{counter-increment:ak;display:flex;gap:.85em;align-items:flex-start;padding:0;margin:0 0 1.1em;}
.ak-post .ak-steps>li::before{content:counter(ak);flex:0 0 2.1em;height:2.1em;display:grid;place-items:center;border-radius:50%;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--ak-accent),#7c4dff);}
body.body-style-dark .ak-post .ak-steps>li::before{background:linear-gradient(135deg,#7c4dff,#b79bff);color:#fff;}

/* ---------- 10. HEADLINE FORMULA BOX ---------- */
.ak-formula{background:var(--ak-card-2);border:1px dashed var(--ak-accent);border-radius:var(--ak-radius);padding:1.1em 1.2em;margin:1.4em 0;color:var(--ak-card-ink);}
.ak-formula .ak-slot{display:inline-block;background:var(--ak-accent-tint);color:var(--ak-accent);border:1px solid var(--ak-border);border-radius:8px;padding:.1em .55em;font-weight:700;margin:.15em .1em;white-space:nowrap;}
.ak-formula .ak-plus{color:var(--ak-muted);font-weight:700;margin:0 .2em;}

/* ---------- 11. SWIPE FILE (examples by role) ---------- */
.ak-swipe{margin:1.6em 0;display:grid;gap:.8rem;}
.ak-swipe-item{background:var(--ak-card);border:1px solid var(--ak-border);border-radius:var(--ak-radius-sm);padding:.9em 1.1em;color:var(--ak-card-ink);box-shadow:var(--ak-shadow);}
.ak-swipe-item .ak-role{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ak-accent);background:var(--ak-accent-tint);padding:.2em .6em;border-radius:999px;margin-bottom:.5em;}
.ak-swipe-item p{margin:.2em 0;}
.ak-swipe-item .ak-hl{font-weight:600;}

/* ---------- 12. GOOD / BAD EXAMPLES ---------- */
.ak-example{border-radius:var(--ak-radius-sm);padding:.9em 1.1em;margin:1em 0;border:1px solid var(--ak-border);color:var(--ak-card-ink);}
.ak-example.is-good{background:var(--ak-good-bg);border-left:5px solid var(--ak-good);}
.ak-example.is-bad{background:var(--ak-bad-bg);border-left:5px solid var(--ak-bad);}
.ak-example .ak-tag{font-weight:800;letter-spacing:.04em;font-size:.8rem;text-transform:uppercase;}
.ak-example.is-good .ak-tag{color:var(--ak-good);}
.ak-example.is-bad .ak-tag{color:var(--ak-bad);}

/* ---------- 13. CLAUDE PROMPT BOX (fixed dark, readable in both) ---------- */
.ak-prompt{background:var(--ak-code-bg);color:var(--ak-code-ink);border-radius:var(--ak-radius);padding:1.1em 1.2em;margin:1.4em 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92rem;line-height:1.6;overflow-x:auto;border:1px solid rgba(255,255,255,.08);white-space:pre-wrap;}
.ak-prompt .ak-prompt-h{display:block;color:var(--ak-code-accent);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;margin-bottom:.6em;}
.ak-prompt code{color:#ffca3a;}

/* ---------- 14. KEY TAKEAWAYS ---------- */
.ak-key{background:linear-gradient(135deg,var(--ak-accent-tint),rgba(255,202,58,.12));border:1px solid var(--ak-border);border-radius:var(--ak-radius);padding:1.2em 1.3em;margin:1.8em 0;color:var(--ak-card-ink);}
.ak-key .ak-callout-title{font-weight:800;font-size:1.1rem;display:block;margin-bottom:.5em;}
.ak-key ul{margin:0;padding-left:1.2em;}

/* ---------- 15. CHECKLIST ---------- */
.ak-post .ak-checklist{list-style:none;padding:0;margin:1.4em 0;}
.ak-post .ak-checklist li{position:relative;padding-left:2em;margin:.55em 0;}
.ak-post .ak-checklist li::before{content:"\2713";position:absolute;left:0;top:.05em;width:1.35em;height:1.35em;display:grid;place-items:center;border-radius:6px;background:var(--ak-accent);color:#fff;font-weight:900;font-size:.85em;}

/* ---------- 16. COMPARISON TABLE ---------- */
.ak-table-wrap{overflow-x:auto;margin:1.6em 0;-webkit-overflow-scrolling:touch;}
.ak-table-wrap table{width:100%;border-collapse:collapse;min-width:460px;color:var(--ak-card-ink);}
.ak-table-wrap th,.ak-table-wrap td{border:1px solid var(--ak-border);padding:.7em .9em;text-align:left;vertical-align:top;}
.ak-table-wrap thead th{background:var(--ak-accent);color:#fff;}
.ak-table-wrap tbody tr:nth-child(even){background:var(--ak-card-2);}

/* ---------- 17. BLOCKQUOTE ---------- */
.ak-post blockquote{margin:1.6em 0;padding:.4em 0 .4em 1.2em;border-left:4px solid var(--ak-cta);font-size:1.15rem;font-style:italic;color:var(--ak-muted);}

/* ---------- 18. FAQ (native details/summary, no JS) ---------- */
.ak-faq{margin:1.8em 0;display:grid;gap:.7rem;}
.ak-faq details{background:var(--ak-card);border:1px solid var(--ak-border);border-radius:var(--ak-radius-sm);color:var(--ak-card-ink);box-shadow:var(--ak-shadow);}
.ak-faq summary{cursor:pointer;font-weight:700;padding:.85em 1em;list-style:none;position:relative;padding-right:2.4em;}
.ak-faq summary::-webkit-details-marker{display:none;}
.ak-faq summary::after{content:"+";position:absolute;right:1em;top:50%;transform:translateY(-50%);font-size:1.4em;font-weight:400;color:var(--ak-accent);line-height:1;}
.ak-faq details[open] summary::after{content:"\2013";}
.ak-faq details>p{padding:0 1.1em 1em;margin:0;}

/* ---------- 19. TAGS / CHIPS ---------- */
.ak-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6em 0;}
.ak-tags span{font-size:.82rem;background:var(--ak-card-2);border:1px solid var(--ak-border);color:var(--ak-muted);padding:.3em .7em;border-radius:999px;}

/* ---------- 20. CTA + BUTTON ---------- */
.ak-cta{background:linear-gradient(135deg,var(--ak-accent),#7c4dff);color:#fff;border-radius:var(--ak-radius);padding:1.6em 1.5em;margin:2.2em 0;text-align:center;}
.ak-cta h3{margin:0 0 .4em;color:#fff;}
.ak-cta h3::after{display:none;}
.ak-cta p{color:rgba(255,255,255,.92);margin:0 0 1em;}
/* Button: high specificity so .ak-post a can't override it */
.ak-post a.ak-btn{display:inline-block;background:var(--ak-cta);color:var(--ak-text-on-cta);font-weight:800;text-decoration:none;padding:.75em 1.5em;border-radius:999px;}
.ak-post a.ak-btn:hover{color:#000;text-decoration:none;filter:brightness(1.04);}

/* ---------- 21. AUTHOR BOX ---------- */
.ak-author{display:flex;gap:1em;align-items:flex-start;background:var(--ak-card-2);border:1px solid var(--ak-border);border-radius:var(--ak-radius);padding:1.2em;margin:2em 0;color:var(--ak-card-ink);}
.ak-author p{margin:.2em 0;}
.ak-author .ak-author-name{font-weight:800;}

/* ---------- 22. DIVIDER ---------- */
.ak-hr{border:0;height:1px;background:var(--ak-border);margin:2.4em 0;}

/* ---------- 23. RESPONSIVE ---------- */
@media (max-width:640px){
  .ak-post{font-size:1rem;line-height:1.7;}
  .ak-cta{padding:1.3em 1.1em;}
  .ak-author{flex-direction:column;}
}/* End custom CSS */