/* ============================================================
   Gear for AI — Blog post design system  (gfa-blog.css)   v1.1
   Each component is styled by its OWN unique .gfa-* class, so it
   works even if the outer .gfa-article wrapper is missing.
   The .gfa-* names are unique to these posts, so other content
   (and older self-contained posts) are never affected.
   Wrapping the post in a Group with class "gfa-article" is now
   OPTIONAL — it only adds the heading/paragraph base styling.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,900&family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* tokens live on :root so every component can use them without a wrapper */
:root{
  --gfa-ink:#1d1a17; --gfa-ink-soft:#5d564c; --gfa-ink-faint:#8b8276;
  --gfa-line:#e8dfd0; --gfa-cream:#faf6ef;
  --gfa-coral:#e2552c; --gfa-coral-d:#c4441f; --gfa-coral-soft:#fce9e1;
  --gfa-teal:#0f5e56; --gfa-teal-soft:#e1efeb;
  --gfa-amber:#eaa033; --gfa-amber-soft:#fbeed4;
  --gfa-ink-900:#16130f;
  --gfa-r:18px; --gfa-r-sm:12px;
  --gfa-shadow:0 14px 38px -18px rgba(52,33,12,.30);
  --gfa-shadow-sm:0 6px 18px -10px rgba(52,33,12,.25);
}

/* reset the numbered-card counter reliably on the content container */
.entry-content,.gfa-article{counter-reset:gfanum;}

/* ---------- OPTIONAL base typography (only when .gfa-article wrapper present) ---------- */
.gfa-article{
  font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--gfa-ink); line-height:1.72; letter-spacing:-.003em; -webkit-font-smoothing:antialiased;
}
.gfa-article p{color:var(--gfa-ink);}
.gfa-article a{color:var(--gfa-coral-d); text-underline-offset:3px;}
.gfa-article h2,.gfa-h2{
  font-family:'Fraunces',Georgia,serif !important; font-weight:600;
  font-size:clamp(1.6rem,3.4vw,2.25rem); line-height:1.12; letter-spacing:-.02em;
  color:var(--gfa-ink-900); margin:2.4rem 0 .7rem;
}
.gfa-article h3,.gfa-h3{
  font-family:'Fraunces',Georgia,serif !important; font-weight:600;
  font-size:clamp(1.22rem,2.2vw,1.45rem); line-height:1.2; letter-spacing:-.015em;
  color:var(--gfa-ink-900); margin:1.6rem 0 .5rem;
}

/* eyebrow */
.gfa-eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.74rem !important; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gfa-coral-d); margin:0 0 .9rem;
}
.gfa-eyebrow::before{content:""; width:26px; height:2px; background:var(--gfa-coral); border-radius:2px;}

/* ---------- HERO ---------- */
.gfa-hero{
  position:relative; overflow:hidden; border-radius:calc(var(--gfa-r) + 6px);
  padding:clamp(1.6rem,4vw,2.8rem); margin:.3rem 0 2.2rem;
  border:1px solid var(--gfa-line); box-shadow:var(--gfa-shadow);
  background:
    radial-gradient(120% 140% at 0% 0%, #fff6ec 0%, rgba(255,246,236,0) 55%),
    radial-gradient(120% 130% at 100% 0%, #fde9df 0%, rgba(253,233,223,0) 50%),
    linear-gradient(180deg,#fffaf3 0%, #f7efe2 100%);
}
.gfa-hero-lead{
  font-size:clamp(1.12rem,2.2vw,1.32rem) !important; line-height:1.55;
  font-weight:500; margin:0 0 .5rem; max-width:50ch; color:var(--gfa-ink);
}
.gfa-hero-lead strong{color:var(--gfa-coral-d);}

/* chips + cloud (native List) */
.gfa-chips,.gfa-cloud{
  list-style:none !important; margin:1.2rem 0; padding:0; display:flex; flex-wrap:wrap; gap:.55rem;
}
.gfa-chips li,.gfa-cloud li{
  margin:0; background:#fff; border:1px solid var(--gfa-line); color:var(--gfa-ink);
  padding:.45rem .9rem; border-radius:999px; font-size:.9rem; font-weight:600; box-shadow:var(--gfa-shadow-sm);
}
.gfa-cloud li{box-shadow:none; transition:transform .15s ease, border-color .15s ease, color .15s ease;}
.gfa-cloud li:hover{transform:translateY(-2px); border-color:var(--gfa-coral); color:var(--gfa-coral-d);}
.gfa-chips li strong{color:var(--gfa-teal);}

/* meta strip (Columns) */
.gfa-meta{margin:1.6rem 0 .2rem; gap:1px !important; background:var(--gfa-line); border:1px solid var(--gfa-line); border-radius:var(--gfa-r); overflow:hidden;}
.gfa-meta .wp-block-column{background:#fffdf9; padding:1rem 1.1rem; flex-basis:0; flex-grow:1;}
.gfa-meta .gfa-n{font-family:'Fraunces',serif !important; font-weight:700; font-size:1.35rem; color:var(--gfa-coral-d); line-height:1; margin:0;}
.gfa-meta .gfa-l{font-size:.78rem !important; color:var(--gfa-ink-faint); margin:.35rem 0 0; font-weight:600;}

/* ---------- callouts ---------- */
.gfa-callout{
  background:var(--gfa-cream); border:1px solid var(--gfa-line); border-left:4px solid var(--gfa-coral);
  border-radius:var(--gfa-r-sm); padding:1.15rem 1.3rem; margin:1.6rem 0; box-shadow:var(--gfa-shadow-sm); color:var(--gfa-ink);
}
.gfa-callout.gfa-teal{border-left-color:var(--gfa-teal); background:var(--gfa-teal-soft);}
.gfa-callout.gfa-amber{border-left-color:var(--gfa-amber); background:var(--gfa-amber-soft);}
.gfa-callout > *:last-child{margin-bottom:0;}
.gfa-callout p{color:var(--gfa-ink);}
.gfa-k{display:block; font-size:.72rem !important; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--gfa-ink-faint); margin:0 0 .4rem;}

/* example quote */
.gfa-example{
  background:var(--gfa-teal-soft); border:1px solid #c9e3dd; border-radius:var(--gfa-r-sm);
  padding:1rem 1.2rem 1rem 2.3rem; margin:1.1rem 0; font-style:italic; color:#0c4a44; position:relative;
}
.gfa-example::before{content:"\201C"; font-family:'Fraunces',serif; font-size:2.4rem; line-height:0; color:var(--gfa-teal); position:absolute; top:1.3rem; left:.7rem; opacity:.35;}
.gfa-example p{margin:0; color:#0c4a44;}

/* ---------- numbered cards (auto-numbered) ---------- */
.gfa-num{
  counter-increment:gfanum; position:relative; padding:1.3rem 1.4rem 1.3rem 4.7rem;
  background:#fffdfa; border:1px solid var(--gfa-line); border-radius:var(--gfa-r); margin:1.1rem 0; box-shadow:var(--gfa-shadow-sm);
}
.gfa-num::before{
  content:counter(gfanum); position:absolute; left:1.2rem; top:1.3rem;
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  font-family:'Fraunces',serif; font-weight:700; font-size:1.4rem; color:#fff;
  background:linear-gradient(135deg,var(--gfa-coral),var(--gfa-coral-d)); box-shadow:0 8px 18px -8px rgba(196,68,31,.6);
}
.gfa-num h3{margin-top:.1rem; font-family:'Fraunces',Georgia,serif !important; color:var(--gfa-ink-900);}
.gfa-num > *:last-child{margin-bottom:0;}

/* ---------- timeline (native List) ---------- */
.gfa-timeline{list-style:none !important; position:relative; margin:1.6rem 0; padding:0 0 0 1.7rem;}
.gfa-timeline::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--gfa-coral),var(--gfa-amber),var(--gfa-teal)); border-radius:2px;}
.gfa-timeline li{position:relative; margin:0 0 1.05rem; padding-left:.4rem; color:var(--gfa-ink-soft);}
.gfa-timeline li::before{content:""; position:absolute; left:-1.7rem; top:.35rem; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--gfa-coral); box-shadow:0 0 0 4px #fff;}
.gfa-timeline li:last-child{margin-bottom:0;}
.gfa-timeline strong{color:var(--gfa-ink-900);}

/* ---------- bullets (native List) ---------- */
.gfa-bullets{list-style:none !important; margin:1.1rem 0; padding:0; display:grid; gap:.5rem;}
.gfa-bullets li{position:relative; padding-left:1.5rem; color:var(--gfa-ink-soft); margin:0;}
.gfa-bullets li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:2px; background:var(--gfa-coral); transform:rotate(45deg);}

/* ---------- compare (Columns) ---------- */
.gfa-compare{margin:1.6rem 0; gap:1rem !important;}
.gfa-compare .wp-block-column{border-radius:var(--gfa-r); padding:1.2rem 1.3rem; border:1px solid var(--gfa-line); margin:0;}
.gfa-cmp-pdf{background:#f7f4ef;}
.gfa-cmp-web{background:linear-gradient(160deg,#fff,var(--gfa-coral-soft)); border-color:#f3c9bb !important;}
.gfa-compare h4{margin:0 0 .6rem; font-family:'Fraunces',serif !important; font-size:1.1rem; color:var(--gfa-ink-900);}
.gfa-compare ul{margin:0; padding-left:1.1rem; color:var(--gfa-ink-soft); font-size:.95rem;}

/* ---------- pricing cards (Columns, isStackedOnMobile:false) ---------- */
.gfa-pricing{display:flex !important; flex-wrap:wrap; gap:1rem !important; margin:1.8rem 0;}
.gfa-pricing > .wp-block-column{flex:1 1 30%; min-width:215px;}
@media(max-width:640px){.gfa-pricing > .wp-block-column{flex-basis:100%;}}
.gfa-pcard{
  display:flex; flex-direction:column; background:#fffdfa; border:1px solid var(--gfa-line);
  border-radius:var(--gfa-r); padding:1.5rem 1.35rem 1.35rem; box-shadow:var(--gfa-shadow-sm); position:relative; margin:0;
}
.gfa-pcard.gfa-featured{border-color:var(--gfa-coral); box-shadow:0 18px 42px -18px rgba(226,85,44,.45); background:linear-gradient(180deg,#fff,#fff6f1);}
.gfa-pcard.gfa-featured::before{content:"Most popular"; position:absolute; top:-12px; left:1.3rem; background:linear-gradient(135deg,var(--gfa-coral),var(--gfa-coral-d)); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .65rem; border-radius:999px;}
.gfa-pcard h3{margin:0; font-size:1.25rem; font-family:'Fraunces',Georgia,serif !important; color:var(--gfa-ink-900);}
.gfa-price{font-family:'Fraunces',serif !important; font-weight:700; font-size:1.95rem; color:var(--gfa-coral-d); line-height:1; margin:.4rem 0 .15rem;}
.gfa-price-label{font-size:.68rem !important; font-weight:700; color:var(--gfa-ink-faint); letter-spacing:.08em; text-transform:uppercase; margin:0;}
.gfa-bestfor{font-size:.92rem !important; color:var(--gfa-ink-soft); margin:.5rem 0 .9rem;}
.gfa-inc{list-style:none !important; margin:0 0 1.2rem; padding:0; display:grid; gap:.4rem; font-size:.92rem;}
.gfa-inc li{position:relative; padding-left:1.4rem; color:var(--gfa-ink-soft); margin:0;}
.gfa-inc li::before{content:"\2713"; position:absolute; left:0; color:var(--gfa-teal); font-weight:800;}

/* ---------- table ---------- */
.gfa-table{margin:1.6rem 0; border-radius:var(--gfa-r); overflow:hidden; border:1px solid var(--gfa-line); box-shadow:var(--gfa-shadow-sm);}
.gfa-table table{width:100%; border-collapse:collapse; background:#fff; font-size:.96rem;}
.gfa-table th{text-align:left; background:var(--gfa-ink-900); color:#fdf6ec; font-weight:600; padding:.85rem 1.1rem; border:none;}
.gfa-table td{padding:.8rem 1.1rem; border-top:1px solid var(--gfa-line); color:var(--gfa-ink-soft);}
.gfa-table td:first-child{font-weight:700; color:var(--gfa-ink);}
.gfa-table tbody tr:nth-child(even) td{background:#fdfaf5;}

/* ---------- pull quote ---------- */
.gfa-pull{
  margin:2.4rem 0; padding:1.8rem 1.6rem; border-radius:var(--gfa-r); position:relative; overflow:hidden; color:#fdf6ec;
  background:radial-gradient(120% 120% at 100% 0%, #fde9df 0%, rgba(253,233,223,0) 55%), linear-gradient(180deg,#1d1a17,#16130f);
}
.gfa-pull .gfa-e{display:block; font-size:.74rem !important; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gfa-amber); margin:0 0 .9rem;}
.gfa-pull p{font-family:'Fraunces',serif !important; font-weight:500; font-size:clamp(1.2rem,2.6vw,1.55rem); line-height:1.4; margin:0; max-width:36ch; color:#fdf6ec;}

/* ---------- final CTA + buttons ---------- */
.gfa-cta{
  text-align:center; padding:clamp(1.6rem,4vw,2.6rem); margin:2.4rem 0 1rem; border-radius:calc(var(--gfa-r) + 6px);
  border:1px solid var(--gfa-line); box-shadow:var(--gfa-shadow);
  background:radial-gradient(120% 130% at 50% 0%, #fff6ec 0%, #f6eddf 100%);
}
.gfa-cta .gfa-eyebrow{justify-content:center;}
.gfa-cta h3{margin:.2rem 0 .5rem; font-family:'Fraunces',Georgia,serif !important; color:var(--gfa-ink-900);}
.gfa-cta p{max-width:42ch; margin-left:auto; margin-right:auto; color:var(--gfa-ink-soft);}
.gfa-cta .wp-block-buttons{justify-content:center;}
.gfa-cta .wp-block-button__link,
.gfa-pcard .wp-block-button__link{
  background:linear-gradient(135deg,var(--gfa-coral),var(--gfa-coral-d)) !important; color:#fff !important;
  font-weight:700; border-radius:999px !important; padding:.8rem 1.6rem; box-shadow:0 12px 26px -10px rgba(196,68,31,.6);
}
.gfa-pcard .wp-block-buttons{margin-top:auto; width:100%;}
.gfa-pcard .wp-block-button{width:100%;}
.gfa-pcard .wp-block-button__link{display:block; border-radius:10px !important; padding:.65rem 1rem; box-shadow:none; text-align:center;}

/* ---------- prompt copy boxes (Custom HTML) ---------- */
.gfa-prompt{border-radius:var(--gfa-r); overflow:hidden; margin:1.4rem 0 1.8rem; background:#171a17; border:1px solid #2c322c; box-shadow:0 22px 46px -22px rgba(15,20,15,.6);}
.gfa-prompt-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.1rem; background:#11140f; border-bottom:1px solid #2c322c;}
.gfa-prompt-title{display:flex; align-items:center; gap:.6rem; min-width:0; font-weight:700; font-size:.95rem; color:#f5efe6;}
.gfa-dots{display:inline-flex; gap:6px; flex:0 0 auto;}
.gfa-dots i{width:11px; height:11px; border-radius:50%; display:block;}
.gfa-dots i:nth-child(1){background:#e2552c;}
.gfa-dots i:nth-child(2){background:#eaa033;}
.gfa-dots i:nth-child(3){background:#3fae8f;}
.gfa-prompt-title .tt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gfa-copy{flex:0 0 auto; display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; background:var(--gfa-coral); color:#fff; border:none; border-radius:9px; padding:.5rem .85rem; font-family:'Figtree',sans-serif; font-size:.83rem; font-weight:700; transition:background .15s ease, transform .1s ease;}
.gfa-copy:hover{background:var(--gfa-coral-d);}
.gfa-copy:active{transform:scale(.96);}
.gfa-copy.is-copied{background:var(--gfa-teal);}
.gfa-copy svg{width:15px; height:15px;}
.gfa-prompt-text{margin:0; padding:1.15rem 1.25rem; white-space:pre-wrap; word-break:break-word; font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace; font-size:.86rem; line-height:1.7; color:#d7e0d3; background:#171a17; max-height:360px; overflow:auto;}
.gfa-prompt-text::-webkit-scrollbar{width:9px;}
.gfa-prompt-text::-webkit-scrollbar-thumb{background:#333a32; border-radius:9px;}

/* ---------- image placeholder ---------- */
.gfa-img-ph img{border-radius:var(--gfa-r);}

/* ---------- table of contents ---------- */
.gfa-toc{background:#fffdfa; border:1px solid var(--gfa-line); border-radius:var(--gfa-r); padding:1.2rem 1.4rem; margin:1.6rem 0; box-shadow:var(--gfa-shadow-sm);}
.gfa-toc ul{list-style:none !important; margin:0; padding:0; columns:2; column-gap:2rem;}
.gfa-toc li{margin:0 0 .5rem; padding-left:1.2rem; position:relative; break-inside:avoid; font-size:.95rem; color:var(--gfa-ink-soft);}
.gfa-toc li::before{content:"\2192"; position:absolute; left:0; color:var(--gfa-coral); font-weight:700;}
.gfa-toc a{color:var(--gfa-ink) !important; text-decoration:none;}
.gfa-toc a:hover{color:var(--gfa-coral-d) !important; text-decoration:underline;}
@media(max-width:560px){.gfa-toc ul{columns:1;}}

/* ---------- interactive checklist ---------- */
.gfa-checklist{list-style:none !important; margin:1.3rem 0; padding:0; display:grid; gap:.55rem;}
.gfa-checklist li{display:flex; align-items:center; gap:.85rem; cursor:pointer; user-select:none; background:#fffdfa; border:1px solid var(--gfa-line); border-radius:var(--gfa-r-sm); padding:.85rem 1rem; font-weight:600; color:var(--gfa-ink); transition:background .15s ease, border-color .15s ease, transform .1s ease;}
.gfa-checklist li:hover{border-color:var(--gfa-coral); transform:translateX(2px);}
.gfa-checklist li .box{flex:0 0 auto; width:24px; height:24px; border-radius:7px; border:2px solid var(--gfa-line); display:grid; place-items:center; background:#fff; transition:all .15s ease;}
.gfa-checklist li .box svg{width:14px; height:14px; opacity:0; transform:scale(.6); transition:all .15s ease;}
.gfa-checklist li.is-done{background:var(--gfa-teal-soft); border-color:var(--gfa-teal);}
.gfa-checklist li.is-done .box{background:var(--gfa-teal); border-color:var(--gfa-teal);}
.gfa-checklist li.is-done .box svg{opacity:1; transform:scale(1);}
.gfa-checklist li.is-done .t{color:var(--gfa-ink-faint); text-decoration:line-through;}

/* ---------- colour swatches ---------- */
.gfa-swatches{display:flex; flex-wrap:wrap; gap:.7rem; margin:1.3rem 0;}
.gfa-swatch{flex:1 1 96px; min-width:96px; border-radius:var(--gfa-r-sm); border:1px solid var(--gfa-line); overflow:hidden; box-shadow:var(--gfa-shadow-sm); background:#fff;}
.gfa-swatch .chip{height:66px;}
.gfa-swatch .meta{padding:.5rem .6rem;}
.gfa-swatch .nm{font-size:.76rem; font-weight:700; color:var(--gfa-ink); display:block; line-height:1.3;}
.gfa-swatch .hx{font-size:.7rem; color:var(--gfa-ink-faint); font-family:'JetBrains Mono',ui-monospace,monospace;}

@media(max-width:600px){
  .gfa-meta .wp-block-column{padding:.85rem 1rem;}
}