/* ============================================================
   SKLO — Blog / Article + Case study stylesheet (GEO layout)
   Loaded after style.css. Adds: breadcrumbs, article hero +
   quiz launcher, sticky table-of-contents, long-form type,
   2-col tables, callout block, FAQ accordion, multi-step quiz.
   ============================================================ */

/* ---- shared reading rhythm tokens ---- */
:root{
  --read:18px;            /* article body font-size */
  --read-lh:1.85;         /* generous line-height for readability */
  --read-ink:#2B2B2E;     /* softer than pure black */
  --read-soft:#56565c;
  --toc-w:262px;
  --stick:96px;           /* sticky offset under header (desktop) */
}

/* ============================================================
   ARTICLE HERO  (dark band: copy left, quiz launcher right)
   ============================================================ */
.article-hero{background:#fff;color:var(--ink);padding:clamp(34px,4.5vw,60px) 0 clamp(34px,4.5vw,56px);border-bottom:1px solid var(--line)}
.article-hero .container{position:relative;max-width:var(--maxw)}
.ah-grid{display:block;max-width:880px;margin:0;text-align:left}
.ah-copy{max-width:none}
.ah-copy .eyebrow{display:inline-block;font-weight:700;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.ah-copy h1{font-weight:600;text-transform:none;font-size:clamp(32px,4.4vw,52px);line-height:1.08;letter-spacing:-0.02em;max-width:20ch;color:var(--ink)}
.ah-copy h1 .y{color:var(--yellow)}
.ah-sub{margin:20px 0 0;font-size:clamp(16px,1.4vw,19px);line-height:1.62;color:var(--read-soft,#56565c);max-width:62ch;font-weight:400}
.ah-meta{display:none}

/* ---- breadcrumbs ---- */
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;font-weight:500;color:rgba(255,255,255,0.62)}
.breadcrumbs a{color:rgba(255,255,255,0.72);transition:color .2s var(--ease)}
.breadcrumbs a:hover{color:var(--yellow)}
.breadcrumbs .sep{color:rgba(255,255,255,0.32)}
.breadcrumbs [aria-current]{color:#fff;font-weight:600}
/* light variant (used on case pages over light bg) */
.breadcrumbs.dark-on-light{color:var(--muted)}
.breadcrumbs.dark-on-light a{color:#555}
.breadcrumbs.dark-on-light a:hover{color:var(--black)}
.breadcrumbs.dark-on-light .sep{color:#bbb}
.breadcrumbs.dark-on-light [aria-current]{color:var(--black)}

/* ============================================================
   QUIZ LAUNCHER CARD  (right of hero)
   ============================================================ */
.quiz-launch{background:#fff;color:var(--ink);border-radius:18px;padding:30px 28px;box-shadow:0 40px 90px -40px rgba(0,0,0,0.6)}
.quiz-launch .ql-badge{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#8a6d00;background:rgba(253,223,8,0.22);padding:6px 12px;border-radius:999px;margin-bottom:16px}
.quiz-launch h2{font-weight:600;text-transform:none;font-size:22px;line-height:1.22;letter-spacing:-0.014em}
.quiz-launch p{margin-top:10px;font-size:14.5px;line-height:1.55;color:#56565c}
.ql-options{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ql-opt{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font-weight:600;font-size:13.5px;color:var(--ink);text-align:left;transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease)}
.ql-opt:hover{border-color:var(--yellow);background:rgba(253,223,8,0.08);transform:translateY(-1px)}
.ql-opt .ic{width:30px;height:30px;flex:0 0 30px;border-radius:8px;background:#F1F1F5;display:flex;align-items:center;justify-content:center}
.ql-opt .ic svg{width:16px;height:16px;color:#1a1a1a}
.ql-start{margin-top:14px;width:100%;justify-content:center}
.ql-fine{margin-top:14px;font-size:12px;color:#8b8b90;display:flex;align-items:center;gap:8px;justify-content:center}
.ql-fine svg{width:14px;height:14px;color:#16a34a}

@media (max-width:920px){
  .ah-grid{grid-template-columns:1fr;gap:30px}
  .ah-copy h1{max-width:none}
  .quiz-launch{max-width:520px}
}

/* ============================================================
   ARTICLE BODY  +  STICKY TOC
   ============================================================ */
.article-section{background:var(--white);padding:clamp(40px,5vw,72px) 0 clamp(56px,7vw,100px)}
.article-grid{
  display:grid;grid-template-columns:minmax(0,1fr) var(--toc-w);
  gap:clamp(40px,5vw,72px);max-width:1120px;margin:0 auto;
  padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px);
}

/* ---- long-form typography (readable, lighter emphasis) ---- */
.prose{max-width:none;color:var(--read-ink);font-size:var(--read);line-height:var(--read-lh);font-weight:400}
.prose > p{margin:0 0 1.35em}
.prose > p:first-child{font-size:calc(var(--read) + 2px);color:#3a3a40;line-height:1.7}
.prose strong,.prose b{font-weight:600;color:#1c1c1f}      /* lighter emphasis than headings */
.prose a:not(.btn){color:#1c1c1f;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px;transition:color .2s var(--ease)}
.prose a:not(.btn):hover{color:#000;text-decoration-color:#000}
.prose h2{
  font-weight:600;font-size:clamp(26px,2.6vw,34px);line-height:1.2;letter-spacing:-0.016em;color:var(--black);
  margin:2.2em 0 0.7em;scroll-margin-top:var(--stick);
}
.prose h2:first-child{margin-top:0}
.prose h3{font-weight:700;font-size:clamp(19px,1.6vw,22px);line-height:1.3;color:#1c1c1f;margin:1.8em 0 0.5em;scroll-margin-top:var(--stick)}
.prose ul,.prose ol{margin:0 0 1.35em;padding-left:1.3em}
.prose li{margin:0 0 0.6em;padding-left:4px}
.prose li::marker{color:#FDDF08}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose figure{margin:2em 0}
.prose figure img{width:100%;border-radius:12px;display:block}
.prose figcaption{margin-top:10px;font-size:13px;color:var(--muted);text-align:center}

/* ---- callout / key-takeaway block (intercom-style) ---- */
.callout{
  position:relative;margin:2.2em 0;padding:26px 28px 26px 30px;
  background:#FBF7E6;border-radius:14px;border-left:4px solid var(--yellow);
}
.callout .k{display:block;font-weight:700;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#9a7c00;margin-bottom:10px}
.callout p{margin:0;font-size:calc(var(--read) + 1px);line-height:1.6;color:#2a2a2d;font-weight:500}
.callout p + p{margin-top:0.8em}
.callout a{color:#1c1c1f;text-decoration:underline;text-decoration-color:#caa800;text-decoration-thickness:2px;text-underline-offset:3px}

/* ---- 2-column table ---- */
.tbl-wrap{margin:2em 0;overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table.data{width:100%;border-collapse:collapse;font-size:15.5px;min-width:420px}
table.data caption{caption-side:top;text-align:left;font-weight:700;font-size:13px;letter-spacing:0.04em;color:var(--muted);padding:14px 18px 0;text-transform:uppercase}
table.data th,table.data td{text-align:left;padding:14px 18px;vertical-align:top;line-height:1.5}
table.data thead th{background:#0A0A0A;color:#fff;font-weight:700;font-size:12px;letter-spacing:0.06em;text-transform:uppercase}
table.data thead th:first-child{border-top-left-radius:0}
table.data tbody tr{border-top:1px solid var(--line)}
table.data tbody tr:nth-child(even){background:#FAFAFC}
table.data td:first-child,table.data th:first-child{font-weight:600;color:#1c1c1f;width:42%}
table.data td:last-child{color:var(--read-soft)}

/* ============================================================
   TABLE OF CONTENTS  (sticky rail desktop / pinned top mobile)
   ============================================================ */
.toc{align-self:stretch}
.toc-inner{position:sticky;top:var(--stick);border:1px solid var(--line);border-radius:14px;padding:20px 18px;background:#fff}
.toc-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.toc-title{font-weight:700;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted)}
.toc-toggle{display:none;width:30px;height:30px;border-radius:8px;background:#F1F1F5;align-items:center;justify-content:center}
.toc-toggle svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.toc.is-open .toc-toggle svg{transform:rotate(180deg)}
.toc-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.toc-list a{
  display:block;padding:8px 12px;border-radius:8px;font-size:13.5px;line-height:1.4;font-weight:500;
  color:#5a5a60;border-left:2px solid transparent;transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)
}
.toc-list a:hover{color:var(--black);background:#FAFAFA}
.toc-list a.is-active{color:var(--black);background:#FBF7E6;border-left-color:var(--yellow);font-weight:600}
.toc-cta{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.toc-cta .btn{width:100%;justify-content:center;font-size:13px;padding:12px 16px}

@media (max-width:900px){
  .article-grid{grid-template-columns:1fr}
  .toc{order:-1;position:static;margin-bottom:8px}
  .toc-inner{position:static;box-shadow:0 10px 30px -18px rgba(0,0,0,0.25)}
  .toc-toggle{display:none}
  .toc-list{display:flex}
  .toc-cta{display:none}
}

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq-section{background:var(--bg);padding:clamp(48px,6vw,90px) 0}
.faq-head{max-width:760px;margin:0 auto 36px;text-align:center}
.faq-head h2{font-weight:600;font-size:clamp(26px,3vw,40px);line-height:1.14;letter-spacing:-0.018em}
.faq-head p{margin-top:14px;font-size:16px;color:var(--read-soft);line-height:1.6}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:box-shadow .25s var(--ease)}
.faq-item[open]{box-shadow:0 20px 44px -28px rgba(10,10,10,0.22)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;font-weight:600;font-size:17px;line-height:1.4;color:#1c1c1f}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .ic{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#F1F1F5;display:flex;align-items:center;justify-content:center;transition:background .2s var(--ease)}
.faq-item summary .ic svg{width:13px;height:13px;transition:transform .25s var(--ease)}
.faq-item[open] summary .ic{background:var(--yellow)}
.faq-item[open] summary .ic svg{transform:rotate(45deg)}
.faq-answer{padding:0 22px 22px;font-size:16px;line-height:1.75;color:var(--read-soft)}
.faq-answer p{margin:0 0 0.9em}
.faq-answer p:last-child{margin-bottom:0}

/* ============================================================
   MULTI-STEP QUIZ  (full overlay, fixando-style)
   ============================================================ */
.quiz-overlay{position:fixed;inset:0;z-index:120;background:rgba(10,10,10,0.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s;display:flex;align-items:center;justify-content:center;padding:24px}
.quiz-overlay.is-open{opacity:1;visibility:visible;transition:opacity .3s var(--ease)}
.quiz-modal{position:relative;background:#fff;width:min(700px,100%);height:min(560px,calc(100vh - 56px));max-height:calc(100vh - 56px);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transform:translateY(18px) scale(.98);transition:transform .35s var(--ease);box-shadow:0 60px 120px -30px rgba(0,0,0,0.55)}
@supports (height:100dvh){.quiz-modal{height:min(560px,calc(100dvh - 56px));max-height:calc(100dvh - 56px)}}
.quiz-overlay.is-open .quiz-modal{transform:none}
.quiz-top{padding:22px 24px 0;display:flex;align-items:center;gap:12px}
.quiz-progress{position:absolute;top:0;left:0;right:0;height:5px;border-radius:0;background:#EDEDF1;overflow:hidden;z-index:3}
.quiz-progress .bar{height:100%;width:14%;background:var(--yellow);border-radius:0;transition:width .4s var(--ease)}
.quiz-step-count{margin-left:auto;font-weight:700;font-size:13px;letter-spacing:0.04em;color:#54545b;white-space:nowrap}
.quiz-close{width:34px;height:34px;border-radius:50%;background:#F1F1F5;display:flex;align-items:center;justify-content:center;font-size:17px;color:#333;transition:background .2s var(--ease)}
.quiz-close:hover{background:var(--yellow)}
.quiz-body{padding:26px 28px 14px;overflow-y:auto;flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@supports (justify-content:safe center){.quiz-body{justify-content:safe center}}
.quiz-step{display:none;animation:quizIn .35s var(--ease)}
.quiz-step.is-current{display:block;flex:0 0 auto}
@keyframes quizIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.quiz-q{font-weight:600;font-size:clamp(22px,2.6vw,29px);line-height:1.22;letter-spacing:-0.014em;color:var(--black)}
.quiz-hint{margin-top:10px;font-size:16px;color:#54545b;line-height:1.55}
/* optional-step badge (clear for a 40+ audience) */
.quiz-step[data-optional]::before{content:"Opcional";display:flex;align-items:center;width:max-content;margin-bottom:14px;padding:7px 14px;background:rgba(253,223,8,0.22);border:1.5px solid var(--yellow);color:var(--black);border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;line-height:1}
html[lang="en"] .quiz-step[data-optional]::before{content:"Optional"}
.quiz-options{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:13px}
.quiz-options.one-col{grid-template-columns:1fr}
.quiz-option{display:flex;align-items:center;gap:15px;min-height:80px;padding:18px 20px;border:1.6px solid var(--line);border-radius:14px;cursor:pointer;text-align:left;font-weight:600;font-size:16.5px;color:#1c1c1f;background:#fff;transition:border-color .16s var(--ease),background .16s var(--ease),transform .16s var(--ease)}
.quiz-option:hover{border-color:var(--yellow);background:rgba(253,223,8,0.08);transform:translateY(-1px)}
.quiz-option.is-selected{border-color:var(--black);background:#FBF7E6}
.quiz-option .qo-ic{flex:0 0 44px;width:44px;height:44px;border-radius:11px;background:#F1F1F5;display:flex;align-items:center;justify-content:center}
.quiz-option .qo-ic svg{width:22px;height:22px;color:#1a1a1a;shape-rendering:geometricPrecision;vector-effect:non-scaling-stroke}
.quiz-option .qo-check{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid #d8d8de;display:flex;align-items:center;justify-content:center;flex:0 0 22px}
.quiz-option.is-selected .qo-check{border-color:var(--black);background:var(--black)}
.quiz-option .qo-check svg{width:11px;height:11px;color:#fff;opacity:0;transition:opacity .15s var(--ease)}
.quiz-option.is-selected .qo-check svg{opacity:1}

/* upload + textarea + contact */
.quiz-drop{margin-top:18px;border:2px dashed #d4d4da;border-radius:16px;padding:22px 20px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:border-color .2s var(--ease),background .2s var(--ease)}
.quiz-drop:hover{border-color:var(--yellow);background:#FCFAEF}
.quiz-drop .ic{width:44px;height:44px;border-radius:12px;background:#F1F1F5;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.quiz-drop .ic svg{width:24px;height:24px;color:#1a1a1a}
.quiz-drop .dt{display:block;font-weight:600;font-size:16.5px;color:#1c1c1f}
.quiz-drop .ds{display:block;margin-top:6px;font-size:14px;color:var(--muted)}
.quiz-files{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.quiz-file{display:flex;align-items:center;gap:10px;font-size:13.5px;background:#F4F4F7;border-radius:10px;padding:10px 14px;color:#333}
.quiz-file .x{margin-left:auto;cursor:pointer;color:#999;font-size:15px}
.quiz-textarea{margin-top:20px;width:100%;min-height:150px;resize:vertical;padding:16px;border:1.6px solid var(--line);border-radius:14px;font-family:inherit;font-size:16px;line-height:1.6;color:var(--ink);background:#FBFBFD;transition:border-color .2s var(--ease),background .2s var(--ease)}
.quiz-textarea:focus{outline:none;border-color:var(--yellow);background:#fff}
.quiz-fields{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;max-width:none}
.quiz-fields .quiz-field:first-child{grid-column:1/-1}
.quiz-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.quiz-field.full{grid-column:1/-1}
.quiz-field label{font-size:13.5px;font-weight:600;letter-spacing:0.02em;color:#3a3a40}
.quiz-field label .req{color:#e0492a}
.quiz-field input{width:100%;padding:15px 15px;border:1.6px solid var(--line);background:#FBFBFD;border-radius:11px;font-family:inherit;font-size:16px;color:var(--ink);transition:border-color .2s var(--ease),background .2s var(--ease)}
.quiz-field input:focus{outline:none;border-color:var(--yellow);background:#fff}
.quiz-field input.invalid{border-color:#e0492a;background:#fdf3f1}

/* footer nav */
.quiz-foot{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:12px 28px 24px;border-top:0;flex:0 0 auto}
.quiz-back{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:#54545b;padding:14px 18px 14px 15px;border-radius:999px;background:#F1F1F5;flex:0 0 auto;transition:background .2s var(--ease),color .2s var(--ease)}
.quiz-back:hover{color:var(--black);background:#E6E6EC}
.quiz-back[hidden]{visibility:hidden}
.quiz-back svg{width:13px;height:13px}
.quiz-next.btn{padding:15px 26px;font-size:15.5px;min-width:200px;height:54px;justify-content:center;white-space:nowrap}
.quiz-next-wrap{display:flex;flex-direction:row;align-items:center;gap:10px;margin-left:auto;width:auto}
.quiz-skip{order:0;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;color:#6a6a72;padding:8px 6px;border:0;background:transparent;transition:color .18s var(--ease)}
.quiz-skip:hover{color:var(--black)}
.quiz-trust{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#8b8b90}
.quiz-trust svg{width:14px;height:14px;color:#16a34a}

/* success */
.quiz-done{display:none;text-align:center;padding:30px}
.quiz-done.is-current{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:center}
.quiz-done .seal{width:74px;height:74px;border-radius:50%;background:#eafaf0;display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.quiz-done .seal svg{width:34px;height:34px;color:#16a34a}
.quiz-done h3{font-weight:600;font-size:26px;letter-spacing:-0.014em}
.quiz-done p{margin-top:12px;font-size:16px;color:var(--read-soft);line-height:1.6;max-width:42ch;margin-left:auto;margin-right:auto}
.quiz-done .btn{margin-top:26px}

/* mobile: bottom sheet, full width */
@media (max-width:640px){
  .quiz-overlay{align-items:flex-end;padding:0}
  .quiz-modal{width:100%;height:min(560px,88vh);max-height:88vh;border-radius:22px 22px 0 0;transform:translateY(100%);transition:transform .44s cubic-bezier(.22,1,.36,1)}
  @supports (height:100dvh){.quiz-modal{height:min(560px,88dvh);max-height:88dvh}}
  .quiz-overlay.is-open .quiz-modal{transform:translateY(0)}
  .quiz-top{padding:16px 20px 0}
  .quiz-top::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:42px;height:4px;border-radius:99px;background:#dcdce2}
  .quiz-modal .quiz-top{position:relative;padding-top:22px}
  .quiz-body{padding:20px 20px 10px}
  .quiz-back span,.quiz-back .lbl{display:none}
  .quiz-foot{padding:8px 20px calc(16px + env(safe-area-inset-bottom));gap:8px}
  .quiz-next.btn{min-width:0;flex:1}
  .quiz-next-wrap{flex:1}
  .quiz-fields{grid-template-columns:1fr}
}

@media (max-width:560px){
  .quiz-options{grid-template-columns:1fr}
  .quiz-fields{grid-template-columns:1fr}
  .quiz-q{font-size:20px}
}

/* ============================================================
   BLOG INDEX  (hero + featured + card grid)
   ============================================================ */
.blog-hero{margin:16px clamp(16px,2.4vw,28px) 0;padding:clamp(34px,5vw,64px) 0 clamp(30px,4vw,48px)}
.blog-hero .container{max-width:var(--maxw)}
.blog-hero .eyebrow{display:inline-block;font-weight:700;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.blog-hero h1{font-weight:600;font-size:clamp(34px,5vw,60px);line-height:1.04;letter-spacing:-0.022em;max-width:18ch}
.blog-hero p{margin-top:18px;font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--read-soft);max-width:56ch}

.blog-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(60px,8vw,100px)}

/* featured row */
.blog-feature{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center;padding-bottom:clamp(40px,5vw,64px);margin-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
@media (max-width:860px){.blog-feature{grid-template-columns:1fr;gap:24px}}
.blog-feature .bf-img{border-radius:16px;overflow:hidden;aspect-ratio:16/11;background:#ececec}
.blog-feature .bf-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.blog-feature:hover .bf-img img{transform:scale(1.04)}
.blog-feature .bf-cat{display:inline-block;font-weight:700;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.blog-feature h2{font-weight:600;font-size:clamp(24px,2.8vw,38px);line-height:1.08;letter-spacing:-0.018em}
.blog-feature h2 a{color:inherit}
.blog-feature h2 a:hover{color:#000}
.blog-feature .bf-dek{margin-top:16px;font-size:16.5px;line-height:1.65;color:var(--read-soft);max-width:52ch}
.blog-feature .bf-meta{margin-top:20px;display:flex;gap:18px;font-size:13px;color:var(--muted);font-weight:500}
.blog-feature .bf-meta span{display:inline-flex;align-items:center;gap:7px}
.blog-feature .bf-meta .d{width:4px;height:4px;border-radius:50%;background:var(--yellow)}

/* category filter chips (reuse pf-chip look) */
.blog-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,3.4vw,40px)}

/* card grid */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,34px)}
@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.blog-grid{grid-template-columns:1fr}}
.bcard{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.bcard[hidden]{display:none}
.bcard .bc-img{border-radius:14px;overflow:hidden;aspect-ratio:3/2;background:#ececec;margin-bottom:18px}
.bcard .bc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.bcard:hover .bc-img img{transform:scale(1.05)}
.bcard .bc-cat{font-weight:700;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.bcard .bc-t{font-weight:600;font-size:19px;line-height:1.24;letter-spacing:-0.012em;color:var(--black)}
.bcard:hover .bc-t{color:#000}
.bcard .bc-dek{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--read-soft)}
.bcard .bc-meta{margin-top:14px;font-size:12.5px;color:var(--muted);font-weight:500;display:flex;gap:14px}
.bcard .bc-meta span{display:inline-flex;align-items:center;gap:6px}
.bcard .bc-meta .d{width:4px;height:4px;border-radius:50%;background:var(--yellow)}

/* ── Related module (articles / projects) ── */
.related-sec{border-top:1px solid var(--line)}
.related-sec .container{max-width:var(--maxw)}
.rel-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(22px,2.6vw,32px)}
.rel-head h2{font-weight:600;font-size:clamp(22px,2.6vw,30px);letter-spacing:-0.02em}
.rel-head a{font-weight:600;font-size:13.5px;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.rel-head a:hover{color:var(--black)}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
@media (max-width:900px){.rel-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.rel-grid{grid-template-columns:1fr}}

.bw-h2{font-weight:600;font-size:clamp(20px,2.3vw,26px);letter-spacing:-0.02em;margin:0 0 clamp(18px,2vw,26px)}
.blog-grid+.bw-h2,.blog-feature+.bw-h2{margin-top:clamp(30px,4vw,48px)}

/* scroll lock while the quiz is open */
body.modal-open{overflow:hidden}
body.quiz-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* send animation */
.quiz-modal.is-sending .quiz-body,.quiz-modal.is-sending .quiz-foot{opacity:.18;transition:opacity .28s var(--ease);pointer-events:none}
.quiz-plane{position:absolute;left:50%;top:58%;z-index:8;width:44px;height:44px;color:#141416;pointer-events:none;animation:qzFly .78s cubic-bezier(.42,0,.62,1) forwards}
.quiz-plane svg{width:100%;height:100%}
@keyframes qzFly{0%{transform:translate(-50%,10px) scale(.55) rotate(-10deg);opacity:0}22%{opacity:1;transform:translate(-50%,-6px) scale(1) rotate(0deg)}100%{transform:translate(150px,-280px) scale(.65) rotate(16deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.quiz-plane{animation-duration:.01s}}

.qz-phone-row{display:flex;gap:8px;align-items:stretch}
.qz-cc{flex:0 0 96px;width:96px;padding:15px 8px;border:1.6px solid var(--line);background:#FBFBFD;border-radius:11px;font-family:inherit;font-size:15px;color:var(--ink);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23555' stroke-width='1.6'><path d='M2.5 4.5 6 8l3.5-3.5'/></svg>");background-repeat:no-repeat;background-position:right 10px center;background-size:12px;cursor:pointer}
.qz-cc:focus{outline:none;border-color:var(--yellow);background-color:#fff}
.qz-phone-row input{flex:1 1 auto;min-width:0}

.quiz-modal.is-done .quiz-progress,.quiz-modal.is-done .quiz-step-count,.quiz-modal.is-done .quiz-back{display:none}
.quiz-modal.is-done .quiz-close{margin-left:auto}
.quiz-modal.is-done .quiz-body{display:none}
.quiz-modal.is-done .quiz-done.is-current{position:absolute;inset:0;z-index:1}
.quiz-modal.is-done .quiz-top{position:relative;z-index:4}
@media (max-width:640px){
  .quiz-modal{height:auto;max-height:92dvh;min-height:62dvh}
  .quiz-modal .quiz-body{padding-bottom:6px}
  .quiz-foot{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .quiz-overlay{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
}