/* ===========================================================
   Hashtag AI — BLOG package body design system (styles.css)
   Self-contained: carries the shared tokens, type, buttons,
   glass and reveal utilities it reuses from the main site
   package, plus the blog-specific sections (hero, prose,
   key-takeaways, FAQ, CTA). Same brand language: Space Grotesk
   + Inter, cyan accent, dark base, liquid glass.
   Plain-text comments only so finfo mime-detects this as CSS.
   =========================================================== */

/* ---- tokens (duplicated from tokens.css; dup is fine) ---- */
:root{
  --bg:#04060a;--bg2:#070a11;--ink:#eef3f6;--cyan:#35E0FF;--teal:#34f0c9;--blue:#5b8cff;--violet:#262262;
  --m60:rgba(238,243,246,.6);--m38:rgba(238,243,246,.38);--m80:rgba(238,243,246,.82);
  --line:rgba(238,243,246,.1);--line2:rgba(238,243,246,.16);
  --maxw:1180px;--ease:cubic-bezier(.22,1,.36,1);--t:.4s var(--ease);
  --disp:'Space Grotesk',system-ui,sans-serif;
}

/* ---- base + utilities (body scope; theme owns page reset/chrome) ---- */
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:clamp(22px,6vw,56px)}
.disp{font-family:var(--disp)}
main{position:relative;z-index:2}

.eyebrow{font-family:var(--disp);font-size:13px;letter-spacing:.04em;color:var(--cyan);display:inline-flex;align-items:center;gap:12px;text-transform:none}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--cyan)}
.h2{font-family:var(--disp);font-weight:500;font-size:clamp(32px,5.4vw,76px);letter-spacing:-.035em;line-height:1.02;margin-top:18px;max-width:18ch}
.h2 em{font-style:italic;color:var(--cyan);font-weight:400}
.sub{font-size:clamp(16px,1.5vw,20px);color:var(--m60);max-width:52ch;line-height:1.65}

.btn{font-family:var(--disp);font-weight:600;display:inline-flex;align-items:center;gap:10px;background:var(--cyan);color:#02141a;padding:15px 26px;border-radius:50px;font-size:15px;cursor:pointer;border:none;transition:transform var(--t),box-shadow var(--t)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(53,224,255,.28)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2)}
.btn.ghost:hover{border-color:var(--cyan);box-shadow:none}

.glass{position:relative;overflow:hidden;border-radius:20px;
  background:linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,.035) 46%,rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(22px) saturate(185%) brightness(1.05);backdrop-filter:blur(22px) saturate(185%) brightness(1.05);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.05),0 28px 60px -22px rgba(0,0,0,.55)}

/* ===========================================================
   BLOG HERO — eyebrow, H1, meta line, answer-first lead
   =========================================================== */
.blog-hero{position:relative;z-index:2;padding:clamp(120px,18vh,176px) 0 clamp(28px,5vh,52px)}
.blog-hero .wrap{max-width:var(--maxw)}
.blog-title{font-family:var(--disp);font-weight:500;font-size:clamp(34px,5.2vw,66px);letter-spacing:-.03em;line-height:1.05;margin-top:18px;max-width:20ch;color:var(--ink)}
.blog-title em{font-style:italic;color:var(--cyan);font-weight:400}
.bmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:22px;font-family:var(--disp);font-size:13px;color:var(--m60)}
.bmeta .bdot{width:4px;height:4px;border-radius:50%;background:var(--m38)}
.blog-answer{font-size:clamp(17px,1.7vw,21px);color:var(--m80);line-height:1.6;max-width:62ch;margin-top:28px;padding-left:20px;border-left:2px solid var(--cyan)}

/* ===========================================================
   PROSE — article body blocks (H2 + rich text)
   =========================================================== */
.prose{position:relative;z-index:2;padding-block:clamp(16px,3vh,36px)}
.prose .wrap{max-width:var(--maxw)}
/* Full-width article rows: text beside an image, alternating sides down the page. */
.prose-row{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,4vw,68px);align-items:center;margin-top:clamp(48px,8vh,96px)}
.prose-row:first-child{margin-top:0}
.prose-row:nth-child(even) .prose-text{order:2}
.prose-row:nth-child(even) .prose-media{order:1}
.prose-text{min-width:0}
.prose-media{min-width:0}
.pm-frame{position:relative;display:block;border-radius:18px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 28px 60px -26px rgba(0,0,0,.6)}
.pm-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.35) brightness(.74) contrast(1.04)}
.pm-frame::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(53,224,255,.30),rgba(38,34,98,.42) 72%);mix-blend-mode:overlay}
.prose-text>h2{font-family:var(--disp);font-weight:500;font-size:clamp(25px,3vw,40px);letter-spacing:-.02em;line-height:1.1;color:var(--ink);max-width:18ch}
.prose-text>h2 em{font-style:italic;color:var(--cyan);font-weight:400}
.prose-body{margin-top:16px}
@media(max-width:860px){
  .prose-row{grid-template-columns:1fr;gap:22px;margin-top:clamp(40px,7vh,72px)}
  .prose-row:nth-child(even) .prose-text{order:1}
  .prose-row:nth-child(even) .prose-media{order:2}
}
.prose-body h3{font-family:var(--disp);font-weight:500;font-size:clamp(19px,2.1vw,23px);letter-spacing:-.01em;line-height:1.18;margin-top:30px;color:var(--ink)}
.prose-body p{color:var(--m80);font-size:clamp(16px,1.2vw,17.5px);line-height:1.72;margin-top:14px}
.prose-body p:first-child{margin-top:0}
.prose-body ul,.prose-body ol{margin-top:16px;padding-left:0;list-style:none;display:grid;gap:11px}
.prose-body ul li{position:relative;padding-left:24px;color:var(--m80);font-size:clamp(15px,1.2vw,16.5px);line-height:1.6}
.prose-body ul li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.prose-body ol{counter-reset:n}
.prose-body ol li{position:relative;padding-left:32px;counter-increment:n;color:var(--m80);font-size:clamp(15px,1.2vw,16.5px);line-height:1.6}
.prose-body ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:1px;font-family:var(--disp);font-size:13px;color:var(--cyan)}
.prose-body li b,.prose-body li strong,.prose-body p strong{color:var(--ink);font-weight:600}
.prose-body a{color:var(--cyan);border-bottom:1px solid var(--line2)}
.prose-body a:hover{border-color:var(--cyan)}
.prose-body blockquote{margin-top:22px;padding-left:20px;border-left:2px solid var(--cyan);font-family:var(--disp);font-weight:400;font-size:clamp(18px,2vw,24px);line-height:1.35;color:var(--ink)}

/* ===========================================================
   KEY TAKEAWAYS — quotable highlight card
   =========================================================== */
.ktake{position:relative;z-index:2;padding-block:clamp(18px,3vh,32px)}
.ktake .wrap{max-width:var(--maxw)}
.ktake-card{padding:clamp(26px,3vw,40px)}
.ktake-card h2{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--cyan);margin:0}
.ktake-list{margin-top:18px;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px}@media(max-width:680px){.ktake-list{grid-template-columns:1fr}}
.ktake-list li{position:relative;padding-left:32px;color:var(--m80);font-size:clamp(15px,1.2vw,17px);line-height:1.55}
.ktake-list li::before{content:'';position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;background:rgba(53,224,255,.12);border:1px solid var(--cyan)}
.ktake-list li::after{content:'';position:absolute;left:6px;top:7px;width:6px;height:3px;border-left:1.6px solid var(--cyan);border-bottom:1.6px solid var(--cyan);transform:rotate(-45deg)}
.ktake-list b,.ktake-list strong{color:var(--ink);font-weight:600}

/* ===========================================================
   FAQ — question + answer pairs (FAQPage schema parity)
   =========================================================== */
.faq{position:relative;z-index:2;padding-block:clamp(40px,7vh,90px)}
.faq .wrap{max-width:var(--maxw)}
.faq>.wrap>h2{font-family:var(--disp);font-weight:500;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.025em;line-height:1.05}
.faq-list{margin-top:30px}
.faq-item{border-top:1px solid var(--line);padding:24px 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{font-family:var(--disp);font-weight:600;font-size:clamp(17px,1.6vw,20px);color:var(--ink);line-height:1.32}
.faq-a{color:var(--m80);font-size:clamp(15px,1.2vw,16.5px);line-height:1.66;margin-top:11px;max-width:66ch}

/* ===========================================================
   CTA BAND — enquiry-led close (reused from the site)
   =========================================================== */
.cta-band{position:relative;z-index:2;text-align:center;padding:clamp(74px,13vh,140px) 0;border-top:1px solid var(--line)}
.cta-band .eyebrow{justify-content:center}
.cta-band .h2{margin:14px auto 0;max-width:20ch}
.cta-band .sub{margin:22px auto 0;text-align:center}
.cta-band .row{margin-top:38px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ===========================================================
   HORIZONTAL SCROLLER — glass cards that ride left as you scroll.
   Pinned in the live page (.hai-choreo, set by script.js); a clean
   native horizontal scroll in the editor and under reduced motion.
   =========================================================== */
.blog-scroller{position:relative;z-index:2}
.bs-pin{position:relative}
.bs-sticky{position:relative;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,30px);padding-block:clamp(34px,7vh,70px)}
.hai-choreo .bs-sticky{position:sticky;top:0;height:100svh;padding-block:0;overflow:hidden}
.bs-head .wrap{max-width:var(--maxw)}
.bs-head .h2{max-width:24ch}
.bs-vp{width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.bs-vp::-webkit-scrollbar{display:none}
.hai-choreo .bs-vp{overflow:hidden;scroll-snap-type:none}
.bs-track{display:flex;gap:clamp(16px,2vw,28px);padding-inline:clamp(22px,6vw,56px);will-change:transform}
.bs-card{flex:0 0 min(380px,82vw);scroll-snap-align:start;padding:clamp(26px,2.4vw,38px);display:flex;flex-direction:column;justify-content:flex-end;gap:11px;min-height:min(52vh,430px)}
.bs-kicker{font-family:var(--disp);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.bs-title{font-family:var(--disp);font-weight:500;font-size:clamp(20px,2.1vw,26px);letter-spacing:-.02em;line-height:1.14;color:var(--ink)}
.bs-body{color:var(--m80);font-size:clamp(14px,1.1vw,16px);line-height:1.6}
.bs-barwrap{max-width:var(--maxw);width:100%;margin:0 auto;padding-inline:clamp(22px,6vw,56px)}
.bs-bar{height:2px;width:0;background:var(--cyan);border-radius:2px;transition:width .08s linear}

/* ===========================================================
   FIGURE — image inside an on-brand cyan/violet duotone frame
   =========================================================== */
.blog-figure{position:relative;z-index:2;padding-block:clamp(14px,3vh,28px)}
.blog-figure .wrap{max-width:880px}
.bfig{margin:0}
.bfig-frame{position:relative;display:block;border-radius:18px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 28px 60px -26px rgba(0,0,0,.6)}
.bfig-img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;filter:grayscale(.35) brightness(.74) contrast(1.04)}
.bfig-frame::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(53,224,255,.30),rgba(38,34,98,.42) 72%);mix-blend-mode:overlay}
.bfig-cap{font-family:var(--disp);font-size:13px;color:var(--m38);margin-top:12px;padding-inline:4px}
.bfig-cap:empty{display:none}

/* ===========================================================
   REVEAL ON SCROLL (body JS adds .in; never hidden in editor)
   =========================================================== */
.rev{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rev.in{opacity:1;transform:none}
.rev.d1{transition-delay:.08s}
.rev.d2{transition-delay:.16s}
.rev.d3{transition-delay:.24s}
body.hmg-editor-preview .rev{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rev{opacity:1!important;transform:none!important}}