/* ==========================================================================
   AKESTECH — DESIGN SYSTEM
   Editorial light-mode shell + AI motion layer
   Loaded AFTER Tailwind CDN. Custom classes are namespaced `ak-*` so they
   never collide with legacy Tailwind utilities still used by older pages.
   ========================================================================== */

:root{
  --bg:#f5f5f2;
  --ink:#101010;
  --muted:#666;
  --muted-2:#777;
  --line:#d9d9d4;
  --card:#fff;
  --dark:#111;
  --radius:24px;
  --radius-sm:20px;
  --max:1240px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --glow:0 30px 60px -30px rgba(16,16,16,.35);
}

/* Legacy Tailwind pages: `animate-on-scroll` came from app.css. Keep it. */
.animate-on-scroll{opacity:1;transform:none}

/* Utility used by the cookie popup when Tailwind is unavailable */
.hidden{display:none!important}

/* ==========================================================================
   1. LEGACY BRIDGE — repaint old Tailwind markup in the new palette.
   Purely visual: no markup, slugs or content change.
   ========================================================================== */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
body.bg-white,.bg-white{background-color:var(--card)!important}
.bg-gray-50,.bg-gray-100,.bg-slate-50{background-color:#efefec!important}
.bg-gray-950,.bg-gray-900,.bg-slate-900{background-color:var(--dark)!important}
.text-gray-900,.text-gray-950,.text-slate-900{color:var(--ink)!important}
.text-gray-800{color:#1d1d1d!important}
.text-gray-700,.text-gray-600,.text-slate-600{color:var(--muted)!important}
.text-gray-500,.text-slate-500{color:#7c7c78!important}
.text-gray-400,.text-slate-400{color:#8d8d88!important}
.border-gray-100,.border-gray-200,.border-slate-200,.border-gray-300{border-color:var(--line)!important}
.border-gray-700,.border-gray-800{border-color:rgba(255,255,255,.16)!important}
.hover\:border-gray-200:hover,.hover\:border-gray-300:hover{border-color:#b9b9b3!important}
.bg-primary-600,.bg-indigo-600,.bg-blue-600{background-color:var(--ink)!important}
.hover\:bg-primary-700:hover,.hover\:bg-gray-800:hover{background-color:#000!important}
.text-primary-600,.text-indigo-600{color:var(--ink)!important}
.bg-primary-50,.bg-indigo-50,.bg-blue-50{background-color:#ecece7!important}
.text-primary-400{color:#9a9a94!important}
.rounded-lg{border-radius:12px!important}
.rounded-xl{border-radius:16px!important}
.rounded-2xl{border-radius:20px!important}
.shadow-sm,.shadow-lg{box-shadow:0 14px 34px -26px rgba(16,16,16,.5)!important}
.prose,.prose-sm{color:var(--muted)}
.prose h1,.prose h2,.prose h3,.prose h4,.prose strong{color:var(--ink)}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:8px 0}
img{max-width:100%}

/* ==========================================================================
   2. LAYOUT PRIMITIVES
   ========================================================================== */
.ak-container{width:min(var(--max),calc(100% - 48px));margin:auto}
.ak-narrow{width:min(880px,calc(100% - 48px));margin:auto}
.ak-section{padding:105px 0;border-top:1px solid var(--line);position:relative}
.ak-section--flush{padding-top:0}
.ak-section--tight{padding:72px 0}
.ak-head{display:grid;grid-template-columns:.45fr 1fr;gap:40px;margin-bottom:55px}
.ak-kicker{font-size:13px;text-transform:uppercase;letter-spacing:2px;font-weight:800;color:var(--muted-2)}
.ak-h2{font-size:clamp(42px,6vw,76px);line-height:.94;letter-spacing:-4px;max-width:850px;font-weight:800}
.ak-h3{font-size:clamp(28px,3.4vw,42px);line-height:1.02;letter-spacing:-2px;font-weight:800}
.ak-lead{color:var(--muted);font-size:18px;max-width:620px;margin-top:22px;line-height:1.5}
.ak-body{color:#555;font-size:18px;max-width:600px;line-height:1.55}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.ak-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 20px;border-radius:999px;font-weight:750;font-size:14px;
  border:1px solid transparent;cursor:pointer;transition:.25s var(--ease);
  letter-spacing:-.2px;
}
.ak-btn:hover{transform:translateY(-2px)}
.ak-btn--dark{background:var(--dark);color:#fff}
.ak-btn--dark:hover{box-shadow:0 16px 30px -14px rgba(0,0,0,.7)}
.ak-btn--light{border:1px solid var(--ink)}
.ak-btn--light:hover{background:var(--ink);color:#fff}
.ak-btn--onDark{background:#fff;color:var(--ink)}
.ak-btn--onDark:hover{box-shadow:0 16px 30px -14px rgba(255,255,255,.5)}
.ak-btn--ghost{border:1px solid rgba(255,255,255,.25);color:#fff}
.ak-btn--ghost:hover{background:rgba(255,255,255,.1)}
.ak-btn--sm{padding:11px 16px;font-size:13px}
.ak-btn[disabled]{opacity:.6;cursor:default;transform:none;box-shadow:none}
.ak-btns{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}

/* ==========================================================================
   4. AI MOTION LAYER
   ========================================================================== */
.ak-ai{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ak-ai__grid{
  position:absolute;inset:-2px;
  background-image:linear-gradient(to right,rgba(16,16,16,.055) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(16,16,16,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 30%,transparent 100%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 30%,transparent 100%);
  animation:akGridDrift 26s linear infinite;
}
@keyframes akGridDrift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-64px,-64px,0)}}

.ak-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.ak-orb--a{width:520px;height:520px;top:-180px;left:-120px;background:radial-gradient(circle,rgba(16,16,16,.16),transparent 65%);animation:akFloat1 18s ease-in-out infinite}
.ak-orb--b{width:440px;height:440px;top:20%;right:-160px;background:radial-gradient(circle,rgba(16,16,16,.10),transparent 65%);animation:akFloat2 22s ease-in-out infinite}
.ak-orb--c{width:380px;height:380px;bottom:-180px;left:35%;background:radial-gradient(circle,rgba(16,16,16,.08),transparent 65%);animation:akFloat1 26s ease-in-out infinite reverse}
@keyframes akFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,32px) scale(1.09)}}
@keyframes akFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-46px,26px) scale(1.06)}}

/* scanning beam */
.ak-beam{position:absolute;left:0;right:0;height:1px;top:0;
  background:linear-gradient(90deg,transparent,rgba(16,16,16,.5),transparent);
  animation:akScan 9s cubic-bezier(.4,0,.2,1) infinite;opacity:.5}
@keyframes akScan{0%{transform:translateY(0);opacity:0}10%{opacity:.6}90%{opacity:.6}100%{transform:translateY(620px);opacity:0}}

/* scroll progress */
.ak-progress{position:fixed;top:0;left:0;height:2px;background:var(--ink);width:0;z-index:200;transition:width .1s linear}

/* reveal */
.ak-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.ak-reveal.is-in{opacity:1;transform:none}
.ak-d1{transition-delay:.07s}.ak-d2{transition-delay:.14s}.ak-d3{transition-delay:.21s}
.ak-d4{transition-delay:.28s}.ak-d5{transition-delay:.35s}.ak-d6{transition-delay:.42s}

/* word-by-word heading reveal */
.ak-words .ak-word{display:inline-block;overflow:hidden;vertical-align:top}
.ak-words .ak-word > i{display:inline-block;font-style:inherit;transform:translateY(110%);opacity:0;
  transition:transform .85s var(--ease),opacity .85s var(--ease)}
.ak-words.is-in .ak-word > i{transform:none;opacity:1}

/* shimmer gradient text */
.ak-shimmer{
  background:linear-gradient(100deg,#101010 0%,#101010 30%,#8f8f88 48%,#101010 66%,#101010 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:akShimmer 7s ease-in-out infinite}
@keyframes akShimmer{0%{background-position:0% 0}100%{background-position:300% 0}}

/* pulsing dot */
.ak-dot{width:7px;height:7px;border-radius:50%;background:var(--ink);display:inline-block;position:relative}
.ak-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ink);animation:akPing 2.2s ease-out infinite}
@keyframes akPing{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.2);opacity:0}}

/* status ticker chips */
.ak-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;
  padding:7px 12px;font-size:12px;color:#555;background:rgba(255,255,255,.6);backdrop-filter:blur(6px)}

/* marquee */
.ak-marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ak-marquee__track{display:flex;align-items:center;gap:96px;width:max-content;animation:akScroll 34s linear infinite}
.ak-marquee:hover .ak-marquee__track{animation-play-state:paused}
.ak-marquee__track img{height:84px;width:auto;object-fit:contain;opacity:.7;filter:grayscale(1);transition:.35s var(--ease)}
.ak-marquee__track img:hover{opacity:1;filter:none}
@keyframes akScroll{to{transform:translateX(-50%)}}

/* typing caret */
.ak-caret{display:inline-block;width:9px;height:1.05em;background:var(--ink);vertical-align:-.16em;margin-left:3px;animation:akBlink 1.05s steps(2,start) infinite}
@keyframes akBlink{50%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .ak-reveal{opacity:1;transform:none}
  .ak-words .ak-word > i{transform:none;opacity:1}
}

/* ==========================================================================
   5. NAVBAR
   ========================================================================== */
.ak-nav{height:82px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);position:relative;z-index:2}
.ak-logo{display:flex;align-items:center;gap:9px;font-size:22px;font-weight:850;letter-spacing:-1px}
.ak-logo img{height:52px;width:auto;object-fit:contain}
.ak-navlinks{display:flex;gap:28px;font-size:14px}
.ak-navlinks a{color:#333;position:relative;transition:color .2s}
.ak-navlinks a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--ink);transition:width .28s var(--ease)}
.ak-navlinks a:hover{color:var(--ink)}
.ak-navlinks a:hover::after{width:100%}
.ak-navcta{padding:12px 18px;border:1px solid var(--ink);border-radius:999px;font-size:14px;font-weight:700;transition:.22s var(--ease)}
.ak-navcta:hover{background:var(--ink);color:#fff}
.ak-burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:999px;align-items:center;justify-content:center;background:transparent}
.ak-burger i{display:block;width:16px;height:1.5px;background:var(--ink);position:relative;transition:.25s}
.ak-burger i::before,.ak-burger i::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);transition:.25s}
.ak-burger i::before{top:-5px}.ak-burger i::after{top:5px}
.ak-burger.is-open i{background:transparent}
.ak-burger.is-open i::before{top:0;transform:rotate(45deg)}
.ak-burger.is-open i::after{top:0;transform:rotate(-45deg)}
.ak-mnav{display:none;padding:6px 0 26px;border-bottom:1px solid var(--line)}
.ak-mnav.is-open{display:block;animation:akFadeDown .3s var(--ease)}
@keyframes akFadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.ak-mnav a{display:block;padding:14px 0;font-size:17px;font-weight:600;border-bottom:1px solid var(--line)}
.ak-mnav a:last-child{border-bottom:0}
.ak-mnav .ak-mnav__group{font-size:11px;text-transform:uppercase;letter-spacing:1.6px;color:#999;font-weight:800;margin:18px 0 4px}

/* ==========================================================================
   6. HERO / PAGE HERO
   ========================================================================== */
.ak-hero{min-height:660px;padding:90px 0 70px;position:relative}
.ak-hero__grid{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:end;position:relative;z-index:1}
.ak-hero__inner{position:relative;z-index:1;min-width:0}
.ak-eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:750;color:#555;margin-bottom:24px}
.ak-typeline{display:block;min-height:.9em;white-space:nowrap}
.ak-typeline .ak-caret{opacity:0}
.ak-typeline.is-typing .ak-caret,.ak-typeline.is-done .ak-caret{opacity:1}
.ak-h1{font-size:clamp(64px,9vw,132px);line-height:.87;letter-spacing:-7px;max-width:900px;font-weight:850}
.ak-hero__copy{max-width:430px;min-width:0;padding-bottom:7px;font-size:19px;color:#444}
.ak-hero__copy strong{color:var(--ink)}

.ak-pagehero{padding:74px 0 58px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.ak-pagehero__inner{position:relative;z-index:1}
.ak-pagehero h1{font-size:clamp(40px,6.4vw,88px);line-height:.96;letter-spacing:-4px;font-weight:850;max-width:1000px;margin-top:18px}
.ak-pagehero p{color:#555;font-size:19px;max-width:720px;margin-top:22px;line-height:1.55}
.ak-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:#888;margin-bottom:18px}
.ak-crumbs a:hover{color:var(--ink)}

/* ==========================================================================
   7. STATEMENT BANDS
   ========================================================================== */
.ak-statement{background:var(--dark);color:#fff;border-radius:var(--radius);padding:40px;
  display:flex;justify-content:space-between;gap:40px;align-items:end;position:relative;overflow:hidden}
.ak-statement::after{content:"";position:absolute;width:420px;height:420px;right:-140px;top:-180px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 65%);filter:blur(40px);animation:akFloat2 20s ease-in-out infinite}
.ak-statement p{font-size:clamp(28px,4vw,52px);line-height:1.02;letter-spacing:-2px;max-width:850px;font-weight:700;position:relative;z-index:1}
.ak-statement span{font-size:13px;color:#aaa;max-width:200px;line-height:1.5;position:relative;z-index:1}
.ak-statement .ak-kicker{color:#999}

/* ==========================================================================
   8. CARDS
   ========================================================================== */
.ak-grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.ak-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ak-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ak-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

.ak-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:28px;min-height:330px;display:flex;flex-direction:column;justify-content:space-between;
  transition:.3s var(--ease);position:relative;overflow:hidden}
a.ak-card:hover{transform:translateY(-5px);border-color:#999;box-shadow:var(--glow)}
.ak-card__num{font-size:12px;color:#888;letter-spacing:.04em;font-weight:600}
.ak-card h3{font-size:26px;letter-spacing:-1px;margin-bottom:12px;font-weight:750}
.ak-card p{color:#666;font-size:15px;line-height:1.55}
.ak-card--sm{min-height:230px;padding:24px}
.ak-card--flat{min-height:auto}
.ak-card .ak-arrow{font-size:18px;color:#999;margin-top:18px;display:inline-block;transition:transform .28s var(--ease)}
a.ak-card:hover .ak-arrow{transform:translate(4px,-4px);color:var(--ink)}

/* cursor spotlight on card grids — JS drives --mx/--my/--glow with lerping
   so the highlight glides between boxes instead of snapping */
.ak-spot{position:relative;overflow:hidden}
.ak-spot::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(16,16,16,.075),transparent 62%)}
.ak-spot:hover::before{opacity:1}
/* JS mode: opacity + lift + border are all driven by the smoothed --glow value */
.ak-spot--js::before,.ak-spot--js:hover::before{transition:none;opacity:var(--glow,0)}
.ak-card > *, .ak-product > *{position:relative;z-index:1}
.ak-spot--js::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(16,16,16,calc(var(--glow,0) * .55));opacity:1;transition:none}
a.ak-card.ak-spot--js:hover{transform:translateY(calc(var(--glow,0) * -6px))}
a.ak-card.ak-spot--js{border-color:rgba(16,16,16,calc(.12 + var(--glow,0) * .5))}
a.ak-card.ak-spot--js:hover{box-shadow:0 30px 60px -32px rgba(16,16,16,calc(var(--glow,0) * .85))}

/* tags */
.ak-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.ak-tag{border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:11px;color:#555;transition:.22s var(--ease)}
a.ak-tag:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.ak-tag--lg{font-size:16px;padding:14px 18px}

/* ==========================================================================
   9. SERVICE ROWS
   ========================================================================== */
.ak-rows{border-top:1px solid var(--line)}
.ak-row{display:grid;grid-template-columns:60px 1fr 30px;gap:20px;align-items:center;
  padding:22px 0;border:0;border-bottom:1px solid var(--line);font-size:18px;width:100%;
  text-align:left;background:none;color:var(--ink);transition:padding-left .28s var(--ease)}
a.ak-row:hover{padding-left:10px}
.ak-row small{color:#999;font-size:13px}
.ak-row b{font-size:20px;font-weight:650;letter-spacing:-.4px}
.ak-row > span{color:#999;font-size:15px;text-align:right}
.ak-row .ak-plus{display:inline-block;transition:transform .35s var(--ease)}
.ak-row.is-open .ak-plus{transform:rotate(45deg)}
.ak-row.is-open b{letter-spacing:-.6px}
.ak-rowbody{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
/* the answer is its own full row, using the question row's exact grid,
   padding and divider — it reads as a second row, not a callout box */
.ak-rowbody__in{
  display:grid;
  grid-template-columns:60px 1fr 30px;
  gap:20px;
  align-items:start;
  padding:24px 0 26px;
  border-bottom:1px solid var(--line);
}
.ak-rowbody__in p{
  grid-column:2;
  margin:0;
  background:none;border:0;border-radius:0;box-shadow:none;
  color:#3a3a38;
  font-size:17px;
  font-weight:400;
  line-height:1.75;
  max-width:840px;
}
/* vertical spacing lives inside the collapsing box so scrollHeight measures it */
.ak-rowbody::after{content:"";display:block;height:0}

/* ==========================================================================
   10. SPLIT SECTIONS / PRODUCTS / PROCESS / METRICS
   ========================================================================== */
.ak-split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.ak-split__copy p{color:#555;font-size:18px;max-width:560px;margin-top:24px;line-height:1.55}

.ak-product{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:34px;
  min-height:280px;display:flex;flex-direction:column;justify-content:space-between;transition:.3s var(--ease)}
.ak-product:hover{border-color:#999}
.ak-product__label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#777}
.ak-product h3{font-size:38px;letter-spacing:-2px;font-weight:800}
.ak-product p{color:#666;max-width:450px;margin-top:10px}

.ak-process{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.ak-step{padding:25px 22px 0 0;margin-right:22px;border-right:1px solid var(--line);transition:.3s var(--ease)}
.ak-step:last-child{border-right:0}
.ak-step:hover{transform:translateY(-4px)}
.ak-step span{font-size:12px;color:#888;letter-spacing:.04em;font-weight:700}
.ak-step h3{margin:25px 0 10px;font-size:24px;letter-spacing:-1px;font-weight:750}
.ak-step p{color:#666;font-size:14px;line-height:1.55}

.ak-metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ak-metric{padding:46px 30px;border-right:1px solid var(--line)}
.ak-metric:last-child{border-right:0}
.ak-metric b{display:block;font-size:clamp(58px,7.2vw,100px);letter-spacing:-5px;font-weight:850;line-height:1}
.ak-metric span{display:block;font-size:15px;color:#6f6f6a;margin-top:14px}

/* ==========================================================================
   11. LOGOS / PROOF
   ========================================================================== */
.ak-logos{display:flex;flex-wrap:wrap;gap:76px;align-items:center;padding:38px 0}
.ak-logos img{height:78px;width:auto;object-fit:contain;opacity:.68;filter:grayscale(1);transition:.35s var(--ease)}
.ak-logos img:hover{opacity:1;filter:none;transform:translateY(-2px)}

/* ==========================================================================
   12. CTA
   ========================================================================== */
.ak-cta{background:var(--dark);color:#fff;border-radius:var(--radius);padding:70px 45px;
  display:flex;justify-content:space-between;align-items:end;gap:40px;position:relative;overflow:hidden}
.ak-cta::after{content:"";position:absolute;width:520px;height:520px;right:-180px;bottom:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 65%);filter:blur(40px);animation:akFloat1 22s ease-in-out infinite}
.ak-cta h2{max-width:750px;color:#fff;position:relative;z-index:1}
.ak-cta p{color:#aaa;max-width:350px;margin-bottom:20px;font-size:15px;line-height:1.55;position:relative;z-index:1}
.ak-cta > div{position:relative;z-index:1}

/* ==========================================================================
   13. FORMS
   ========================================================================== */
.ak-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:30px}
.ak-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ak-field{margin-bottom:14px}
.ak-field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#777;margin-bottom:8px;font-weight:700}
.ak-field input,.ak-field select,.ak-field textarea{width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;font-size:15px;color:var(--ink);outline:none;transition:.2s}
.ak-field textarea{min-height:96px;resize:vertical}
.ak-field input:focus,.ak-field select:focus,.ak-field textarea:focus{border-color:var(--ink);background:#fff}
.ak-field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.ak-form__note{font-size:12px;color:#888;margin-top:14px;line-height:1.55}
.ak-form__note a{text-decoration:underline}
.ak-msg{display:none;margin-top:14px;padding:13px 16px;border-radius:12px;font-size:14px}
.ak-msg--ok{display:block;background:#eef7f1;border:1px solid #cfe6d8;color:#1a6b45}
.ak-msg--err{display:block;background:#fdf0ec;border:1px solid #f3d4c7;color:#a3461f}

/* ==========================================================================
   14. CONTENT BLOCKS (for long-form / legal / blog)
   ========================================================================== */
.ak-prose{max-width:820px;font-size:17px;line-height:1.75;color:#333}
.ak-prose h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-2px;line-height:1.06;font-weight:800;margin:52px 0 16px;color:var(--ink)}
.ak-prose h3{font-size:24px;letter-spacing:-1px;font-weight:750;margin:36px 0 12px;color:var(--ink)}
.ak-prose p{margin:14px 0}
.ak-prose ul,.ak-prose ol{margin:16px 0;padding-left:22px}
.ak-prose li{margin:8px 0}
.ak-prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ak-prose strong{color:var(--ink);font-weight:700}
.ak-answer{background:#fff;border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:16px;
  padding:24px 26px;margin:26px 0;font-size:17px;line-height:1.7;color:#333}
.ak-answer b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1.6px;color:#888;margin-bottom:10px}
.ak-list{display:grid;gap:12px;margin-top:22px}
.ak-list li{display:flex;gap:14px;align-items:flex-start;font-size:16px;color:#333;line-height:1.6}
.ak-list .ak-tick{width:22px;height:22px;border-radius:50%;background:#ecece7;color:var(--ink);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:2px}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.ak-foot{padding:35px 0;display:flex;justify-content:space-between;color:#777;font-size:13px;flex-wrap:wrap;gap:10px}
.ak-footcols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:46px 0 26px;border-top:1px solid var(--line)}
.ak-footlocs{padding:6px 0 46px;border-top:1px solid var(--line);margin-top:6px}
.ak-footlocs__label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#999;font-weight:800;margin:26px 0 16px}
.ak-footlocs .ak-tags{margin-top:0;gap:8px}
.ak-footlocs .ak-tag{padding:10px 15px;font-size:13px;background:rgba(255,255,255,.6)}
.ak-footcols h5{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#999;margin-bottom:14px;font-weight:800}
.ak-footcols a{display:block;font-size:14px;color:#555;padding:5px 0;transition:.2s}
.ak-footcols a:hover{color:var(--ink);transform:translateX(3px)}
.ak-social{display:flex;gap:10px;margin-top:18px}
.ak-social a{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;color:#666;transition:.25s var(--ease)}
.ak-social a:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px)}

/* floating whatsapp */
.ak-wa{position:fixed;right:22px;bottom:22px;z-index:90;width:54px;height:54px;border-radius:999px;
  background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.5);transition:.3s var(--ease)}
.ak-wa:hover{transform:translateY(-3px) scale(1.05)}

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .ak-grid5{grid-template-columns:repeat(3,1fr)}
  .ak-process{grid-template-columns:repeat(3,1fr)}
  .ak-step{margin-right:0;border-right:0;border-bottom:1px solid var(--line);padding-bottom:25px}
}
@media (max-width:900px){
  .ak-navlinks,.ak-navcta{display:none}
  .ak-burger{display:flex}
  .ak-hero__grid,.ak-split,.ak-head,.ak-form__row,.ak-grid4{grid-template-columns:1fr}
  .ak-hero{min-height:auto;padding:70px 0}
  .ak-h1{letter-spacing:-4px}
  .ak-statement,.ak-cta{flex-direction:column;align-items:flex-start}
  .ak-grid3,.ak-grid2,.ak-products{grid-template-columns:1fr}
  .ak-metrics{grid-template-columns:repeat(2,1fr)}
  .ak-metric:nth-child(2){border-right:0}
  .ak-metric:nth-child(1),.ak-metric:nth-child(2){border-bottom:1px solid var(--line)}
  .ak-footcols{grid-template-columns:repeat(2,1fr)}
  .ak-footlocs .ak-tag{padding:9px 13px;font-size:12.5px}
}
@media (max-width:600px){
  .ak-container,.ak-narrow{width:min(var(--max),calc(100% - 28px))}
  .ak-nav{height:70px}
  .ak-hero{padding:55px 0}
  .ak-h1{font-size:54px;letter-spacing:-3px}
  .ak-typeline{white-space:normal}
  .ak-section{padding:75px 0}
  .ak-grid5,.ak-grid3,.ak-process,.ak-metrics{grid-template-columns:1fr}
  .ak-metric{border-right:0;border-bottom:1px solid var(--line)}
  .ak-card{min-height:240px}
  .ak-statement,.ak-cta{padding:30px 24px}
  .ak-foot{flex-direction:column}
  .ak-rowbody__in{grid-template-columns:1fr;gap:0;padding:20px 0 22px}
  .ak-rowbody__in p{grid-column:1;font-size:16.5px}
  .ak-logos{gap:26px}
  .ak-logos img{height:48px}
  .ak-marquee__track img{height:52px}
  .ak-marquee__track{gap:56px}
  .ak-pagehero{padding:54px 0 42px}
}

@media (max-width:380px){
  .ak-h1{font-size:46px;letter-spacing:-2px}
}

/* ==========================================================================
   ICONS — sprite references replacing emoji site-wide
   ========================================================================== */
.ak-ic{display:inline-block;vertical-align:-.14em;flex:none;stroke-linecap:round;stroke-linejoin:round}
.ak-card .ak-ic,.ak-row .ak-ic{transition:transform .3s var(--ease)}
a:hover > .ak-ic.ak-ic--go, .ak-card:hover .ak-ic--go{transform:translate(2px,-2px)}
.ak-ic--lg{width:24px;height:24px}

/* ==========================================================================
   FIGURE, QUOTE, LIST VARIANTS, STEP NUMBER  (about / editorial pages)
   ========================================================================== */
.ak-figure{margin:0}
.ak-figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius);background:#e9e9e5;object-fit:cover;max-height:520px}
.ak-figure figcaption{margin-top:14px;font-size:14px;color:#777;max-width:660px;line-height:1.6}

.ak-quote{
  margin:0;padding:30px 32px;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--ink);border-radius:var(--radius-sm);
}
.ak-quote p{margin:0;font-size:19px;line-height:1.6;letter-spacing:-.2px;color:var(--ink)}
.ak-quote cite{display:block;margin-top:16px;font-size:13px;font-style:normal;color:#888;letter-spacing:.02em}

.ak-list--no li::before{content:"×";color:#c2c2bc}
.ak-list--no li{color:#8a8a84}

.ak-step__num{
  flex:none;width:96px;font-size:15px;font-weight:700;letter-spacing:-.2px;color:var(--ink);
  padding-top:2px;
}
@media (max-width:760px){
  .ak-step__num{width:auto;margin-bottom:8px}
  .ak-quote{padding:24px}
  .ak-quote p{font-size:17px}
}

/* ==========================================================================
   CONTACT PAGE — tabs, split layout, contact list
   ========================================================================== */
.ak-contact{display:grid;grid-template-columns:1.6fr 1fr;gap:34px;align-items:start}
.ak-contact__side{display:flex;flex-direction:column;gap:18px}

.ak-tabs{display:flex;gap:6px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.ak-tab{
  padding:12px 18px;font-size:14px;font-weight:650;color:#777;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:.25s var(--ease);
}
.ak-tab:hover{color:var(--ink)}
.ak-tab.is-on{color:var(--ink);border-bottom-color:var(--ink)}

.ak-contact__list{display:flex;flex-direction:column;gap:4px}
.ak-contact__list a,.ak-contact__list span{
  display:flex;align-items:center;gap:14px;padding:11px 0;
  font-size:15px;color:#333;border-bottom:1px solid rgba(0,0,0,.05);
}
.ak-contact__list a:last-child,.ak-contact__list span:last-child{border-bottom:0}
.ak-contact__list a:hover{color:var(--ink)}
.ak-contact__ic{
  flex:none;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--line);color:#666;
}
.ak-contact__faqs > div{padding:13px 0;border-bottom:1px solid rgba(0,0,0,.05)}
.ak-contact__faqs > div:last-child{border-bottom:0;padding-bottom:0}
.ak-contact__faqs p{font-size:14.5px;color:#666;line-height:1.6}
.ak-contact__q{color:var(--ink)!important;font-weight:650;margin-bottom:5px}

.ak-list--onDark li{color:#d7d7d3}
.ak-list--onDark li::before{color:#7dd3a8}

@media (max-width:900px){
  .ak-contact{grid-template-columns:1fr;gap:26px}
}

/* ==========================================================================
   PROSE EXTRAS — tables and steps inside legal / editorial pages
   ========================================================================== */
.ak-prose table{width:100%;border-collapse:collapse;margin:26px 0;font-size:16px}
.ak-prose th,.ak-prose td{border:1px solid var(--line);padding:13px 15px;text-align:left;vertical-align:top}
.ak-prose th{background:#efefec;font-weight:700;color:var(--ink);font-size:14px;letter-spacing:.01em}
.ak-prose tbody tr:nth-child(even){background:#fafaf8}
.ak-delstep{display:flex;gap:14px;align-items:flex-start;margin:16px 0}
.ak-delstep > span{
  flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
}
@media (max-width:600px){
  .ak-prose table{font-size:15px}
  .ak-prose th,.ak-prose td{padding:10px 11px}
}
.ak-prose ol.ak-steps{list-style:none;padding-left:0;counter-reset:akstep}
.ak-prose ol.ak-steps li{
  display:flex;gap:14px;align-items:flex-start;margin:16px 0;counter-increment:akstep;
}
.ak-prose ol.ak-steps li .ak-stepn{
  flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-top:2px;
}

/* ==========================================================================
   TILES — shared card for blog posts, case studies and listings
   ========================================================================== */
.ak-tile{
  display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.ak-tile__media{position:relative;aspect-ratio:16/9;background:#e9e9e5;overflow:hidden}
.ak-tile__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.ak-tile:hover .ak-tile__media img{transform:scale(1.045)}
.ak-tile__ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#c6c6c0}
.ak-tile__tag{
  position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);
  border-radius:999px;padding:5px 11px;font-size:11px;font-weight:700;color:#444;letter-spacing:.01em;
}
.ak-tile__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.ak-tile__cat{font-size:10.5px;text-transform:uppercase;letter-spacing:1.4px;color:#888;font-weight:800}
.ak-tile__body h3{
  font-size:19px;letter-spacing:-.4px;font-weight:750;color:var(--ink);
  line-height:1.25;margin:9px 0 9px;
}
.ak-tile__body p{font-size:14.5px;color:#666;line-height:1.6}
.ak-tile__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ak-tile__m{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 11px}
.ak-tile__m span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#888;font-weight:700}
.ak-tile__m b{font-size:14px;color:var(--ink)}
.ak-tile__date{font-size:12.5px;color:#999;margin-top:14px}
.ak-tile__go{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:18px;
  font-size:13px;font-weight:650;color:var(--ink);
}
.ak-tile:hover .ak-tile__go .ak-ic{transform:translate(2px,-2px)}
.ak-tile__go .ak-ic{transition:transform .3s var(--ease)}

/* ==========================================================================
   TAG ACTIVE STATE, EMPTY STATE, PAGER, NEWSLETTER
   ========================================================================== */
.ak-tag.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.ak-tag.is-on .ak-tag__n{opacity:.65}
.ak-tag__n{margin-left:6px;font-size:11px;opacity:.6}

.ak-empty{
  text-align:center;padding:70px 24px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--card);color:#666;
}
.ak-empty .ak-ic{color:#c6c6c0;margin-bottom:18px}
.ak-empty p{max-width:520px;margin:12px auto 0;font-size:16px;line-height:1.65}

.ak-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:52px}
.ak-pager a{
  display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);font-size:14px;font-weight:600;color:#333;
  transition:.25s var(--ease);
}
.ak-pager a:hover{border-color:var(--ink);color:var(--ink)}
.ak-pager__n{width:42px;justify-content:center;padding:10px 0!important}
.ak-pager__n.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

.ak-newsletter{
  display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:36px 34px;
}
.ak-newsletter p{margin-top:8px;color:#666;font-size:16px;max-width:520px}
.ak-newsletter__form{display:flex;gap:10px;flex-wrap:wrap}
.ak-newsletter__form input{
  min-width:250px;background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:13px 16px;font-size:15px;font-family:inherit;color:var(--ink);
}
.ak-newsletter__form input:focus{border-color:var(--ink);background:#fff;outline:none}
.ak-newsletter__form button{
  background:var(--ink);color:#fff;border:0;border-radius:12px;padding:13px 24px;
  font-size:15px;font-weight:650;font-family:inherit;cursor:pointer;transition:.25s var(--ease);
}
.ak-newsletter__form button:hover{opacity:.86}
@media (max-width:640px){
  .ak-newsletter{padding:26px 22px}
  .ak-newsletter__form{width:100%}
  .ak-newsletter__form input{min-width:0;flex:1}
}

/* ==========================================================================
   DARK PAGE HERO, FAQ GROUPS, RELATED BLOCKS
   ========================================================================== */
.ak-pagehero--dark{background:var(--dark);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.ak-pagehero--dark .ak-h1,.ak-pagehero--dark .ak-eyebrow{color:#fff}
.ak-pagehero--dark .ak-lead{color:#b9b9b4}
.ak-pagehero--dark .ak-crumbs,.ak-pagehero--dark .ak-crumbs a{color:#9a9a95}
.ak-pagehero--dark .ak-crumbs a:hover{color:#fff}

.ak-faqgroup{margin-bottom:62px}
.ak-faqgroup:last-of-type{margin-bottom:40px}
.ak-faqgroup__head{
  display:flex;gap:16px;align-items:flex-start;
  padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
.ak-faqgroup__head .ak-ic{color:var(--ink);margin-top:4px}
.ak-faqgroup__head p{font-size:14.5px;color:#777;margin-top:4px}

.ak-related{
  margin-top:56px;padding:34px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--card);
}
.ak-related > p{margin-top:10px;color:#666;font-size:16px;max-width:640px}

/* ==========================================================================
   MODAL (playbook download) — id/hooks owned by resources.php
   ========================================================================== */
.ak-modal{position:fixed;inset:0;z-index:210}
.ak-modal.hidden{display:none}
.ak-modal__backdrop{
  position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;
  background:rgba(16,16,16,.66);backdrop-filter:blur(3px);cursor:default;
}
.ak-modal__wrap{position:relative;min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px;pointer-events:none}
.ak-modal__card{
  pointer-events:auto;width:100%;max-width:540px;background:var(--card);
  border-radius:var(--radius);overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.55);
  max-height:calc(100vh - 40px);overflow-y:auto;
}
.ak-modal__head{position:relative;background:var(--dark);color:#fff;padding:30px 30px 26px}
.ak-modal__kicker{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.8px;color:#8f8f8a}
.ak-modal__head h2{font-size:26px;letter-spacing:-1px;font-weight:800;line-height:1.15;margin:10px 0 8px;color:#fff}
.ak-modal__head p{font-size:14.5px;color:#b9b9b4;line-height:1.6}
.ak-modal__close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.ak-modal__close:hover{background:rgba(255,255,255,.18)}
.ak-modal__body{padding:26px 30px 30px}
@media (max-width:600px){
  .ak-modal__head{padding:24px 22px 22px}
  .ak-modal__body{padding:22px}
  .ak-modal__head h2{font-size:22px}
}

/* ==========================================================================
   GUIDE LAYOUT — sticky contents + long-form body
   ========================================================================== */
.ak-guide{display:grid;grid-template-columns:250px 1fr;gap:46px;align-items:start}
.ak-guide__nav{position:sticky;top:24px}
.ak-guide__navtitle{
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.6px;
  color:#8d8d88;margin-bottom:14px;
}
.ak-guide__nav nav{display:flex;flex-direction:column;gap:2px}
.ak-guide__nav a{
  display:block;padding:9px 12px;border-radius:10px;font-size:14px;color:#666;
  transition:.22s var(--ease);
}
.ak-guide__nav a:hover{background:#ecece7;color:var(--ink)}
.ak-guide__body{min-width:0}

.ak-tablewrap{
  margin-top:26px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--card);overflow-x:auto;
}
.ak-tablewrap table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.ak-tablewrap th,.ak-tablewrap td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
.ak-tablewrap th{background:#efefec;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#666;font-weight:800}
.ak-tablewrap tbody tr:last-child td{border-bottom:0}
.ak-tablewrap td{color:#555;line-height:1.55}
.ak-tablewrap td strong{color:var(--ink)}

@media (max-width:1000px){
  .ak-guide{grid-template-columns:1fr;gap:28px}
  .ak-guide__nav{position:static;order:2}
  .ak-guide__body{order:1}
}

/* ==========================================================================
   TEMPLATE RESOURCE PAGE — category chips, template cards, variables
   ========================================================================== */
.ak-chipnav{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:1px solid var(--line)}
.ak-chipnav__row{display:flex;gap:8px;padding:12px 0;overflow-x:auto;scrollbar-width:none}
.ak-chipnav__row::-webkit-scrollbar{display:none}
.ak-chipnav__row a{
  flex:none;padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg);font-size:14px;font-weight:600;color:#555;transition:.22s var(--ease);
}
.ak-chipnav__row a:hover{background:var(--ink);border-color:var(--ink);color:#fff}

.ak-tplgroup{margin-bottom:56px;scroll-margin-top:90px}
.ak-tplgroup:last-child{margin-bottom:0}
.ak-tplgroup__head{margin-bottom:22px}
.ak-tplgroup__count{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;color:#8d8d88}
.ak-tplgroup__head > p{margin-top:8px;color:#666;font-size:16px;max-width:720px;line-height:1.6}

.ak-tplgrid{display:grid;gap:16px}
.ak-tpl{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:24px 26px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.ak-tpl__head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.ak-tpl__no{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;color:#8d8d88}
.ak-tpl__head h3{font-size:18px;font-weight:750;letter-spacing:-.3px;color:var(--ink);margin:6px 0 5px}
.ak-tpl__timing{font-size:13px;color:#888}
.ak-copybtn{
  display:inline-flex;align-items:center;gap:7px;flex:none;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:11px;
  padding:9px 14px;font-size:13.5px;font-weight:650;color:var(--ink);font-family:inherit;
  transition:.22s var(--ease);
}
.ak-copybtn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.ak-tpl__text{
  white-space:pre-line;border-radius:14px;background:#f2f2ee;border:1px solid var(--line);
  padding:18px 20px;font-size:15px;line-height:1.75;color:#2f2f2c;
}

.ak-vars{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.ak-vars > div{display:flex;align-items:center;gap:12px}
.ak-vars code{
  flex:none;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:5px 9px;font-size:13px;color:var(--ink);font-weight:700;
}
.ak-vars span{font-size:14px;color:#666}

@media (max-width:640px){
  .ak-tpl{padding:20px}
  .ak-tpl__head{flex-direction:column}
}

/* ==========================================================================
   SHARED HELPER CLASSES — used by remapped legacy tool / product pages
   ========================================================================== */
.ak-onDark{color:#fff !important}
.ak-center{text-align:center;margin-left:auto;margin-right:auto}
.ak-darksec{background:var(--dark);color:#fff;border-top:none}
.ak-darksec .ak-h1,.ak-darksec .ak-h2,.ak-darksec .ak-h3,.ak-darksec h4{color:#fff}
.ak-darksec .ak-lead{color:#b9b9b4}
.ak-darksec a:not(.ak-btn){color:#d7d7d2}
.ak-pagehero--dark .ak-h3,.ak-pagehero--dark h4{color:#fff}

/* details-based FAQ (legacy tool pages) */
.ak-details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.ak-details + .ak-details{margin-top:12px}
.ak-details__q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 24px;font-size:17px;font-weight:650;cursor:pointer;color:var(--ink);
  list-style:none;transition:background .25s var(--ease);
}
.ak-details__q::-webkit-details-marker{display:none}
.ak-details__q:hover{background:#fafaf8}
.ak-details__q::after{
  content:"";flex:none;width:18px;height:18px;border-right:2px solid #101010;border-bottom:2px solid #101010;
  transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease);
}
.ak-details[open] .ak-details__q::after{transform:rotate(-135deg) translateY(-3px)}
.ak-details__a{padding:0 24px 24px;color:#666;font-size:15.5px;line-height:1.7}
@media (max-width:640px){
  .ak-details__q{padding:18px 18px;font-size:16px}
  .ak-details__a{padding:0 18px 20px}
}

/* centred section head + small helpers used by harmonised legacy pages */
.ak-head--center{grid-template-columns:1fr;text-align:center;justify-items:center;margin-bottom:48px}
.ak-head--center .ak-h2,.ak-head--center .ak-h3,.ak-head--center h2{max-width:820px}
.ak-head--center .ak-lead{margin-left:auto;margin-right:auto}
.ak-btn--outline{background:transparent;border:1px solid var(--line);color:var(--ink)}
.ak-btn--outline:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.ak-btn--block{display:block;width:100%;text-align:center}
.ak-card--sm{padding:18px;border-radius:16px}
@media (max-width:860px){
  .ak-head{grid-template-columns:1fr;gap:16px}
  .ak-head--center .ak-lead{margin-left:0;margin-right:0}
}

/* ==========================================================================
   LINKED DELIVERABLE CARDS — parent service cards that deep-link to
   sub-service pages (e.g. Shopify Growth -> Shopify Store Setup)
   ========================================================================== */
a.ak-card--link{display:block;color:inherit;transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
a.ak-card--link:hover{border-color:#b9b9b2;transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(16,16,16,.35)}
a.ak-card--link h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ak-card__go{display:inline-flex;color:#8d8d88;transition:transform .3s var(--ease),color .3s var(--ease)}
a.ak-card--link:hover .ak-card__go{transform:translate(3px,-3px);color:var(--ink)}