/* ============================================================
   AI for SME — page-scoped polish (loads after styles.css)
   Only linked from ai-for-business.html, so global-class
   overrides here are safe and do not touch other pages.

   Rebuilt 2026-06-18 to the Throxy quality bar:
   demos lead the page, contrast-band rhythm, scrolling
   customers, compact timeline, no committed prices, FAQ as
   on-brand <details> dropdowns, aligned + legible fit block.
   Keeps Tercero CI: cloud/charcoal/teal, Archivo + JBM mono,
   the three-legged mark, the interconnected-dots signal motif.
   ============================================================ */

/* ---- shared rhythm: comfortable measures, kill early-cut feel ---- */
.sec .sec-head .muted{max-width:62ch;}
.sec .sec-head h2{margin-top:1.05rem;}
.sec .sec-head .muted{margin-top:1.1rem;}

/* ============================================================
   HERO — eyebrow + headline + CTAs (sigrule + lead removed).
   Widen the headline so it runs across more of the content column
   and lines up with the demo cards below; balance the gap to CTAs.
   ============================================================ */
.phero h1{max-width:min(100%,30ch);margin:1.1rem 0 1.6rem;}
.sme-hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:0;}
/* ensure phero canvas sits behind the text wrap */
.phero > canvas[aria-hidden]{z-index:0;}
.phero .wrap{position:relative;z-index:1;}

/* ============================================================
   DEMOS — the hook, leads the page. Foot line under the cards.
   ============================================================ */
.sme-demos .demos .demo-card{display:flex;flex-direction:column;}
.sme-demos .demos .demo-card h3{margin:.15rem 0 .5rem;}
.sme-demos .demos .demo-card p{flex:1;max-width:40ch;}
.sme-demos .demos .demo-card .open{margin-top:1.1rem;}
.demos-foot{margin-top:clamp(1.4rem,3vw,2rem);font-family:var(--mono);font-size:.82rem;letter-spacing:.01em;
  line-height:1.6;color:var(--ink-soft);max-width:60ch;}

/* ============================================================
   WHY-US DARK BAND — short narrative, lead + 3 inline steps.
   On .band-accent (dark): white text, teal accents.
   ============================================================ */
.sme-why{padding:clamp(3.4rem,7vw,5.6rem) 0;}
.sme-why-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
.sme-why-lead h2{color:var(--snow);margin:1rem 0 1.1rem;max-width:16ch;}
.sme-why-lead .eyebrow{color:var(--teal);}
.sme-why-lead .eyebrow::before{background:var(--teal);}
.sme-why-lead .muted{color:var(--snow-soft);max-width:46ch;font-size:clamp(1rem,.96rem + .3vw,1.12rem);line-height:1.6;}

.sme-why-steps{list-style:none;display:flex;flex-direction:column;gap:.85rem;}
.sme-why-steps li{display:flex;gap:1rem;align-items:flex-start;
  background:rgba(255,255,255,.03);border:1px solid var(--rule-d);border-radius:3px;
  padding:1.05rem 1.2rem;transition:transform .3s var(--e-out),border-color .3s,background .3s;}
.sme-why-steps li:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--teal) 45%,transparent);background:rgba(0,184,148,.05);}
.sme-why-steps .sw-n{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--teal);
  border:1px solid var(--teal);width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:2px;}
.sme-why-steps b{font-family:var(--sans);font-weight:700;color:var(--snow);display:block;font-size:1.02rem;margin-bottom:.2rem;}
.sme-why-steps span{color:var(--snow-soft);font-size:.92rem;line-height:1.5;}
@media (max-width:820px){.sme-why-grid{grid-template-columns:1fr;gap:2rem;}.sme-why-lead h2{max-width:24ch;}}

/* ============================================================
   SCROLLING CUSTOMERS — uses shared .cust strip. Light section.
   The strip is intentionally full-bleed; the heading + note sit
   inside .wrap above/below it.
   ============================================================ */
.sme-cust-sec{padding-bottom:clamp(2.4rem,5vw,3.6rem);}
.sme-cust-sec .cust{margin-top:clamp(1.6rem,3.5vw,2.6rem);}
.sme-cust-sec .lead{color:var(--ink-soft);max-width:78ch;margin-top:1.2rem;}

/* cycling quote stage — LIGHT variant of the RE .qs (inverted for white) */
.sme-cust-sec .qs{margin-top:clamp(2.2rem,5vw,3.4rem);border-top:1px solid var(--rule-l);
  padding-top:clamp(1.8rem,4vw,2.6rem);text-align:center;}
.sme-cust-sec .qs-inner{max-width:68ch;margin:0 auto;transition:opacity .22s var(--e-out),transform .22s var(--e-out);}
.sme-cust-sec .qs.qs-fade .qs-inner{opacity:0;transform:translateY(6px);}
.sme-cust-sec .qs-mark{display:block;font-family:var(--exp);font-size:clamp(2.2rem,3.5vw,3rem);
  color:var(--teal-deep);line-height:1;margin-bottom:.4rem;opacity:.7;}
.sme-cust-sec .qs-text{font-size:clamp(1.05rem,1rem + .7vw,1.28rem);line-height:1.6;color:var(--ink);font-style:italic;}
.sme-cust-sec .qs-who{display:block;margin-top:1.1rem;font-family:var(--mono);font-size:.73rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.sme-cust-sec .qs-who strong{color:var(--teal-deep);font-style:normal;}
/* logos dim by default, lift + brighten on hover (mirrors RE) */
.sme-cust-sec .cust-item{opacity:.5;transition:opacity .35s var(--e-out),transform .35s var(--e-out);cursor:pointer;}
.sme-cust-sec .cust-item:hover,.sme-cust-sec .cust-item:focus-visible{opacity:1;transform:scale(1.08);}

/* ============================================================
   STRONG CLIENT QUOTE — shared .proofq, now on a DARK band (inverted).
   Pending-sign-off label kept honest + small.
   ============================================================ */
.sme-quote-sec{padding:clamp(3.4rem,7vw,5.4rem) 0;}
.sme-quote-sec .proofq{max-width:54ch;}
.sme-quote-sec .proofq .mk{color:color-mix(in srgb,var(--teal) 60%,transparent);}
.sme-quote-sec .proofq blockquote{font-family:var(--exp);font-weight:600;
  font-size:clamp(1.4rem,1rem + 1.6vw,2.1rem);line-height:1.3;letter-spacing:-.01em;color:var(--snow);margin:0;}
.sme-quote-sec .proofq .at{color:var(--snow-soft);}
.cq-pending{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:color-mix(in srgb,var(--snow-soft) 75%,transparent);}

/* ============================================================
   PRICING — 3-tier structure, no £ figures. Free tier highlighted.
   ============================================================ */
.sme-caps{margin-top:clamp(2rem,4vw,3rem);}
.sme-caps .cap{display:flex;flex-direction:column;min-height:100%;position:relative;}
.sme-caps .cap .h{font-family:var(--exp);font-weight:700;font-size:1.18rem;color:var(--ink);}
.sme-caps .cap .pf{margin:.3rem 0 .9rem;font-family:var(--mono);font-size:.82rem;color:var(--teal-deep);letter-spacing:.01em;}
.sme-caps .cap p{max-width:38ch;line-height:1.6;color:var(--ink-soft);font-size:.95rem;}
/* free tier = the hook: teal edge + tag */
.sme-cap-free{box-shadow:inset 3px 0 0 var(--teal);}
.sme-cap-free .cap-tag{display:inline-block;align-self:flex-start;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);
  border:1px solid color-mix(in srgb,var(--teal) 40%,transparent);background:rgba(0,184,148,.07);
  padding:.22em .6em;border-radius:2px;margin-bottom:.9rem;}
.caps-foot{margin-top:clamp(1.4rem,3vw,2rem);font-family:var(--mono);font-size:.82rem;line-height:1.6;color:var(--ink-soft);max-width:60ch;}

/* ============================================================
   FIT — #33/#34 rebuild: one aligned grid, matched rows,
   legible contrast (was unreadable + misaligned).
   ============================================================ */
.sme-fit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px);margin-top:clamp(2rem,4vw,3rem);align-items:stretch;}
.sme-fit-col{background:var(--cloud);border:1px solid var(--rule-l);border-radius:3px;
  padding:clamp(1.7rem,3vw,2.3rem);box-shadow:0 1px 2px rgba(14,26,36,.04);display:flex;flex-direction:column;}
.sme-fit-col.yes{border-top:3px solid var(--teal);}
.sme-fit-col.no{border-top:3px solid color-mix(in srgb,var(--ink-soft) 40%,transparent);}
.sff-head{display:flex;align-items:center;gap:.7rem;margin-bottom:1.3rem;padding-bottom:1.1rem;border-bottom:1px solid var(--rule-l);}
.sff-head h3{font-family:var(--exp);font-weight:700;font-size:1.18rem;color:var(--ink);letter-spacing:-.01em;}
.sff-mk{width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;
  font-family:var(--mono);font-weight:700;font-size:1rem;line-height:1;}
.sme-fit-col.yes .sff-mk{color:var(--teal-deep);border:1.5px solid color-mix(in srgb,var(--teal) 50%,transparent);background:rgba(0,184,148,.08);}
.sme-fit-col.no .sff-mk{color:var(--ink-soft);border:1.5px solid var(--rule-l);background:var(--paper);}
.sme-fit-col ul{list-style:none;display:flex;flex-direction:column;gap:1rem;}
.sme-fit-col li{position:relative;padding-left:1.4rem;font-size:1rem;line-height:1.5;color:var(--ink);max-width:42ch;}
.sme-fit-col li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;}
.sme-fit-col.yes li::before{background:var(--teal-deep);}
.sme-fit-col.no li{color:var(--ink-soft);}
.sme-fit-col.no li::before{background:color-mix(in srgb,var(--ink-soft) 55%,transparent);}
@media (max-width:680px){.sme-fit{grid-template-columns:1fr;}}

/* ============================================================
   FAQ — collapsible <details>/<summary>, on-brand (#29).
   ============================================================ */
.sme-faq{margin-top:clamp(2rem,4vw,2.6rem);border-top:1px solid var(--rule-l);}
.sme-qa{border-bottom:1px solid var(--rule-l);}
.sme-qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.4rem 0;font-family:var(--exp);font-weight:700;font-size:clamp(1.02rem,1rem + .25vw,1.12rem);
  color:var(--ink);letter-spacing:-.01em;transition:color .2s;}
.sme-qa summary::-webkit-details-marker{display:none;}
.sme-qa summary:hover{color:var(--teal-deep);}
.sme-qa summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}
/* plus / minus toggle drawn in CSS */
.qa-mk{position:relative;flex:none;width:22px;height:22px;border:1px solid color-mix(in srgb,var(--teal) 40%,transparent);
  border-radius:50%;transition:background .25s var(--e-out),border-color .25s,transform .3s var(--e-out);}
.qa-mk::before,.qa-mk::after{content:"";position:absolute;top:50%;left:50%;background:var(--teal-deep);transition:transform .3s var(--e-out),opacity .3s;}
.qa-mk::before{width:9px;height:1.5px;transform:translate(-50%,-50%);}
.qa-mk::after{width:1.5px;height:9px;transform:translate(-50%,-50%);}
.sme-qa[open] .qa-mk{background:var(--teal);border-color:var(--teal);transform:rotate(180deg);}
.sme-qa[open] .qa-mk::before,.sme-qa[open] .qa-mk::after{background:#fff;}
.sme-qa[open] .qa-mk::after{opacity:0;transform:translate(-50%,-50%) scaleY(0);}
.qa-body{overflow:hidden;}
.qa-body p{padding:0 0 1.4rem;max-width:68ch;color:var(--ink-soft);font-size:.96rem;line-height:1.65;}
/* gentle open animation (collapses instantly on reduced motion) */
.sme-qa[open] .qa-body{animation:qaReveal .35s var(--e-out);}
@keyframes qaReveal{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* ============================================================
   SECURITY TEASER — dark band; secgrid default dark styling is
   already legible. Keep the heading + note width comfortable.
   ============================================================ */
.sme-trust-sec .sec-head .muted{color:var(--snow-soft);}
.sme-trust-sec .sec-head h2{color:var(--snow);}
.sme-trust-sec .eyebrow{color:var(--teal);}
.sme-trust-sec .eyebrow::before{background:var(--teal);}

/* ============================================================
   CONTACT — keep the lead at a comfortable centred measure.
   ============================================================ */
.contact .lead{max-width:52ch;}
.contact h2[style]{margin-top:1.3rem !important;}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .sme-why-steps li,.qa-mk,.qa-mk::before,.qa-mk::after{transition:none !important;}
  .sme-qa[open] .qa-body{animation:none;}
}

/* ============================================================
   SCROLL SNAP — hero → demos section on desktop
   ============================================================ */
@media (min-width:821px) and (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y proximity;scroll-padding-top:72px;}
  .phero         {scroll-snap-align:start;}
  .sme-demos     {scroll-snap-align:start;}
  .sme-trust-sec {scroll-snap-align:start;}
  .contact       {scroll-snap-align:start;}
}

/* ============================================================
   SME DEMO CARDS — slide-up CodePen pattern, light-world palette.
   Same structure as RE wf-card but inverted: light bg, dark ink,
   darker accent colours visible against cloud ground.
   HTML structure (set in ai-for-business.html):
     .wf-card > .wf-body > [ .wf-head > (.wfic.wf-ic + .co-tag) , h3 , .co-more ]
   ============================================================ */

/* per-card accent tokens: bright for readability on dark photo overlay */
.sme-demos .wf-card.a-teal  {--ac:#3ff0cf;}
.sme-demos .wf-card.a-grass {--ac:#2fd9b4;}
.sme-demos .wf-card.a-violet{--ac:#7c7cff;}

/* per-card dark fallback behind background image */
.sme-demos .wf-card.a-teal  {background:#091a20;}
.sme-demos .wf-card.a-grass {background:#091a18;}
.sme-demos .wf-card.a-violet{background:#0d0d20;}
/* per-card background images (Higgsfield Nano Banana Pro) */
.sme-demos .wf-card.a-teal::before  {background-image:url(assets/images/cards/sme-daily-brief.svg);}
.sme-demos .wf-card.a-grass::before {background-image:url(assets/images/cards/sme-live-dashboards.svg);}
.sme-demos .wf-card.a-violet::before{background-image:url(assets/images/cards/sme-nl-query.svg);}

/* card shell */
.sme-demos .wf-card{
  height:clamp(330px,38vw,380px);min-height:0;overflow:hidden;padding:0;
  border:1px solid rgba(255,255,255,.10);border-radius:14px;color:#fff;
  transition:transform .5s var(--e-out),border-color .45s var(--e-out),box-shadow .5s var(--e-out);
}
.sme-demos .wf-card:hover,.sme-demos .wf-card:focus-visible{
  transform:translateY(-5px);outline:none;
  border-color:var(--ac);
  box-shadow:
    0 24px 56px -28px rgba(0,0,0,.5),
    0 0 0 1px color-mix(in srgb,var(--ac) 30%,transparent),
    0 0 42px -6px color-mix(in srgb,var(--ac) 36%,transparent);
}

/* image layer — visible at rest (reset the .callout::before scaleX(0) accent-bar transform) */
.sme-demos .wf-card::before{
  content:'';display:block;
  position:absolute;top:0;left:0;right:auto;
  width:100%;height:110%;
  background-size:cover;background-position:center;
  transform:none;transform-origin:center;
  transition:transform calc(700ms * 1.5) cubic-bezier(.19,1,.22,1);
  pointer-events:none;z-index:0;
}

/* dark overlay — same for all cards, fades in on hover */
.sme-demos .wf-card::after{
  content:'';display:block;
  position:absolute;inset:0;
  background:rgba(10,18,26,.90);
  opacity:0;
  transition:opacity 500ms ease;
  pointer-events:none;z-index:1;
}
@media(hover:hover){
  .sme-demos .wf-card:hover::before,.sme-demos .wf-card:focus-visible::before{transform:scale(1.05);}
  .sme-demos .wf-card:hover::after,.sme-demos .wf-card:focus-visible::after{opacity:1;}
}

/* content block — hidden below card at rest, slides up on hover */
.sme-demos .wf-card .wf-body{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(1.6rem,2.4vw,2rem) clamp(1.4rem,2vw,1.8rem);
  transform:translateY(100%);
  transition:transform .55s var(--e-out);
  will-change:transform;
}
.sme-demos .wf-card:hover .wf-body,.sme-demos .wf-card:focus-visible .wf-body{transform:translateY(0);}

/* head: icon + tag glued */
.sme-demos .wf-card .wf-head{display:flex;flex-direction:column;align-items:center;}

/* icon: dark accent, no box */
.sme-demos .wf-card .wfic.wf-ic{
  width:auto;height:auto;margin:0 0 .9rem;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;border-radius:0;color:var(--ac);
  filter:drop-shadow(0 4px 14px color-mix(in srgb,var(--ac) 20%,transparent));
  transform:translateY(0) scale(1);
  transition:transform .5s var(--e-out),filter .5s var(--e-out);
  will-change:transform;
}
.sme-demos .wf-card .wfic.wf-ic svg{width:clamp(64px,7vw,84px);height:clamp(64px,7vw,84px);overflow:visible;}
.sme-demos .wf-card:hover .wfic.wf-ic,.sme-demos .wf-card:focus-visible .wfic.wf-ic{
  transform:scale(1.05);
  filter:drop-shadow(0 10px 22px color-mix(in srgb,var(--ac) 36%,transparent));
}

/* tag */
.sme-demos .wf-card .co-tag{
  display:block;color:var(--ac);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.72rem;
  font-family:var(--mono);
}

/* title: white on photo overlay */
.sme-demos .wf-card h3{
  margin:1.1rem 0 0;font-size:clamp(1.12rem,1.4vw,1.24rem);color:#fff;
  opacity:0;transition:opacity .42s var(--e-out) .04s;
}
.sme-demos .wf-card:hover h3,.sme-demos .wf-card:focus-visible h3{opacity:1;}

/* description + CTA */
.sme-demos .wf-card .co-more{
  position:static;left:auto;right:auto;top:auto;z-index:auto;
  width:100%;background:none;border:0;border-radius:0;box-shadow:none;margin:0;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .42s var(--e-out) .08s,transform .42s var(--e-out) .08s;
}
.sme-demos .wf-card:hover .co-more,.sme-demos .wf-card:focus-visible .co-more{
  opacity:1;transform:translateY(0);pointer-events:auto;
}
.sme-demos .wf-card .co-in{min-height:0;}
.sme-demos .wf-card .co-in p{
  font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.78);
  margin:.9rem 0 0;max-width:34ch;margin-inline:auto;
}
.sme-demos .wf-card .co-go{
  display:inline-flex;align-items:center;gap:.4em;margin-top:1rem;
  font-weight:600;font-size:.9rem;color:var(--ac);
}
.sme-demos .wf-card .co-go .arw{transition:transform .35s var(--e-out);}
.sme-demos .wf-card:hover .co-go,.sme-demos .wf-card:focus-visible .co-go{
  text-decoration:underline;text-underline-offset:3px;
}
.sme-demos .wf-card:hover .co-go .arw,.sme-demos .wf-card:focus-visible .co-go .arw{
  transform:translateX(5px);
}

/* touch/no-hover: show full content */
@media (hover:none){
  .sme-demos .wf-card::after{opacity:.88;}
  .sme-demos .wf-card .wf-body{transform:translateY(0);}
  .sme-demos .wf-card h3{opacity:1;}
  .sme-demos .wf-card .co-more{opacity:1;transform:none;pointer-events:auto;}
}

/* responsive */
@media (max-width:900px){
  .sme-demos .wf-card{height:clamp(300px,62vw,340px);}
}
@media (max-width:560px){
  .sme-demos .wf-card{height:300px;}
  .sme-demos .wf-card .wfic.wf-ic svg{width:60px;height:60px;}
}

/* reduced motion for cards */
@media (prefers-reduced-motion:reduce){
  .sme-demos .wf-card,
  .sme-demos .wf-card .wf-body,.sme-demos .wf-card .wfic.wf-ic,
  .sme-demos .wf-card h3,.sme-demos .wf-card .co-more,
  .sme-demos .wf-card::before,.sme-demos .wf-card::after{transition:none;}
  .sme-demos .wf-card::after{opacity:.88;}
  .sme-demos .wf-card .wf-body{transform:translateY(0);}
  .sme-demos .wf-card h3{opacity:1;}
  .sme-demos .wf-card .co-more{opacity:1;transform:none;pointer-events:auto;}
  .sme-demos .wf-card:hover{transform:none;}
}