@charset "UTF-8";
/*
Theme Name: AccessiKey Theme
Theme URI: https://accessikey.com
Author: AccessiKey
Description: AccessiKey custom theme
Text Domain: accessikey
Version: 7.3.7
*/

/* ---------------------------------------------------------
   1) Fonts (quick import)
   Best practice: enqueue via functions.php
--------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Raleway:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&display=swap");

/* ---------------------------------------------------------
   2) Design Tokens (Alpine System + Compatibility Aliases)
--------------------------------------------------------- */
:root{
  /* Alpine light mode */
  --bg-body:#f8fafc;
  --bg-surface:#ffffff;
  --bg-glass:rgba(255,255,255,.9);
  --border-color:#e2e8f0;

  --text-main:#0f172a;
  --text-muted:#64748b;
  --text-on-brand:#ffffff;

  --brand-primary:#0284c7;
  --brand-secondary:#64748b;
  --brand-surface:#f0f9ff;

  --status-success:#10b981;
  --status-error:#ef4444;

  --shadow-sm:none;
  --shadow-card:none;
  --shadow-hover:none;

  --transition-bounce:cubic-bezier(0.34,1.56,0.64,1);
  --transition-smooth:cubic-bezier(0.4,0,0.2,1);

  /* Compatibility aliases used by existing theme rules */
  --ink-900:#0b1120;
  --ink-850:#0f172a;
  --prussian-800:#0f172a;
  --prussian-750:#1e293b;
  --space-700:#1e293b;
  --space-650:#334155;
  --space-600:#334155;
  --space-550:#475569;
  --yale-500:#0ea5e9;
  --yale-450:#0284c7;

  --midnight:#0b1120;
  --navy:#0f172a;
  --oxford:#1e293b;
  --gold-bronze:#0ea5e9;
  --amber:#f59e0b;
  --sunrise:#0ea5e9;
  --sunburst:#1e3a8a;
  --ak-brand-gradient:  linear-gradient(135deg, #0ea5e9 0%, #1e3a8a 100%);
  --warm-gradient:var(--ak-brand-gradient);

  --text:#f1f5f9;
  --text-strong:#ffffff;
  --muted:rgba(241,245,249,.78);
  --muted-2:rgba(241,245,249,.62);
  --border:rgba(255,255,255,.12);

  --text-on-light:var(--text-main);
  --muted-on-light:var(--text-muted);
  --border-on-light:var(--border-color);

  --link:#7dd3fc;
  --link-hover:#bae6fd;
  --link-light:var(--brand-primary);
  --link-light-hover:#0369a1;

  --heading-grad-dark:linear-gradient(100deg,#ffffff 0%,#7dd3fc 35%,#fbbf24 100%);
  --heading-grad-light:linear-gradient(100deg,#0f172a 0%,#0ea5e9 50%,#1e3a8a 100%);
  --cta-grad: linear-gradient(135deg,
    var(--navy) 0%,
    var(--yale-500) 38%,
    var(--oxford) 72%,
    rgba(245,158,11,.85) 140%
  );

  --bg:var(--bg-body);
  --section-dark:
    radial-gradient(900px 520px at 20% 10%, rgba(125,211,252,.16), rgba(125,211,252,0) 62%),
    linear-gradient(180deg, #0f172a 0%, #0b1120 100%);
  --section-light:
    radial-gradient(900px 520px at 18% 18%, rgba(2,132,199,.08), rgba(2,132,199,0) 62%),
    radial-gradient(720px 520px at 70% 22%, rgba(100,116,139,.10), rgba(100,116,139,0) 60%),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);

  /* Layout */
  --max:1180px;

  /* Typography */
  --h1: clamp(34px, 4.2vw, 54px);
  --h2: 30px;
  --h3: 18px;
  --h4: 14px;
  --body: 16px;
  --small: 13px;

  /* Spacing (8px base) */
  --s0: 0px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;
  --s9: 48px;
  --s10: 64px;

  /* Shadows */
  --shadow:none;
  --shadow2:none;
  --shadow-lg:none;

  /* Motion + focus */
  --ease: var(--transition-smooth);
  --tFast: 120ms;
  --tMed: 180ms;

  /* ADA focus ring */
  --focus: 0 0 0 4px rgba(2,132,199,.25), 0 0 0 2px rgba(15,23,42,.18);

  /* Fonts */
  --font-heading: "Raleway", "Segoe UI", Arial, sans-serif;
  --font-body: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Gutenberg widths */
  --content: 860px;
  --wide: 1080px;
}

body.dark-mode{
  --bg-body:#0b1120;
  --bg-surface:#151e32;
  --bg-glass:rgba(255,255,255,.03);
  --border-color:#334155;
  --text-main:#f1f5f9;
  --text-muted:#94a3b8;
  --text-on-brand:#0f172a;
  --brand-primary:#7dd3fc;
  --brand-secondary:#cbd5e1;
  --brand-surface:rgba(125,211,252,.1);
  --status-success:#34d399;
  --status-error:#f87171;
  --text:var(--text-main);
  --text-strong:var(--text-main);
  --muted:var(--text-muted);
  --muted-2:rgba(148,163,184,.75);
  --border:var(--border-color);

  --text-on-light:var(--text-main);
  --muted-on-light:var(--text-muted);
  --border-on-light:var(--border-color);
  --link:var(--brand-primary);
  --link-hover:#bae6fd;
  --link-light:var(--brand-primary);
  --link-light-hover:#a5f3fc;
  --bg:var(--bg-body);
}

body.light-mode{
  --bg-body:#f8fafc;
  --bg-surface:#ffffff;
  --bg-glass:rgba(255,255,255,.9);
  --border-color:#e2e8f0;
  --text-main:#0f172a;
  --text-muted:#64748b;
  --text-on-brand:#ffffff;
  --brand-primary:#0284c7;
  --brand-secondary:#64748b;
  --brand-surface:#f0f9ff;
  --status-success:#10b981;
  --status-error:#ef4444;
  --bg:var(--bg-body);
}

/* ---------------------------------------------------------
   3) Map to WP global vars (blocks match theme)
--------------------------------------------------------- */
:root{
  --global--color-background: transparent;
  --global--color-primary: var(--text-on-light);
  --global--color-secondary: var(--muted-on-light);
  --global--color-link: var(--link-light);
  --global--color-link-hover: var(--link-light-hover);
  --global--color-border: var(--border-on-light);

  --global--font-primary: var(--font-heading);
  --global--font-secondary: var(--font-body);

  --global--line-height-body: 1.7;
  --global--line-height-heading: 1.25;

  --responsive--aligndefault-width: min(var(--content), calc(100% - 2 * var(--s4)));
  --responsive--alignwide-width: min(var(--wide), calc(100% - 2 * var(--s4)));
  --responsive--alignfull-width: 100%;
}

/* ---------------------------------------------------------
   4) Reset / base
--------------------------------------------------------- */
html{
  box-sizing: border-box;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-family: var(--font-body);
}
*,
*::before,
*::after{ box-sizing: inherit; }

body{
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body);
  color: var(--text-on-light);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main{ display:block; }
img, svg, video, iframe{ max-width:100%; height:auto; }
figure{ margin:0; }

a{ background-color: transparent; color: inherit; text-decoration:none; }
a:hover{ text-decoration: underline; }

button, input, optgroup, select, textarea{
  font: inherit;
  margin: 0;
}
button, input{ overflow: visible; }
button, select{ text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"]{
  -webkit-appearance: button;
  cursor: pointer;
}

hr{
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--border-on-light);
  margin: var(--s7) 0;
}

code, pre, kbd, samp{ font-family: var(--font-mono); }
pre{
  white-space: pre;
  overflow-x: auto;
  padding: var(--s4);
  border-radius: 16px;
  background: #061327;
  color: #eaf6ff;
  border: 1px solid rgba(14,165,233,.25);
  margin: 0 0 1rem;
}

::selection{ background: rgba(14,165,233,.22); }

:focus{ outline: none; }
:focus-visible{ box-shadow: none; border-radius: 12px; }

/* ---------------------------------------------------------
   5) Typography
--------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
  margin: 0 0 .75rem;
  font-family: var(--font-heading);
  letter-spacing: -.2px;
  line-height: var(--global--line-height-heading);
  clear: both;
  color: inherit;
}
h1{ font-size: var(--h1); line-height:1.06; font-weight:900; color: inherit; }
h2{ font-size: var(--h2); line-height:1.2;  font-weight:900; }
h3{ font-size: var(--h3); line-height:1.3;  font-weight:900; }
h4{
  font-size: var(--h4);
  line-height:1.35;
  font-weight:900;
  letter-spacing:.2px;
  text-transform: uppercase;
}

p{
  margin: 0 0 1rem;
  line-height: var(--global--line-height-body);
}

b,strong{ font-weight:800; }
small{ font-size: var(--small); }

/* Links (do NOT break buttons) */
.entry-content a{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.section-dark a:not(.btn):not(.wp-block-button__link){
  color: var(--link);
}
.section-dark a:not(.btn):not(.wp-block-button__link):hover{
  color: var(--link-hover);
}
.section-light a:not(.btn):not(.wp-block-button__link){
  color: var(--link-light);
}
.section-light a:not(.btn):not(.wp-block-button__link):hover{
  color: var(--link-light-hover);
}


/* ---------------------------------------------------------
   6) Lists
--------------------------------------------------------- */
ul, ol{
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  line-height: 1.7;
  font-family: var(--font-body);
  color: inherit;
}
li{ margin: .35rem 0; }

/* ---------------------------------------------------------
   7) Layout helpers
--------------------------------------------------------- */
.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--s4);
}

.grid{ display:grid; gap: var(--s4); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }

.row, .ak-row{
  display:flex;
  gap: var(--s3);
  flex-wrap:wrap;
  align-items:center;
}

.stack{
  display:flex;
  flex-direction:column;
  gap: var(--s3);
}

/* ---------------------------------------------------------
   8) Sections (dark/light) + spacing
--------------------------------------------------------- */
.section-dark{
  background: var(--section-dark);
  color: var(--text);
}
.section-light{
  background: var(--section-light);
  color: var(--text-on-light);
}

/* Default section padding */
section.section-dark,
section.section-light,
section.offer,
section.cta{
  padding-top: 72px;
  padding-bottom: 72px;
}

/* Hero has custom padding */
section.hero{
  padding-top: 80px;
  padding-bottom: 30px;
}

/* Headings spacing (fix H2 stuck to top) */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 28px;
}
.section-head h2{ margin: 0 0 14px; }
.section-head p{ margin: 0; max-width: 62ch; font-weight:700; }

/* ---------------------------------------------------------
   9) Header / Navigation
--------------------------------------------------------- */
header{
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(10px);
  background: var(--ak-bg-header, rgba(0,8,20,.70));
  border-bottom: 1px solid var(--ak-border, rgba(255,255,255,.10));
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height: 74px;
  gap: 14px;
}

nav.primary{
  display:flex;
  align-items:center;
  gap: 6px;
  justify-content:flex-end;
  flex-wrap: wrap;
}

.nav-link,
.nav-drop-btn{
  border: 1px solid transparent;
  background: transparent;
  color: var(--ak-text-primary, #fff);
  font-weight: 800;
  font-size: .95rem;
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

.chev{
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -2px;
  opacity: .75;
}

.drop{ position: relative; }

.menu{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 300px;
  border-radius: 18px;
  background: var(--ak-bg-surface, rgba(7, 26, 42, .96));
  border: 1px solid var(--ak-border, rgba(255,255,255,.12));
  box-shadow: none;
  padding: 10px;
  display:none;
}

.menu[aria-hidden="false"]{ display:block; }

.menu .group{
  padding: 10px 12px 6px;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(14,165,233,.82);
  font-weight: 900;
}

.menu a{
  display:block;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--ak-text-primary, #fff);
  font-weight: 800;
}

.menu a:hover{
  background: var(--ak-bg-subtle, rgba(255,255,255,.08));
  text-decoration: none;
}

.divider{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 8px 6px;
  border-radius: 999px;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-left: 6px;
}

/* ---------------------------------------------------------
   10) Buttons (sitewide) + WP buttons
--------------------------------------------------------- */
.btn,
.wp-block-button__link,
button:not(.nav-drop-btn):not(.burger):not(.mobile-acc-btn):not(.theme-toggle),
input[type="submit"],
input[type="button"],
input[type="reset"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 2px solid transparent;
  font-weight: 900;
  letter-spacing:.2px;
  white-space: nowrap;
  cursor:pointer;
  text-decoration:none;

  transition: transform 140ms var(--ease),
              box-shadow 140ms var(--ease),
              background 140ms var(--ease),
              border-color 140ms var(--ease),
              filter 140ms var(--ease);
}
.btn:active,
.wp-block-button__link:active,
button:active{ transform: translateY(1px); }

/* ---------------------------------------------------------
   11) Hero + components
--------------------------------------------------------- */
.hero{ position: relative; overflow: hidden; }

.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 34px;
  align-items:center;
  position: relative;
  z-index: 1;
}

.hero-actions{
  margin-top: 22px;
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-meta{
  margin-top: 18px;
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted-2);
  font-weight: 800;
  font-size: .92rem;
}
.hero-meta span{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}
.mini{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(169,214,255,.8);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.30);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: .85rem;
  letter-spacing: .02em;
  margin-bottom: 14px;
}
.dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--warm-gradient);
  box-shadow: none;
}

.hero-visual{
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    radial-gradient(520px 320px at 80% 10%, rgba(14,165,233,.18), rgba(14,165,233,0) 60%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
  overflow:hidden;
  position: relative;
  min-height: 420px;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}
.hero-visual:hover{
  transform: translateY(-6px);
  border-color: rgba(14,165,233,.22);
  box-shadow: none;
}
.hero-visual .img{
  position:absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
}
.hero-visual .overlay{
  position:absolute;
  inset: 0;
  padding: 18px;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}
.pill-row{ display:flex; gap: 10px; flex-wrap: wrap; }
.pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0, 8, 20, .58);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-weight: 900;
  font-size: .88rem;
  backdrop-filter: blur(8px);
}

/* ---------------------------------------------------------
   12) Cards + icons
--------------------------------------------------------- */
.card{
  border-radius: 22px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: none;
  padding: 18px;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease);
}
.section-light .card{
  border: 1px solid var(--border-on-light);
  background: rgba(255,255,255,.92);
  box-shadow: none;
}

.card p{ margin:0; color: var(--muted); }
.section-light .card p{ color: var(--muted-on-light); }

.icon{
  width: 42px; height: 42px;
  border-radius: 14px;
  background: rgba(14,165,233,.12);
  border: 1px solid rgba(14,165,233,.25);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 12px;
  box-shadow: none;
  font-weight: 900;
  color: var(--gold-bronze);
  transition: transform 160ms var(--ease);
}
/* ---------------------------------------------------------
   14) Offer / Form
--------------------------------------------------------- */
.offer{ padding: 42px 0; }

.offer-wrap{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(820px 420px at 80% 10%, rgba(14,165,233,.16), rgba(14,165,233,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: none;
  overflow:hidden;
  position: relative;
}
.section-light .offer-wrap{
  border: 1px solid var(--border-on-light);
  background:
    radial-gradient(820px 420px at 80% 10%, rgba(14,165,233,.18), rgba(14,165,233,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
  box-shadow: none;
}

.offer-inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  padding: 22px;
  align-items:center;
}

.offer-kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 900;
  font-size: .85rem;
  width: fit-content;
}
.section-light .offer-kicker{
  background: rgba(4,18,33,.06);
  border-color: rgba(4,18,33,.14);
  color: var(--text-on-light);
}

.offer-form{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,8,20,.42);
  padding: 16px;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease);
}
.section-light .offer-form{
  background: rgba(4,18,33,.04);
  border-color: rgba(4,18,33,.14);
}
.offer-form:hover{
  transform: translateY(-4px);
  border-color: rgba(14,165,233,.22);
  box-shadow: none;
}

.field{ display:flex; flex-direction:column; gap: 8px; margin-bottom: 12px; }
.label{ font-weight: 900; font-size: .92rem; color: inherit; }

.input{
  width: 100%;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-weight: 800;
  outline: none;
}
.section-light .input{
  background: rgba(255,255,255,.94);
  color: var(--text-on-light);
  border-color: rgba(4,18,33,.18);
}
.input::placeholder{ color: rgba(255,255,255,.55); }
.section-light .input::placeholder{ color: rgba(4,18,33,.45); }

/* ---------------------------------------------------------
   15) Pricing / FAQ / CTA
--------------------------------------------------------- */
.pricing{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* FAQ */
details{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 14px 16px;
}
.section-light details{
  border: 1px solid var(--border-on-light);
  background: rgba(255,255,255,.92);
}
summary{
  cursor:pointer;
  font-weight: 900;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
}
summary::-webkit-details-marker{ display:none; }

/* CTA */
.cta{
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(720px 360px at 20% 10%, rgba(245,158,11,.14), rgba(245,158,11,0) 60%),
    rgba(0,8,20,.35);
}
.cta-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------
   16) Footer (dark) + footer.php classes
--------------------------------------------------------- */
footer.site-footer,
#colophon.site-footer,
footer{
  padding: 44px 0;
  background: rgba(0,8,20,.75);
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.90);
}

.footer-grid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.foot h4{
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: .2px;
  text-transform: uppercase;
}

.foot p{
  margin: 10px 0 0;
  color: rgba(255,255,255,.72);
  font-weight: 750;
}

.foot a{
  display:block;
  padding: 8px 0;
  color: rgba(255,255,255,.82);
  font-weight: 800;
  text-decoration:none;
}
.foot a:hover{
  color: var(--link-hover);
  text-decoration: underline;
  text-decoration-style: dotted;
}

.fineprint{
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
  color: rgba(255,255,255,.72);
  font-size: 13px;
}

.fineprint a{
  color: rgba(255,255,255,.82);
  font-weight: 800;
  text-decoration:none;
}
.fineprint a:hover{
  color: var(--link-hover);
  text-decoration: underline;
}

/* ---------------------------------------------------------
   17) WordPress / Gutenberg compatibility
--------------------------------------------------------- */
.entry-content{ line-height: 1.7; }
.wp-block-image figcaption,
.wp-caption-text,
.wp-block-embed figcaption{
  font-size: var(--small);
  margin-top: .5rem;
  text-align:center;
  color: var(--muted-on-light);
}
.wp-block-quote{
  border-left: 4px solid rgba(14,165,233,.55);
  padding: 12px 16px;
  background: rgba(14,165,233,.10);
  border-radius: 16px;
  margin: 0 0 1rem;
}

/* ---------------------------------------------------------
   18) Accessibility utilities
--------------------------------------------------------- */
.screen-reader-text{
  border:0;
  clip-path: inset(50%);
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute !important;
  width:1px;
  word-wrap: normal !important;
  word-break: normal;
}

/* Skip link */
.skip-link.screen-reader-text:focus{
  clip-path: none;
  height:auto;
  width:auto;
  position:absolute !important;
  left: 12px;
  top: 12px;
  z-index: 99999;
  background:#fff;
  border:2px solid var(--oxford);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--oxford);
  text-decoration:none;
  box-shadow: none;
}

/* ---------------------------------------------------------
   20) Responsive layout
--------------------------------------------------------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .offer-inner{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px){
  .grid-3{ grid-template-columns: 1fr; }
  .pricing{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   ADD: Flexible Template with Side bar (Guide Template)
   Prefix: ak-guide-*
   Safe: does NOT modify existing .hero/.toc/.article classes
========================================================= */

/* ---------- Guide HERO (top banner) ---------- */
.ak-guide-hero-inner{
  max-width: 980px;
}
.ak-guide-hero-actions{
  margin-top: 22px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
}

/* ---------- Guide Main Layout ---------- */
.ak-guide-main{
  padding: 28px 0 80px;
}
.ak-guide-layout{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap: 26px;
  align-items:start;
}

/* ---------- Guide TOC (sidebar) ---------- */
.ak-guide-toc{
  position: sticky;
  top: 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(7,20,39,.14);
  box-shadow: none;
  padding: 16px;
}
.ak-guide-toc-title{
  margin: 6px 6px 12px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.05rem;
  color: #071427;
}
.ak-guide-toc-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap: 6px;
}
.ak-guide-toc-link{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: #0b2945;
  font-weight: 900;
  font-size: .95rem;
  text-decoration:none;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.ak-guide-toc-link:hover{
  background: rgba(4,18,33,.05);
  border-color: rgba(4,18,33,.10);
  text-decoration:none;
}
.ak-guide-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(4,18,33,.06);
  border: 1px solid rgba(4,18,33,.10);
  font-size: .78rem;
  font-weight: 900;
  color: #123654;
  white-space: nowrap;
}

/* ---------- Guide TOC (mobile dropdown) ---------- */
.ak-guide-toc-mobile{
  display:none;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(7,20,39,.14);
  box-shadow: none;
  overflow:hidden;
  margin-bottom: 14px;
}
.ak-guide-toc-mobile button{
  width:100%;
  border:0;
  background: transparent;
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  font-weight: 900;
  cursor:pointer;
  font-family: var(--font-heading);
  color: #071427;
}
.ak-guide-toc-panel{
  padding: 0 14px 14px;
  display:none;
}
.ak-guide-toc-mobile[aria-expanded="true"] .ak-guide-toc-panel{ display:block; }

/* ---------- Guide Article ---------- */
.ak-guide-article{
  background: #fff;
  border: 1px solid rgba(7,20,39,.14);
  border-radius: 22px;
  box-shadow: none;
  padding: 26px 26px;
  min-width: 0;
}
.ak-guide-article .intro{
  color: #284764;
  font-size: 1.02rem;
  font-weight: 650;
  margin: 0 0 18px;
}
.ak-guide-article h2{
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: -.3px;
  color: #0b1f33;
  margin: 26px 0 10px;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.08;
}
.ak-guide-article h3{
  font-family: var(--font-heading);
  font-weight: 900;
  margin: 18px 0 8px;
  color: #0b1f33;
  font-size: 1.18rem;
  line-height: 1.25;
}
.ak-guide-article p{ margin: 0 0 14px; color: #284764; }
.ak-guide-article ul{ margin: 0 0 14px; padding-left: 18px; color: #284764; }
.ak-guide-article li{ margin: 8px 0; }

/* ---------- Image block (figure) ---------- */
.ak-figure{
  margin: 16px 0 18px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(7,20,39,.12);
  box-shadow: none;
  background: #fff;
}
.ak-figure img{ width:100%; height:auto; display:block; }

/* ---------- Code block (copy/paste section) ---------- */
.ak-codeblock{
  margin: 14px 0 18px;
  border-radius: 18px;
  background: #050c16;
  box-shadow: none;
  overflow:hidden;
}
pre.ak-code{
  margin:0;
  padding: 14px 14px 16px;
  overflow:auto;
  color: rgba(255,255,255,.92);
  font-family: var(--font-mono);
  font-size: .92rem;
  line-height: 1.6;
  white-space: pre;
  tab-size: 2;
}
/* ---------- Reveal animation ---------- */
.ak-reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.ak-reveal.in{
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 980px){
  .ak-guide-layout{ grid-template-columns: 1fr; }
  .ak-guide-toc{ display:none; }
  .ak-guide-toc-mobile{ display:block; }
  .ak-guide-article{ padding: 20px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ak-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* =========================================================
   FIX PACK v2: Flexible Sidebar Template (Guide)
   Paste at the VERY END of style.css
   Matches UPDATED template markup:
   - Important card uses: .callout (NO ak-important-card)
   - Dark cards use: .step-card.step-card-dark
   - Code head removed
   - Copy button uses existing: .btn (.btn-outline etc.)
========================================================= */

/* =========================================================
   IMPORTANT card (template uses .callout)
========================================================= */
.ak-guide .callout{
  margin: 16px 0 18px;
  border-radius: 18px;
  border: 1px solid rgba(14,165,233,.38);
  background:
    radial-gradient(520px 220px at 30% 10%, rgba(14,165,233,.20), rgba(14,165,233,0) 60%),
    rgba(14,165,233,.10);
  padding: 16px;
  color: #1b1b1b;
}
.ak-guide .callout strong{
  color:#111;
  font-weight: 900;
}
/* template may output <div> or <p> inside */
.ak-guide .callout p,
.ak-guide .callout div,
.ak-guide .callout ul,
.ak-guide .callout ol{
  margin: 8px 0 0;
  color:#2b3f53;
}
.ak-guide .callout li{ margin: 6px 0; }

/* =========================================================
   CTA (template uses .article-cta)
========================================================= */
.ak-guide .article-cta{
  margin-top: 26px;
  border-radius: 22px;
  border: 1px solid rgba(0,64,108,.20);
  background:
    radial-gradient(620px 260px at 70% 10%, rgba(0,64,108,.16), rgba(0,64,108,0) 60%),
    linear-gradient(180deg, #f7fbff 0%, #eef6ff 100%);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ak-guide .article-cta h3{
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 900;
  color: #0b1f33;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.ak-guide .article-cta p{
  margin: 4px 0 0;
  color: var(--muted-on-light);
  font-weight: 650;
}

/* =========================================================
   Cards grid used in template: .steps .step-card
   NOTE: removed unwanted .tag/.dot styles (template no longer uses them)
========================================================= */
.ak-guide .steps{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 10px 0 18px;
}

/* DEFAULT (Light) step card */
.ak-guide .step-card{
  border-radius: 18px;
  border: 1px solid rgba(7,20,39,.12);
  background: rgba(4,18,33,.03);
  padding: 14px;
  box-shadow: none;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease);
}
.ak-guide .step-card h4{
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.25;
  color: #0b1f33;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.ak-guide .step-card p,
.ak-guide .step-card div{
  margin: 0;
  color: var(--muted-on-light);
  font-weight: 650;
}

/* Optional: Yellow variant */
.ak-guide .step-card.step-card-yellow{
  border-color: rgba(14,165,233,.45);
  background:
    radial-gradient(520px 240px at 20% 10%, rgba(14,165,233,.22), rgba(14,165,233,0) 60%),
    rgba(14,165,233,.12);
}
.ak-guide .step-card.step-card-yellow h4{ color:#1b1b1b; }
.ak-guide .step-card.step-card-yellow p,
.ak-guide .step-card.step-card-yellow div{ color:#2b3f53; }

/* =========================================================
   Code section: template uses .ak-codeblock + pre.ak-code + .ak-code-actions
   (No code head)
========================================================= */
.ak-code-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: 12px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

/* Responsive */
@media (max-width: 980px){
  .ak-guide .steps{ grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ak-guide .step-card{ transition: none !important; }
  .ak-guide .step-card:hover{ transform: none !important; }
}

/* =========================================================
   LANDING ALT LAYOUT V3 — LIGHT PACK (AccessiKey)
   Paste at VERY END of style.css
   Requires: <main class="ak-v3"> ... </main>
========================================================= */

/* ---------- Page base ---------- */
.ak-v3{
  color: var(--text-on-light);
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(0,64,108,.10), rgba(0,64,108,0) 62%),
    radial-gradient(720px 520px at 70% 22%, rgba(14,165,233,.12), rgba(14,165,233,0) 60%),
    linear-gradient(180deg, #f7fbff 0%, #eef6ff 100%);
}

/* Make spacing consistent */
.ak-v3 .section{
  padding: 82px 0;
}

/* Hero section */
.ak-v3 .section.hero{
  padding: 96px 0 70px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1000px 540px at 18% 16%, rgba(0,64,108,.16), rgba(0,64,108,0) 60%),
    radial-gradient(720px 520px at 75% 20%, rgba(14,165,233,.16), rgba(14,165,233,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%);
  border-bottom: 1px solid rgba(4,18,33,.08);
}

.ak-v3 .section.hero::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 320px at 86% 18%, rgba(14,165,233,.18), rgba(14,165,233,0) 60%),
    radial-gradient(760px 420px at 10% 20%, rgba(0,64,108,.18), rgba(0,64,108,0) 62%);
  pointer-events:none;
  opacity: .9;
}

/* ---------- Layout helpers used by V3 template ---------- */
.ak-v3 .split-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items:center;
  position: relative;
  z-index: 1;
}

.ak-v3 .image-right,
.ak-v3 .image-left{
  min-width: 0;
}

.ak-v3 .image-right{ justify-self: end; }
.ak-v3 .image-left{ justify-self: start; }

/* Headline helper */
.ak-v3 .grad-text{
  background-image: linear-gradient(90deg,
    var(--link-light) 0%,
    var(--yale-500) 42%,
    var(--amber) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Eyebrow (kicker pill) */
.ak-v3 .eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(14,165,233,.14);
  border: 1px solid rgba(14,165,233,.30);
  color: #1b2430;
  font-weight: 900;
  font-size: .86rem;
  letter-spacing: .02em;
  margin-bottom: 14px;
}

/* Buttons: treat as "light section" even without .section-light */
.ak-v3 .btn-outline{
  color: var(--text-on-light);
  border-color: rgba(4,18,33,.28);
}
.ak-v3 .btn-outline:hover{
  background: rgba(0,64,108,.08);
  border-color: rgba(0,64,108,.22);
}

/* ---------- Mock UI cards ---------- */
.ak-v3 .mock-box{
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1.5px solid rgba(4,18,33,.14);
  box-shadow: none;
  overflow:hidden;
}

.ak-v3 .mock-header{
  height: 44px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 0 16px;
  background: linear-gradient(180deg, #ffffff, #f3f7fb);
  border-bottom: 1px solid rgba(4,18,33,.10);
}

.ak-v3 .mock-header .dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: none; /* prevent glow from your global .dot */
}

/* Floating animation */
.ak-v3 .floating{
  animation: akFloat 5.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes akFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* ---------- Feature cards grid ---------- */
.ak-v3 .grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.ak-v3 .card{
  border-radius: 22px;
  border: 1px solid rgba(4,18,33,.12);
  background: rgba(255,255,255,.94);
  box-shadow: none;
  padding: 22px;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}

.ak-v3 .card h3{
  margin-top: 10px;
  margin-bottom: 8px;
  color: #0b1f33;
}
.ak-v3 .card p{
  margin: 0;
  color: var(--muted-on-light);
  font-weight: 650;
}

/* Icon wrap (emoji container) */
.ak-v3 .icon-wrap{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(14,165,233,.14);
  border: 1px solid rgba(14,165,233,.30);
  box-shadow: none;
  font-size: 1.35rem;
}

/* ---------- Integrations strip ---------- */
.ak-v3 .integrations{
  padding: 56px 0;
  background:
    radial-gradient(820px 420px at 20% 20%, rgba(0,64,108,.12), rgba(0,64,108,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
  border-top: 1px solid rgba(4,18,33,.08);
  border-bottom: 1px solid rgba(4,18,33,.08);
}

.ak-v3 .logo-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  align-items:center;
}

.ak-v3 .logo-item{
  text-align:center;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(4,18,33,.12);
  background: rgba(255,255,255,.92);
  color: rgba(4,18,33,.72);
  font-weight: 900;
  letter-spacing: .08em;
  font-size: .78rem;
  box-shadow: none;
  user-select:none;
}

/* ---------- Stats bar ---------- */
.ak-v3 .stats-bar{
  border-radius: 26px;
  border: 1px solid rgba(4,18,33,.12);
  background: rgba(255,255,255,.92);
  box-shadow: none;
  padding: 22px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.ak-v3 .stat-item{
  border-radius: 18px;
  border: 1px solid rgba(4,18,33,.10);
  background: rgba(4,18,33,.02);
  padding: 18px;
}
.ak-v3 .stat-item h2{
  margin: 0 0 6px;
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1.05;
  color: #0b1f33;
}
.ak-v3 .stat-item p{
  margin: 0;
  color: var(--muted-on-light);
  font-weight: 750;
}

/* ---------- Pricing ---------- */
.ak-v3 .pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

.ak-v3 .price-card{
  position: relative;
  border-radius: 26px;
  border: 1px solid rgba(4,18,33,.12);
  background: rgba(255,255,255,.96);
  box-shadow: none;
  padding: 26px;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}

.ak-v3 .price-card h3{
  margin-bottom: 6px;
  color: #0b1f33;
}
.ak-v3 .price-card p{
  color: var(--muted-on-light);
  font-weight: 650;
}

.ak-v3 .price-val{
  margin: 18px 0 16px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2.2rem;
  color: #0b1f33;
}
.ak-v3 .price-val span{
  font-size: 1rem;
  font-weight: 800;
  color: rgba(4,18,33,.60);
  margin-left: 6px;
}

.ak-v3 .price-card.featured{
  border-color: rgba(14,165,233,.45);
  background:
    radial-gradient(620px 260px at 70% 10%, rgba(14,165,233,.22), rgba(14,165,233,0) 60%),
    rgba(255,255,255,.98);
  box-shadow: none;
  transform: translateY(-6px);
}
.ak-v3 .price-card.featured:hover,
.ak-v3 .price-card.featured:focus-within{
  transform: translateY(-10px);
}

/* ---------- Reveal animations (used by your JS) ---------- */
.ak-v3 .reveal,
.ak-v3 .reveal-left,
.ak-v3 .reveal-right{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

.ak-v3 .reveal-left{ transform: translateX(-18px); }
.ak-v3 .reveal-right{ transform: translateX(18px); }

.ak-v3 .reveal.active,
.ak-v3 .reveal-left.active,
.ak-v3 .reveal-right.active{
  opacity: 1;
  transform: translate(0,0);
}

/* ---------- Responsive ---------- */
@media (max-width: 1060px){
  .ak-v3 .split-grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .ak-v3 .image-right,
  .ak-v3 .image-left{ justify-self: stretch; }
  .ak-v3 .logo-grid{ grid-template-columns: repeat(3, 1fr); }
  .ak-v3 .stats-bar{ grid-template-columns: repeat(2, 1fr); }
  .ak-v3 .pricing-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  .ak-v3 .section{ padding: 64px 0; }
  .ak-v3 .section.hero{ padding: 78px 0 54px; }
  .ak-v3 .grid-3{ grid-template-columns: 1fr; }
  .ak-v3 .logo-grid{ grid-template-columns: repeat(2, 1fr); }
  .ak-v3 .stats-bar{ grid-template-columns: 1fr; }
}

/* ---------- Accessibility: forced colors ---------- */
@media (forced-colors: active){
  .ak-v3 .grad-text{
    background-image: none !important;
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
  }
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
  .ak-v3 .floating{ animation: none !important; }
  .ak-v3 .reveal,
  .ak-v3 .reveal-left,
  .ak-v3 .reveal-right{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   AK-V3 ADDON PACK — FAQ (SIMPLE 1-COL ACCORDION) + DARK CARD + PRICING TABS
   Paste at VERY END of style.css
   Scope: .ak-v3 only (safe)
========================================================= */

/* Sticky header offset helper for smooth section jumps */
.ak-v3 #pricing,
.ak-v3 #faq{
  scroll-margin-top: 90px;
}

/* ---------- Dark card option (use: .card card-dark) ---------- */
.ak-v3 .card.card-dark{
  border: 1px solid rgba(0,8,20,.18);
  background:
    radial-gradient(520px 240px at 22% 12%, rgba(0,64,108,.22), rgba(0,64,108,0) 60%),
    radial-gradient(520px 240px at 86% 22%, rgba(14,165,233,.14), rgba(14,165,233,0) 60%),
    linear-gradient(180deg, rgba(0,8,20,.92), rgba(0,8,20,.82));
  box-shadow: none;
}
.ak-v3 .card.card-dark h3,
.ak-v3 .card.card-dark strong{
  color: rgba(255,255,255,.95);
}
.ak-v3 .card.card-dark p{
  color: rgba(255,255,255,.72);
}
.ak-v3 .card.card-dark .icon-wrap{
  background: rgba(14,165,233,.14);
  border-color: rgba(14,165,233,.30);
  box-shadow: none;
}

/* Optional: dark pricing card */
.ak-v3 .price-card.price-card-dark{
  border: 1px solid rgba(0,8,20,.18);
  background:
    radial-gradient(620px 260px at 70% 10%, rgba(14,165,233,.12), rgba(14,165,233,0) 60%),
    linear-gradient(180deg, rgba(0,8,20,.92), rgba(0,8,20,.82));
  box-shadow: none;
}
.ak-v3 .price-card.price-card-dark h3{ color: rgba(255,255,255,.95); }
.ak-v3 .price-card.price-card-dark p{ color: rgba(255,255,255,.72); }
.ak-v3 .price-card.price-card-dark .price-val{ color: rgba(255,255,255,.95); }
.ak-v3 .price-card.price-card-dark .price-val span{ color: rgba(255,255,255,.65); }
.ak-v3 .price-card.price-card-dark .price-list{ color: rgba(255,255,255,.80); }

/* ---------- Pricing Tabs UI (seamless theme shift per tab) ---------- */
.ak-v3 .ak-price-tabs{
  /* default (monthly) */
  --tab-accent: var(--link-light);
  --tab-accent-soft: rgba(11,95,168,.14);
  --tab-accent-border: rgba(11,95,168,.28);

  border-radius: 26px;
  border: 1px solid rgba(4,18,33,.12);
  background:
    radial-gradient(620px 260px at 70% 10%, var(--tab-accent-soft), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.96);
  box-shadow: none;
  padding: 18px;
  transition: background 260ms var(--ease), border-color 260ms var(--ease), box-shadow 260ms var(--ease);
}

/* tab theme per active state */
.ak-v3 .ak-price-tabs[data-active="monthly"]{
  --tab-accent: var(--link-light);
  --tab-accent-soft: rgba(11,95,168,.14);
  --tab-accent-border: rgba(11,95,168,.28);
}
.ak-v3 .ak-price-tabs[data-active="yearly"]{
  --tab-accent: var(--amber);
  --tab-accent-soft: rgba(14,165,233,.16);
  --tab-accent-border: rgba(14,165,233,.38);
}
.ak-v3 .ak-price-tabs[data-active="agency"]{
  --tab-accent: var(--oxford);
  --tab-accent-soft: rgba(0,53,102,.12);
  --tab-accent-border: rgba(0,53,102,.26);
}

.ak-v3 .pricing-tablist{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:center;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 20px;
  background: rgba(4,18,33,.03);
  border: 1px solid rgba(4,18,33,.08);
  margin-bottom: 18px;
}

.ak-v3 .pricing-tab{
  appearance: none;
  border: 1px solid rgba(4,18,33,.14);
  background: rgba(255,255,255,.85);
  color: rgba(4,18,33,.78);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease), box-shadow 160ms var(--ease), color 160ms var(--ease);
  display:inline-flex;
  align-items:center;
  gap: 10px;
}

.ak-v3 .pricing-tab:hover{
  background: #fff;
  border-color: rgba(0,64,108,.18);
  box-shadow: none;
  transform: translateY(-1px);
}

.ak-v3 .pricing-tab[aria-selected="true"]{
  background:
    radial-gradient(520px 220px at 30% 10%, var(--tab-accent-soft), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.92);
  border-color: var(--tab-accent-border);
  color: #0b1f33;
  box-shadow: none;
}

.ak-v3 .pricing-tab:focus-visible{
  box-shadow: none;
}

.ak-v3 .tab-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(4,18,33,.06);
  border: 1px solid rgba(4,18,33,.10);
  font-size: .78rem;
  font-weight: 900;
  color: #123654;
}
.ak-v3 .pricing-tab[aria-selected="true"] .tab-badge{
  background: var(--tab-accent-soft);
  border-color: var(--tab-accent-border);
  color: #0b1f33;
}

/* Panel visibility + cool transition */
.ak-v3 .pricing-panel[hidden]{ display:none; }
.ak-v3 .pricing-panel.is-entering{
  animation: akPanelIn 360ms var(--ease) both;
}
.ak-v3 .pricing-panel.is-exiting{
  animation: akPanelOut 180ms var(--ease) both;
}
@keyframes akPanelIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes akPanelOut{
  from{ opacity:1; transform: translateY(0); }
  to{ opacity:0; transform: translateY(6px); }
}

/* Price pills + list cleanup */
.ak-v3 .price-top-pill{
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--warm-gradient);
  padding: 4px 16px;
  border-radius: 99px;
  font-weight: 900;
  font-size: 0.7rem;
  color: #000;
  letter-spacing: .06em;
}

.ak-v3 .price-list{
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 10px;
  text-align:left;
  color: rgba(4,18,33,.78);
  font-weight: 750;
}

/* Make featured card pop more */
.ak-v3 .price-card.featured{
  border-color: rgba(14,165,233,.45);
  background:
    radial-gradient(620px 260px at 70% 10%, rgba(14,165,233,.22), rgba(14,165,233,0) 60%),
    rgba(255,255,255,.98);
  box-shadow: none;
}

/* =========================================================
   FAQ — SIMPLE ONE COLUMN ACCORDION (animated height)
========================================================= */
.ak-v3 .faq-list{
  max-width: 860px;
  margin: 0 auto;
  display:grid;
  gap: 12px;
}

.ak-v3 .faq-item{
  border-radius: 20px;
  border: 1px solid rgba(4,18,33,.12);
  background: rgba(255,255,255,.96);
  box-shadow: none;
  overflow:hidden;
}

/* Button row */
.ak-v3 .faq-q{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;

  padding: 16px 18px;
  border: 0;
  background: transparent;
  color: #0b1f33;
  font-weight: 900;
  text-align:left;
  cursor:pointer;
}

.ak-v3 .faq-q:focus-visible{
  box-shadow: none;
  border-radius: 14px;
  margin: 10px;
  width: calc(100% - 20px);
}

/* Chevron icon */
.ak-v3 .faq-icn{
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .75;
  transition: transform 180ms var(--ease);
}
.ak-v3 .faq-item.is-open .faq-icn{
  transform: rotate(-135deg);
}

/* Animated panel */
.ak-v3 .faq-panel{
  overflow:hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 260ms var(--ease), opacity 260ms var(--ease);
  border-top: 1px solid rgba(4,18,33,.08);
  background: rgba(4,18,33,.01);
}
.ak-v3 .faq-item.is-open .faq-panel{
  opacity: 1;
}

.ak-v3 .faq-body{
  padding: 0 18px 16px;
  color: var(--muted-on-light);
  font-weight: 650;
  line-height: 1.7;
}

/* Dark FAQ option */
.ak-v3 .faq-item.faq-item-dark{
  border: 1px solid rgba(0,8,20,.18);
  background:
    radial-gradient(520px 240px at 22% 12%, rgba(0,64,108,.22), rgba(0,64,108,0) 60%),
    linear-gradient(180deg, rgba(0,8,20,.92), rgba(0,8,20,.82));
}
.ak-v3 .faq-item.faq-item-dark .faq-q{
  color: rgba(255,255,255,.94);
}
.ak-v3 .faq-item.faq-item-dark .faq-panel{
  border-top-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.ak-v3 .faq-item.faq-item-dark .faq-body{
  color: rgba(255,255,255,.72);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ak-v3 .pricing-tab,
  .ak-v3 .pricing-panel.is-entering,
  .ak-v3 .pricing-panel.is-exiting,
  .ak-v3 .faq-panel,
  .ak-v3 .faq-icn{
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   AccessiKey — 404 LIGHT PACK (Paste at END of style.css)
   Targets: body.error404 (WP default for 404 pages)
========================================================= */

body.error404{
  /* override your theme dark background on 404 only */
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(0,64,108,.10), rgba(0,64,108,0) 62%),
    radial-gradient(720px 520px at 70% 22%, rgba(14,165,233,.14), rgba(14,165,233,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #eef6ff 100%) !important;
  color: var(--text-on-light) !important;
}

/* Make sure the main content area doesn't inherit dark section styles */
body.error404 #content,
body.error404 .site-content,
body.error404 .site-main{
  background: transparent !important;
}

/* Layout */
body.error404 .ak-404{
  min-height: 80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 90px 16px;
  color: var(--text-on-light);
}

body.error404 .ak-404-inner{
  max-width: 720px;
}

/* 404 number */
body.error404 .ak-404-code{
  font-family: var(--font-heading);
  font-size: clamp(64px, 10vw, 120px);
  font-weight: 900;
  letter-spacing: -2px;
  margin-bottom: 8px;

  background-image: linear-gradient(90deg,
    var(--link-light) 0%,
    var(--yale-500) 42%,
    var(--amber) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

body.error404 .ak-404-title{
  font-family: var(--font-heading);
  font-size: clamp(22px, 3.4vw, 36px);
  font-weight: 900;
  margin: 0 0 10px;
  color: var(--text-on-light);
}

body.error404 .ak-404-text{
  margin: 0 auto 22px;
  max-width: 62ch;
  color: var(--muted-on-light);
  font-weight: 650;
  font-size: 1.05rem;
}

/* Buttons row */
body.error404 .ak-404-actions{
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* IMPORTANT: force anchors to look like buttons (your global link styles can flatten them) */
body.error404 .ak-404-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 16px;
  font-weight: 900;
  text-decoration:none !important;
  border: 2px solid transparent;

  transition: transform 140ms var(--ease),
              box-shadow 140ms var(--ease),
              background 140ms var(--ease),
              border-color 140ms var(--ease);
}

/* Primary */
body.error404 .ak-404-actions a.primary{
  background: var(--warm-gradient);
  color: #041221;
  border-color: rgba(0,0,0,.12);
  box-shadow: none;
}
body.error404 .ak-404-actions a.primary:hover{
  background: linear-gradient(90deg, #4292c3 0%, #f59e0b 100%);
  transform: translateY(-2px);
}

/* Secondary */
body.error404 .ak-404-actions a.secondary{
  background: rgba(4,18,33,.04);
  color: var(--text-on-light);
  border-color: rgba(4,18,33,.18);
}
body.error404 .ak-404-actions a.secondary:hover{
  background: rgba(4,18,33,.08);
  border-color: rgba(0,64,108,.22);
  transform: translateY(-2px);
}

/* Popular links */
body.error404 .ak-404-links{
  margin-top: 22px;
  font-size: .95rem;
  color: rgba(4,18,33,.70);
}
body.error404 .ak-404-links a{
  color: var(--link-light);
  font-weight: 900;
  margin: 0 6px;
  text-decoration:none;
}
body.error404 .ak-404-links a:hover{
  color: var(--link-light-hover);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Forced colors */
@media (forced-colors: active){
  body.error404 .ak-404-code{
    background-image:none !important;
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
  }
}

body.light-mode,
body.is-light-theme,
body:not(.dark-mode):not(.is-dark-theme){
  --ak-bg-page:#f4f8fc;
  --ak-bg-surface:#ffffff;
  --ak-bg-subtle:#edf4fa;
  --ak-bg-header:rgba(255,255,255,.96);
  --ak-bg-footer:#edf3f9;
  --ak-border:#c8d5e3;
  --ak-border-strong:#96adbf;
  --ak-text-primary:#111827;
  --ak-text-secondary:#27384b;
  --ak-text-muted:#425a72;
  --ak-link:#0f5f88;
  --ak-button-text:#052335;
  --ak-ghost-text:#0f4d70;
  --ak-ghost-bg:transparent;
  --ak-card-shadow:0 14px 34px rgba(15,23,42,.10);
  --text:#111827;
  --text-strong:#111827;
  --muted:#27384b;
  --muted-2:#425a72;
  --border:#c8d5e3;
}

body.dark-mode,
body.is-dark-theme{
  --ak-bg-page:#0b1220;
  --ak-bg-surface:#121b2a;
  --ak-bg-subtle:#182537;
  --ak-bg-header:rgba(11,18,32,.96);
  --ak-bg-footer:#0f1726;
  --ak-border:#2f425a;
  --ak-border-strong:#5e7d9c;
  --ak-text-primary:#f8fafc;
  --ak-text-secondary:#e1e9f2;
  --ak-text-muted:#c1cfdd;
  --ak-link:#92dcfb;
  --ak-button-text:#042638;
  --ak-ghost-text:#d9f4ff;
  --ak-ghost-bg:rgba(255,255,255,.03);
  --ak-card-shadow:0 18px 44px rgba(0,0,0,.42);
}

body{
  background: var(--ak-bg-page) !important;
  color: var(--ak-text-primary) !important;
}

.entry-content,
.wp-caption-text{
  color: var(--ak-text-secondary) !important;
}

a:not(.btn):not(.wp-block-button__link){
  color: var(--ak-link);
}

.section-light,
.ak-v3,
.ak-guide,
.ak-v3 .section,
.ak-v3 .section.hero{
  background-image:
    radial-gradient(900px 520px at 20% 12%, rgba(66,146,195,.18), rgba(66,146,195,0) 62%),
    radial-gradient(720px 520px at 72% 20%, rgba(14,165,233,.16), rgba(14,165,233,0) 60%),
    linear-gradient(180deg, var(--ak-bg-page) 0%, var(--ak-bg-surface) 100%) !important;
  color: var(--ak-text-primary) !important;
}

.section-dark,
.hero.section-dark{
  background-image:
    radial-gradient(900px 560px at 20% 12%, rgba(14,165,233,.20), rgba(14,165,233,0) 62%),
    radial-gradient(760px 540px at 78% 18%, rgba(245,204,0,.14), rgba(245,204,0,0) 60%),
    linear-gradient(180deg, #06090f 0%, #0b1220 100%) !important;
  color: #f8fafc !important;
}

/* Widget Dark Contrast: remove decorative section gradients and keep content AA-readable */
html[data-ak-contrast="dark"] .section-dark,
body[data-ak-contrast="dark"] .section-dark,
html[data-ak-contrast="dark"] .section-light,
body[data-ak-contrast="dark"] .section-light,
html[data-ak-contrast="dark"] .ak-v3,
body[data-ak-contrast="dark"] .ak-v3,
html[data-ak-contrast="dark"] .ak-guide,
body[data-ak-contrast="dark"] .ak-guide,
html[data-ak-contrast="dark"] .ak-v3 .section,
body[data-ak-contrast="dark"] .ak-v3 .section,
html[data-ak-contrast="dark"] .ak-v3 .section.hero,
body[data-ak-contrast="dark"] .ak-v3 .section.hero,
html[data-ak-contrast="dark"] .ak-guide-hero,
body[data-ak-contrast="dark"] .ak-guide-hero{
  background-image: none !important;
  background: #020617 !important;
  color: #f8fafc !important;
}

html[data-ak-contrast="dark"] .section-dark .card,
body[data-ak-contrast="dark"] .section-dark .card,
html[data-ak-contrast="dark"] .section-light .card,
body[data-ak-contrast="dark"] .section-light .card,
html[data-ak-contrast="dark"] .ak-v3 .card,
body[data-ak-contrast="dark"] .ak-v3 .card,
html[data-ak-contrast="dark"] .ak-guide .card,
body[data-ak-contrast="dark"] .ak-guide .card{
  background: #0f172a !important;
  border-color: rgba(148,163,184,.55) !important;
  color: #e2e8f0 !important;
}

html[data-ak-contrast="dark"] .section-dark .card p,
body[data-ak-contrast="dark"] .section-dark .card p,
html[data-ak-contrast="dark"] .section-light .card p,
body[data-ak-contrast="dark"] .section-light .card p,
html[data-ak-contrast="dark"] .section-dark .card li,
body[data-ak-contrast="dark"] .section-dark .card li,
html[data-ak-contrast="dark"] .section-light .card li,
body[data-ak-contrast="dark"] .section-light .card li{
  color: #e2e8f0 !important;
}

html[data-ak-contrast="dark"] .offer-wrap,
body[data-ak-contrast="dark"] .offer-wrap,
html[data-ak-contrast="dark"] .offer-form,
body[data-ak-contrast="dark"] .offer-form,
html[data-ak-contrast="dark"] .ak-v3 .mock-box,
body[data-ak-contrast="dark"] .ak-v3 .mock-box,
html[data-ak-contrast="dark"] .ak-v3 .price-card,
body[data-ak-contrast="dark"] .ak-v3 .price-card,
html[data-ak-contrast="dark"] .ak-v3 .faq-item,
body[data-ak-contrast="dark"] .ak-v3 .faq-item,
html[data-ak-contrast="dark"] details,
body[data-ak-contrast="dark"] details,
html[data-ak-contrast="dark"] .ak-guide .step-card,
body[data-ak-contrast="dark"] .ak-guide .step-card,
html[data-ak-contrast="dark"] .ak-guide .ak-guide-article,
body[data-ak-contrast="dark"] .ak-guide .ak-guide-article,
html[data-ak-contrast="dark"] .ak-guide .ak-guide-toc,
body[data-ak-contrast="dark"] .ak-guide .ak-guide-toc{
  background-image: none !important;
  background: #0f172a !important;
  border-color: rgba(148,163,184,.55) !important;
  color: #e2e8f0 !important;
}

html[data-ak-contrast="dark"] .offer-wrap p,
body[data-ak-contrast="dark"] .offer-wrap p,
html[data-ak-contrast="dark"] .offer-form p,
body[data-ak-contrast="dark"] .offer-form p,
html[data-ak-contrast="dark"] .ak-v3 .card p,
body[data-ak-contrast="dark"] .ak-v3 .card p,
html[data-ak-contrast="dark"] .ak-v3 .price-card p,
body[data-ak-contrast="dark"] .ak-v3 .price-card p,
html[data-ak-contrast="dark"] .ak-v3 .faq-body,
body[data-ak-contrast="dark"] .ak-v3 .faq-body,
html[data-ak-contrast="dark"] .ak-guide p,
body[data-ak-contrast="dark"] .ak-guide p,
html[data-ak-contrast="dark"] .ak-guide li,
body[data-ak-contrast="dark"] .ak-guide li{
  color: #e2e8f0 !important;
}

html[data-ak-contrast="dark"] .icon,
body[data-ak-contrast="dark"] .icon,
html[data-ak-contrast="dark"] .ak-v3 .icon-wrap,
body[data-ak-contrast="dark"] .ak-v3 .icon-wrap,
html[data-ak-contrast="dark"] .pill,
body[data-ak-contrast="dark"] .pill,
html[data-ak-contrast="dark"] .offer-kicker,
body[data-ak-contrast="dark"] .offer-kicker{
  background: #111827 !important;
  border-color: rgba(148,163,184,.6) !important;
  color: #e2e8f0 !important;
}

html[data-ak-contrast="dark"] .input,
body[data-ak-contrast="dark"] .input,
html[data-ak-contrast="dark"] input:not([type="checkbox"]):not([type="radio"]),
body[data-ak-contrast="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-ak-contrast="dark"] textarea,
body[data-ak-contrast="dark"] textarea,
html[data-ak-contrast="dark"] select,
body[data-ak-contrast="dark"] select{
  background: #111827 !important;
  border-color: rgba(148,163,184,.65) !important;
  color: #f8fafc !important;
}

html[data-ak-contrast="dark"] .input::placeholder,
body[data-ak-contrast="dark"] .input::placeholder,
html[data-ak-contrast="dark"] input::placeholder,
body[data-ak-contrast="dark"] input::placeholder,
html[data-ak-contrast="dark"] textarea::placeholder,
body[data-ak-contrast="dark"] textarea::placeholder{
  color: #cbd5e1 !important;
}

html[data-ak-contrast="dark"] .btn-ghost,
body[data-ak-contrast="dark"] .btn-ghost,
html[data-ak-contrast="dark"] .btn-outline,
body[data-ak-contrast="dark"] .btn-outline{
  background: transparent !important;
  border-color: rgba(148,163,184,.75) !important;
  color: #f8fafc !important;
}

html[data-ak-contrast="dark"] .btn-primary,
body[data-ak-contrast="dark"] .btn-primary{
  background: #0ea5b7 !important;
  border-color: #14b8a6 !important;
  color: #061826 !important;
}

header.ak-header,
.site-header.ak-header,
header{
  background: var(--ak-bg-header);
  border-bottom: 1px solid var(--ak-border);
  backdrop-filter: blur(12px);
}

.brand-logo-wrap{
  display: inline-flex;
  align-items: center;
  min-height: 50px;
}

.brand-logo{
  display: block;
  width: auto;
  height: 30px;
  filter: drop-shadow(0 1px 2px rgba(15,23,42,.1));
}

.menu{
  background: var(--ak-bg-surface);
  border-color: var(--ak-border);
  box-shadow: none;
}

.menu .group{
  color: var(--ak-text-secondary);
}

.menu a{
  color: var(--ak-text-primary);
}

.menu a:hover{
  background: var(--ak-bg-subtle);
}

.theme-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--ak-border-strong);
  background: transparent;
  color: inherit;
  transition: border-color 140ms var(--ease), transform 140ms var(--ease);
}

.theme-toggle:hover{
  border-color: var(--ak-border-strong);
  transform: translateY(-1px);
}

.theme-toggle-track{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--ak-bg-subtle);
  transition: background 140ms var(--ease);
}

.theme-toggle-thumb{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: none;
  transition: transform 160ms var(--ease), background 160ms var(--ease);
}

body.dark-mode .theme-toggle-track,
body.is-dark-theme .theme-toggle-track{
  background: var(--ak-brand-gradient);
}

body.dark-mode .theme-toggle-thumb,
body.is-dark-theme .theme-toggle-thumb{
  transform: translateX(24px);
  background: #f8fbff;
}

.offer-form,
.offer-wrap,
.ak-guide .ak-guide-article,
.ak-guide .ak-guide-toc{
  background: var(--ak-bg-surface) !important;
  border-color: var(--ak-border) !important;
  box-shadow: none;
}

@media (max-width: 760px){
  .brand-logo-wrap{
    min-height: 40px;
  }
  .brand-logo{
    height: 30px;
    width: auto;
    max-width: 170px;
  }
  .theme-toggle{
    width: 52px;
    height: 30px;
  }
}

/* Final polish: no shadows + cleaner banner/slider surfaces */
.btn,
.wp-block-button__link,
.menu,
.hero-visual,
.offer-wrap,
.offer-form,
.card,
.icon,
.theme-toggle-thumb,
.ak-v3 .mock-box,
.ak-v3 .card,
.ak-v3 .price-card,
.ak-v3 .logo-item,
.ak-v3 .stats-bar,
.ak-v3 .stat-item,
.ak-v3 .faq-item,
.ak-v3 .ak-price-tabs,
.ak-v3 .pricing-tab,
.ak-guide .ak-guide-toc,
.ak-guide .ak-guide-article,
.ak-guide .step-card,
.ak-figure,
.ak-codeblock{
  box-shadow: none;
}

.hero-visual,
.offer-form{
  background: var(--ak-bg-surface) !important;
  border-color: var(--ak-border) !important;
}

.hero-visual .img,
.ak-platform-ico img{
  filter: none !important;
}

.ak-v3 .faq-q,
summary{
  color: var(--ak-text-primary) !important;
}

.ak-v3 .faq-item.is-open .faq-panel,
details[open]{
  background: var(--ak-secondary-bg) !important;
  border-color: var(--ak-secondary-border) !important;
}

.ak-v3 .ak-v3-cta{
  background: var(--cta-grad) !important;
  border-radius: 40px;
  padding: 80px 40px;
  text-align: center;
  color: #f8fbff !important;
}

.ak-v3 .ak-v3-cta p,
.ak-v3 .ak-v3-cta li{
  color: rgba(239,249,255,.92) !important;
}

/* Global tag color consistency for light/dark mode */
body.light-mode,
body.is-light-theme,
body:not(.dark-mode):not(.is-dark-theme){
  --ak-tag-primary: #111827;
  --ak-tag-secondary: #27384b;
  --ak-tag-muted: #425a72;
}

body.dark-mode,
body.is-dark-theme{
  --ak-tag-primary: #f8fafc;
  --ak-tag-secondary: #e1e9f2;
  --ak-tag-muted: #c1cfdd;
}

.ak-guide :where(
  div,p,span,ul,ol,li,dl,dt,dd,
  small,strong,em,b,i,u,mark,
  blockquote,cite,address,
  code,kbd,samp,pre,
  label,legend,caption,figcaption,
  th,td,summary,time
):not(.btn):not(.btn *):not(.wp-block-button__link):not(.wp-block-button__link *){
  color: var(--ak-tag-secondary) !important;
}

.ak-guide :where(h4,h5,h6){
  color: var(--ak-tag-primary) !important;
}

.ak-guide :where(p,li,dd,figcaption,caption,small,cite,address){
  color: var(--ak-tag-secondary) !important;
}

.ak-guide :where(code,kbd,samp,pre){
  color: var(--ak-tag-primary) !important;
}

.ak-guide :where(ul,ol){
  color: var(--ak-tag-secondary) !important;
}

.ak-guide :where(ul li)::marker,
.ak-guide :where(ol li)::marker{
  color: var(--ak-tag-muted) !important;
}

/* =========================================================
   REDESIGN PACK — Mobile Menu, Hero, Marquee/Logos, Buttons
   Yellow accent + layout improvements
========================================================= */

/* --------------------------------------------------
   D) .btn-ghost — white ghost on dark/hero backgrounds
-------------------------------------------------- */

.ak-guide-hero .btn-ghost,
.hero .btn-ghost{
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.28) !important;
}

.ak-guide-hero .btn-ghost:hover,
.hero .btn-ghost:hover{
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.48) !important;
  filter: none !important;
}

/* ================================================================
   ACCESSIKEY — BRAND + WCAG AA/AAA PATCH
   Fixes: brand colors (sky #0ea5e9 + yellow #f59e0b), H1-H4
   WCAG AA/AAA contrast, keyboard/ARIA/focus, mobile menu,
   button text visibility, step-card-dark, pre.ak-code,
   btn-outline, code blocks.
   APPEND after existing style.css.
================================================================ */

/* ═══════════════════════════════════════════════════════════════
   1. BRAND DESIGN TOKENS — Sky #0ea5e9 + Yellow #f59e0b
   All teal/old-green aliases overridden here.
═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Primary brand palette ── */
  --ak-sky:             #0ea5e9;   /* Sky blue — primary brand */
  --ak-sky-dark:        #0284c7;   /* Darker sky for hover */
  --ak-sky-light:       #38bdf8;   /* Lighter sky */
  --ak-navy:            #1e3a8a;   /* Deep navy — secondary brand */
  --ak-navy-mid:        #1e40af;   /* Mid navy */

  /* ── Yellow accent ── */
  --ak-yellow:          #f59e0b;   /* Amber/yellow primary */
  --ak-yellow-light:    #fbbf24;   /* Lighter yellow */
  --ak-yellow-bright:   #fde047;   /* Bright yellow for callouts */
  --ak-yellow-dark:     #b45309;   /* Dark amber for hover/contrast */
  --ak-yellow-soft:     rgba(245,158,11,.12);
  --ak-yellow-border:   rgba(245,158,11,.38);

  /* ── Gradient tokens ── */
  --ak-brand-gradient:  linear-gradient(135deg, #0ea5e9 0%, #1e3a8a 100%);
  --ak-sky-yellow:      linear-gradient(135deg, #0ea5e9 0%, #f59e0b 100%);
  --ak-yellow-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --ak-hero-gradient:   linear-gradient(135deg, #0ea5e9 0%, #1e3a8a 40%, #f59e0b 100%);
  --ak-grad:            linear-gradient(135deg, #0ea5e9, #1e3a8a);
  --ak-grad-h:          linear-gradient(90deg, #0ea5e9, #1e3a8a);

  /* Override legacy teal aliases */
  --warm-gradient:   var(--ak-brand-gradient);
  --gold-bronze:     #0ea5e9;
  --sunrise:         #0ea5e9;
  --sunburst:        #1e3a8a;
  --amber:           #f59e0b;
  --yale-500:        #0ea5e9;
  --yale-450:        #0284c7;

  /* ── WCAG-compliant text on backgrounds ── */
  /* All ratio: measured against actual backgrounds */
  --ak-text-primary:   #ffffff;          /* 21:1 on dark bg */
  --ak-text-secondary: rgba(255,255,255,.88); /* ~15:1 on dark */
  --ak-text-muted:     rgba(255,255,255,.68); /* ~8:1 on dark */

  /* Light mode text */
  --ak-text-on-light:      #0f172a;  /* 17:1 on white */
  --ak-text-muted-on-light:#374151;  /* 9:1 on white — AA+ */
  --ak-text-link-on-light: #0369a1;  /* 5.8:1 on white — AA */

  /* ── Surface tokens ── */
  --ak-bg-header:    rgba(3,6,12,.97);
  --ak-bg-surface:   rgba(5,10,24,.96);
  --ak-bg-subtle:    rgba(14,165,233,.10);
  --ak-border:       rgba(14,165,233,.16);

  /* ── Focus ring token ── */
  --ak-focus-ring: 0 0 0 3px #ffffff, 0 0 0 6px #0ea5e9;
}

/* ── Dark mode tokens ── */
body.dark-mode,
body.is-dark-theme {
  --ak-bg-header:    rgba(3,6,12,.98);
  --ak-bg-surface:   rgba(8,14,28,.97);
  --ak-bg-subtle:    rgba(14,165,233,.12);
  --ak-border:       rgba(14,165,233,.18);
  --ak-text-primary: #f1f5f9;
  --ak-secondary-bg: linear-gradient(135deg, rgba(14,165,233,.20), rgba(30,58,138,.18));
  --ak-secondary-border: rgba(14,165,233,.42);
  --ak-secondary-text:   #e8f4ff;
  --ak-card-brand-bg:    linear-gradient(160deg, rgba(14,165,233,.12), rgba(30,58,138,.10));
  --ak-card-brand-border: rgba(14,165,233,.26);
}

/* ── Light mode tokens ── */
body.light-mode,
body.is-light-theme,
body:not(.dark-mode):not(.is-dark-theme) {
  --ak-bg-header:    rgba(3,6,12,.97);
  --ak-bg-surface:   #ffffff;
  --ak-bg-subtle:    rgba(14,165,233,.07);
  --ak-border:       rgba(14,165,233,.18);
  --ak-text-primary: #0f172a;
  --ak-secondary-bg: linear-gradient(135deg, rgba(14,165,233,.10), rgba(30,58,138,.08));
  --ak-secondary-border: rgba(14,165,233,.30);
  --ak-secondary-text:   #0c3b6e;
  --ak-card-brand-bg:    linear-gradient(160deg, rgba(14,165,233,.07), rgba(30,58,138,.05));
  --ak-card-brand-border: rgba(14,165,233,.20);
}


/* ═══════════════════════════════════════════════════════════════
   3. KEYBOARD / ARIA / FOCUS — WCAG 2.4.7 + 2.4.11
═══════════════════════════════════════════════════════════════ */

/* ── Global focus reset: never invisible ── */
:focus { outline: none; }

/* ── Visible focus ring on any keyboard-focusable element ── */
:focus-visible {
  outline: 3px solid #f59e0b !important;   /* yellow — AA+ on dark & light bg */
  outline-offset: 3px !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 6px rgba(245,158,11,.22) !important;
}

/* Button / pill — rounded ring */
.btn:focus-visible,
.wp-block-button__link:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible {
  outline: 3px solid #f59e0b !important;
  outline-offset: 3px !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 6px rgba(245,158,11,.22) !important;
}

/* Nav links */
.nav-link:focus-visible,
.nav-drop-btn:focus-visible {
  outline: 3px solid #f59e0b !important;
  outline-offset: 2px !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 5px rgba(245,158,11,.20) !important;
}

/* Mobile links */
.mobile-panel a:focus-visible,
.mobile-acc-btn:focus-visible {
  outline: 3px solid #f59e0b !important;
  outline-offset: -2px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* Form inputs */
.input:focus,
.input:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #0ea5e9 !important;
  outline-offset: 0 !important;
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 4px rgba(14,165,233,.20) !important;
}

/* Cards / TOC links */
.ak-guide-toc-link:focus-visible {
  outline: 3px solid #f59e0b !important;
  outline-offset: -2px !important;
  border-radius: 14px !important;
}

/* Skip link (already screen-reader-text, shows on focus) */
.skip-link:focus,
.skip-link.screen-reader-text:focus {
  clip-path: none !important;
  height: auto !important;
  width: auto !important;
  position: fixed !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 99999 !important;
  background: #f59e0b !important;
  color: #0f172a !important;
  border: 2px solid #0f172a !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-weight: 800 !important;
  font-size: .9rem !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.40) !important;
  outline: 3px solid #0ea5e9 !important;
  outline-offset: 3px !important;
}

/* ── Interactive states ── */
/* Hover animation — lift + color shift */
.btn:not(:disabled):hover,
.wp-block-button__link:hover {
  transform: translateY(-2px) !important;
}
.btn:not(:disabled):active,
.wp-block-button__link:active {
  transform: translateY(0) scale(0.97) !important;
}

/* Nav link hover */
.nav-link:hover {
  background: rgba(245,158,11,.12) !important;
  border-color: rgba(245,158,11,.30) !important;
  color: #fde047 !important;
  text-decoration: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   7. .lead — WCAG text contrast fix
═══════════════════════════════════════════════════════════════ */
.lead {
  font-size: clamp(16px, 2vw, 18px) !important;
  line-height: 1.76 !important;
  max-width: 70ch !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  background: none !important;
  background-image: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}
/* Dark context */
.hero .lead,
.ak-guide-hero .lead,
.cta .lead {
  color: rgba(241,245,249,.80) !important;
  -webkit-text-fill-color: rgba(241,245,249,.80) !important;
}
/* Light context */
.section-light .lead,
.ak-guide .lead,
body.light-mode .lead {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}
/* Paragraphs inside .lead inherit */
.lead p {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
  background: none !important;
  background-image: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}


/* ═══════════════════════════════════════════════════════════════
   8. CODE BLOCK — pre.ak-code
   Text contrast + keyboard accessible copy button
═══════════════════════════════════════════════════════════════ */
pre,
pre.ak-code,
.ak-codeblock pre {
  background: #050d1a !important;
  color: #e2f0ff !important;            /* ~14:1 on bg */
  border: 1px solid rgba(14,165,233,.22) !important;
  border-radius: 14px !important;
  padding: var(--s4, 16px) !important;
  font-size: .88rem !important;
  line-height: 1.72 !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  tab-size: 2 !important;
  margin: 0 0 1rem !important;
}
pre.ak-code {
  /* Inherits above; add scrollbar style */
  scrollbar-width: thin !important;
  scrollbar-color: rgba(14,165,233,.30) transparent !important;
}
pre.ak-code::-webkit-scrollbar {
  height: 6px;
}
pre.ak-code::-webkit-scrollbar-track { background: transparent; }
pre.ak-code::-webkit-scrollbar-thumb {
  background: rgba(14,165,233,.30);
  border-radius: 999px;
}
pre.ak-code:focus-visible {
  outline: 3px solid #f59e0b !important;
  outline-offset: 2px !important;
}


/* ═══════════════════════════════════════════════════════════════
   9. STEP-CARD-DARK — fix text contrast
═══════════════════════════════════════════════════════════════ */
.step-card-dark,
.ak-guide .step-card.step-card-dark {
  background:
    radial-gradient(560px 260px at 18% 8%, rgba(14,165,233,.26), transparent 58%),
    radial-gradient(480px 240px at 85% 20%, rgba(245,158,11,.18), transparent 56%),
    linear-gradient(160deg, #0c1f3d 0%, #060e1e 100%) !important;
  border: 1px solid rgba(14,165,233,.28) !important;
  border-radius: 18px;
}

.step-card-dark h4,
.ak-guide .step-card.step-card-dark h4 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  background-image: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}

.step-card-dark div,
.step-card-dark p,
.ak-guide .step-card.step-card-dark div,
.ak-guide .step-card.step-card-dark p {
  color: rgba(226,240,255,.88) !important;
  -webkit-text-fill-color: rgba(226,240,255,.88) !important;
}

/* ═══════════════════════════════════════════════════════════════
   10. ak-guide-hero — full color system
═══════════════════════════════════════════════════════════════ */
.ak-guide-hero {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(52px, 8vw, 80px) 0 clamp(44px, 6vw, 64px) !important;
  color: #ffffff !important;
  background:
    radial-gradient(1000px 560px at 22% 20%, rgba(14,165,233,.24), transparent 55%),
    radial-gradient(700px 480px at 76% 16%, rgba(245,158,11,.14), transparent 53%),
    linear-gradient(180deg, #03060c 0%, #060b18 100%) !important;
}
.ak-guide-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  background:
    linear-gradient(90deg, rgba(3,6,12,.60) 0%, rgba(3,6,12,.38) 100%),
    var(--ak-hero-bg, none) !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: .24 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.ak-guide-hero-inner {
  position: relative !important;
  z-index: 1 !important;
}
.ak-guide-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: fit-content !important;
  padding: 8px 14px !important;
  margin: 0 0 16px !important;
  border: 1px solid rgba(14,165,233,.32) !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  background: rgba(14,165,233,.14) !important;
  border-color: rgba(14,165,233,.32) !important;
  color: rgba(255,255,255,.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
}
.ak-guide-kicker .dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  background: linear-gradient(135deg, #0ea5e9 0%, #f59e0b 100%) !important;
  animation: ak-dot-pulse 2.4s ease-in-out infinite !important;
}
@keyframes ak-dot-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(.76); }
}
.ak-guide-hero p,
.ak-guide-hero .lead,
.ak-guide-hero .lead p {
  color: rgba(255,255,255,.78) !important;
  -webkit-text-fill-color: rgba(255,255,255,.78) !important;
  background: none !important;
  background-image: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}
@media (max-width: 600px) {
  .ak-guide-hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .ak-guide-hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   11. PLATFORM MARQUEE — dual row (homepage sliding section)
═══════════════════════════════════════════════════════════════ */
@keyframes akPlatformScrollFwd{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
@keyframes akPlatformScrollRev{
  0%{ transform: translateX(-50%); }
  100%{ transform: translateX(0); }
}

.ak-platform{
  position: relative;
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 100px;
}

/* Keep platform section on clean dark/blue surface (no warm/yellow tint). */
.section-dark.ak-platform{
  background-image:
    radial-gradient(900px 560px at 20% 12%, rgba(14,165,233,.20), rgba(14,165,233,0) 62%),
    linear-gradient(180deg, #06090f 0%, #0b1220 100%) !important;
}

.ak-platform::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 400px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(14,165,233,.10) 0%, rgba(14,165,233,0) 70%);
  pointer-events: none;
}

.ak-platform .container{
  position: relative;
  z-index: 1;
}

.ak-platform-head{
  text-align: center;
  margin-bottom: 52px;
}

.ak-platform-head h2{
  margin: 0;
}

.ak-platform-line{
  width: 48px;
  height: 2px;
  border-radius: 2px;
  margin: 18px auto 0;
  background: var(--ak-sky);
}

.ak-platform-marquee-wrap{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ak-platform-marquee-wrap + .ak-platform-marquee-wrap{
  margin-top: 14px;
}

.ak-platform-track{
  display: flex;
  width: max-content;
  gap: 0;
  will-change: transform;
}

.ak-platform-track-fwd{
  animation: akPlatformScrollFwd 36s linear infinite;
}

.ak-platform-track-rev{
  animation: akPlatformScrollRev 40s linear infinite;
}

.ak-platform-marquee-wrap:hover .ak-platform-track{
  animation-play-state: paused;
}

.ak-platform-item{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 7px;
  min-width: 220px;
  padding: 16px 22px;
  border-radius: 60px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

.ak-platform-item:hover{
  transform: scale(1.04);
  border-color: rgba(14,165,233,.25);
  background: rgba(251 251 251 / 3%);
  box-shadow: 0 0 30px rgba(14,165,233,.12);
}

.ak-platform-ico{
  width: 72px;
  height: 46px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  padding: 4px;
  overflow: hidden;
}

.ak-platform-ico img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.ak-platform-name{
  font-family: var(--ak-type-heading);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(248,250,252,.86);
  transition: color .3s ease;
}

.ak-platform-item:hover .ak-platform-name{
  color: var(--ak-sky);
}

body:not(.dark-mode):not(.is-dark-theme) .ak-platform-item{
  background: rgba(15,23,42,.03);
  border-color: rgba(15,23,42,.10);
}

body:not(.dark-mode):not(.is-dark-theme) .ak-platform-ico{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.10);
}

body:not(.dark-mode):not(.is-dark-theme) .section-light .ak-platform-name{
  color: rgba(15,23,42,.78);
}

@media (max-width: 768px){
  .ak-platform{
    padding-top: 64px;
    padding-bottom: 80px;
  }

  .ak-platform-item{
    min-width: 170px;
    padding: 12px 16px;
    gap: 10px;
  }

  .ak-platform-ico{
    width: 56px;
    height: 36px;
    padding: 3px;
  }

  .ak-platform-ico img{
    width: 100%;
    height: 100%;
  }

  .ak-platform-name{
    font-size: .72rem;
  }
}


/* ═══════════════════════════════════════════════════════════════
   12. YELLOW ACCENT — sprinkled through sections
═══════════════════════════════════════════════════════════════ */
/* Eyebrow pill */
.eyebrow {
  background: rgba(245,158,11,.12) !important;
  border-color: rgba(245,158,11,.32) !important;
  color: rgba(255,255,255,.92) !important;
}
/* Dot */
.dot {
  background: linear-gradient(135deg, #0ea5e9 0%, #f59e0b 100%) !important;
}
/* Guide TOC active */
.ak-guide-toc-link[aria-current="true"] {
  background: rgba(14,165,233,.10) !important;
  border-color: rgba(14,165,233,.28) !important;
}
.ak-guide-toc-link[aria-current="true"] .ak-guide-pill {
  background: rgba(245,158,11,.18) !important;
  border-color: rgba(245,158,11,.36) !important;
  color: #7c3f00 !important;
}
/* FAQ open */
details[open] > summary,
.faq-item.is-open .faq-q { color: #0ea5e9 !important; }
/* CTA section */
.cta {
  background:
    radial-gradient(720px 360px at 18% 10%, rgba(14,165,233,.12), transparent 58%),
    radial-gradient(600px 320px at 82% 90%, rgba(245,158,11,.10), transparent 55%),
    rgba(3,6,12,.44) !important;
  border-top-color:    rgba(245,158,11,.14) !important;
  border-bottom-color: rgba(245,158,11,.14) !important;
}
/* ═══════════════════════════════════════════════════════════════
   14. DARK / LIGHT mode card surface
═══════════════════════════════════════════════════════════════ */
body.dark-mode .card,
body.is-dark-theme .card {
  background: linear-gradient(160deg, rgba(14,165,233,.08), rgba(14,165,233,.02)) !important;
  border-color: rgba(14,165,233,.18) !important;
}
body.light-mode .card,
body.is-light-theme .card {
  background: #ffffff !important;
  border-color: rgba(14,165,233,.18) !important;
}
body.light-mode .card p,
body.is-light-theme .card p { color: #374151 !important; }
body.light-mode .card h3,
body.is-light-theme .card h3 {
  background: none !important;
  background-image: none !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}


/* ═══════════════════════════════════════════════════════════════
   15. REDUCE MOTION — must be last
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .ak-platform-track  { animation: none !important; }
  .dot                { animation: none !important; }
  .ak-guide-kicker .dot { animation: none !important; }
  .btn:hover, .card:hover, .ak-platform-item:hover { transform: none !important; }
}

/* =========================================================
   HEADER MOBILE MENU PARITY (match requested design)
========================================================= */
:root{
  --ak-header-yellow:#f5cc00;
  --ak-header-yellow-2:#ffd84d;
  --ak-header-dark:#070a10;
  --ak-header-dark-2:#0b0f16;
  --ak-header-panel:rgba(3,6,12,.98);
  --ak-header-text:#ffffff;
  --ak-header-muted:rgba(255,255,255,.78);
  --ak-header-line:rgba(255,255,255,.10);
  --ak-header-shadow:0 20px 50px rgba(0,0,0,.35);
  --ak-header-focus:0 0 0 3px rgba(245,204,0,.35);
}

.ak-header .container.nav{
  max-width:1200px !important;
  margin:0 auto !important;
  padding:0 16px !important;
}

.ak-header{
  position:sticky !important;
  top:0 !important;
  z-index:999 !important;
  background:linear-gradient(180deg,var(--ak-header-dark-2),var(--ak-header-dark)) !important;
  border-bottom:1px solid var(--ak-header-line) !important;
  backdrop-filter:saturate(120%) blur(6px) !important;
}

.ak-header .nav{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  min-height:72px !important;
  gap:14px !important;
}

.brand{
  display:inline-flex !important;
  align-items:center !important;
  gap:12px !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  color:#fff !important;
  min-width:0 !important;
  flex:0 0 auto !important;
}

.nav-row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  width:100% !important;
  margin-left:auto !important;
}

.primary{
  display:none !important;
  align-items:center !important;
  gap:10px !important;
}

.primary > .nav-link,
.primary > .drop > .nav-drop-btn{
  height:42px !important;
  padding:0 12px !important;
  border-radius:10px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  color:var(--ak-header-text) !important;
  text-decoration:none !important;
  font-weight:600 !important;
  font-size:14px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
}
.ak-header .nav-drop-btn{
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
}

.primary > .nav-link:hover,
.primary > .drop > .nav-drop-btn:hover{
  background:rgba(255,255,255,.05) !important;
  border-color:rgba(255,255,255,.08) !important;
}
.ak-header .nav-drop-btn:hover,
.ak-header .nav-drop-btn:focus-visible{
  color:#fde047 !important;
  -webkit-text-fill-color:#fde047 !important;
}

.drop{ position:relative !important; }
.drop .menu{
  position:absolute !important;
  top:calc(100% + 8px) !important;
  left:0 !important;
  min-width:220px !important;
  background:#0f1520 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-top:2px solid rgba(245,204,0,.75) !important;
  border-radius:12px !important;
  box-shadow:var(--ak-header-shadow) !important;
  padding:8px !important;
}

.nav-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-left:6px !important;
}

.ak-header .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
  padding:0 14px !important;
  border-radius:12px !important;
  font-weight:700 !important;
  font-size:14px !important;
  line-height:1 !important;
}

.ak-header .btn.btn-ghost{
  background:rgba(255,255,255,.03) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important;
}
.ak-header .btn.btn-ghost:hover{
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(255,255,255,.20) !important;
}

.ak-header .btn.btn-primary{
  background:var(--ak-header-yellow) !important;
  color:#1b1b1b !important;
  border-color:#d6af00 !important;
  box-shadow:0 6px 16px rgba(245,204,0,.20) !important;
}
.ak-header .btn.btn-primary:hover{
  background:#ffd91a !important;
  border-color:#e0b800 !important;
  transform:translateY(-1px) !important;
}

.theme-toggle{
  width:46px !important;
  height:46px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.04) !important;
  color:#fff !important;
}
.theme-toggle-track{
  width:28px !important;
  height:16px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.16) !important;
}
.theme-toggle-thumb{
  top:2px !important;
  left:2px !important;
  width:12px !important;
  height:12px !important;
  border-radius:999px !important;
  background:var(--ak-header-yellow) !important;
  transition:transform .18s ease !important;
}
.theme-toggle[aria-pressed="true"] .theme-toggle-thumb{
  transform:translateX(12px) !important;
}

.burger{
  width:46px !important;
  height:46px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.04) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}
.burger[aria-expanded="true"] > .chev::before{
  top:7px !important;
  transform:rotate(45deg) !important;
}
.burger[aria-expanded="true"] > .chev > span{
  opacity:0 !important;
  transform:scaleX(.2) !important;
}
.burger[aria-expanded="true"] > .chev::after{
  top:7px !important;
  transform:rotate(-45deg) !important;
}

#akMobileMenu.mobile-panel{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:100% !important;
  width:auto !important;
  bottom:auto !important;
  background:var(--ak-header-panel) !important;
  border-top:2px solid rgba(245,204,0,.8) !important;
  border-bottom:1px solid var(--ak-header-line) !important;
  box-shadow:0 18px 36px rgba(0,0,0,.35) !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(-6px) !important;
  pointer-events:none !important;
  max-height:calc(100vh - 72px) !important;
  overflow:auto !important;
  padding:0 !important;
}
#akMobileMenu.mobile-panel[aria-hidden="false"]{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
  pointer-events:auto !important;
}
#akMobileMenu.mobile-panel .container{
  padding:12px 16px 16px !important;
  max-width:1200px !important;
  margin:0 auto !important;
}

.mobile-grid{
  display:grid !important;
  gap:8px !important;
}
.mobile-grid > a,
.mobile-acc-btn{
  min-height:52px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.02) !important;
  color:#fff !important;
  padding:0 14px !important;
  text-decoration:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  font-weight:600 !important;
  font-size:15px !important;
}
.mobile-grid > a:hover,
.mobile-acc-btn:hover{
  background:rgba(245,204,0,.08) !important;
  border-color:rgba(245,204,0,.22) !important;
}
.mobile-grid > a.current-menu-item,
.mobile-grid > a.active{
  background:rgba(245,204,0,.12) !important;
  border-color:rgba(245,204,0,.30) !important;
}

.mobile-acc-btn{
  cursor:pointer !important;
  width:100% !important;
  text-align:left !important;
}
.mobile-acc-btn .chev{
  width:8px !important;
  height:8px !important;
  border-right:2px solid rgba(255,255,255,.75) !important;
  border-bottom:2px solid rgba(255,255,255,.75) !important;
  border-top:0 !important;
  border-left:0 !important;
  transform:rotate(45deg) !important;
  margin-left:10px !important;
  flex:0 0 auto !important;
}
.mobile-acc-btn[aria-expanded="true"] .chev{
  transform:rotate(225deg) !important;
  border-color:var(--ak-header-yellow-2) !important;
}

.mobile-acc-panel{
  margin-top:-2px !important;
  margin-bottom:6px !important;
  padding:6px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-top:none !important;
  border-radius:0 0 12px 12px !important;
  background:rgba(255,255,255,.02) !important;
}
.mobile-acc-panel .sub{
  display:block !important;
  min-height:44px !important;
  padding:10px 12px !important;
  border-radius:10px !important;
  text-decoration:none !important;
  color:var(--ak-header-muted) !important;
  font-size:14px !important;
  font-weight:500 !important;
  border:1px solid transparent !important;
}
.mobile-acc-panel .sub:hover{
  background:rgba(245,204,0,.08) !important;
  border-color:rgba(245,204,0,.20) !important;
  color:#fff !important;
}
.mobile-acc-panel .sub[aria-current="page"]{
  background:rgba(245,204,0,.12) !important;
  border-color:rgba(245,204,0,.28) !important;
  color:#fff !important;
  font-weight:600 !important;
}

.mobile-cta-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  margin-top:8px !important;
  padding-top:8px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}
.mobile-cta-row .btn{
  min-height:48px !important;
  border-radius:12px !important;
  padding:0 10px !important;
}

.ak-header a:focus-visible,
.ak-header button:focus-visible{
  outline:none !important;
  box-shadow:var(--ak-header-focus) !important;
}

@media (min-width: 992px){
  .primary{ display:flex !important; }
  .burger{ display:none !important; }
  #akMobileMenu.mobile-panel{ display:none !important; }
}
@media (max-width: 991.98px){
  .nav-actions{ display:none !important; }
}
@media (max-width: 575.98px){
  .ak-header .container.nav{ padding:0 12px !important; }
  .ak-header .nav{ min-height:66px !important; gap:10px !important; }
  .brand-logo-wrap{ min-height:36px !important; }
  .brand-logo{
    height:26px !important;
    width:auto !important;
    max-width:148px !important;
  }
  .theme-toggle,
  .burger{ width:42px !important; height:42px !important; border-radius:10px !important; }
  #akMobileMenu.mobile-panel .container{ padding:10px 12px 14px !important; }
}

/* =========================================================
   ACCESSIKEY BRAND VISUAL ALIGNMENT (Requested palette/motion)
   Keep existing classes; only overrides visuals.
========================================================= */

@keyframes ak-fade-up{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:none; }
}
@keyframes ak-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
@keyframes ak-glow{
  0%,100%{ box-shadow:0 0 14px rgba(14,165,233,.28); }
  50%{ box-shadow:0 0 30px rgba(14,165,233,.52); }
}

.section-h2 span,
.grad-text{
  background: var(--ak-grad-h) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Header */
header,
header.ak-header,
.site-header{
  background: rgba(6,9,15,.88) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

/* Buttons */
.btn-primary,
.ak-btn-primary,
.wp-block-button.is-style-fill .wp-block-button__link{
  background: var(--ak-grad) !important;
  color: #ffffff !important;
  border-color: rgba(30,58,138,.36) !important;
  box-shadow: 0 6px 24px rgba(30,58,138,.34) !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.btn-primary:hover,
.ak-btn-primary:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 34px rgba(30,58,138,.48) !important;
  filter: brightness(1.02);
}

.btn-outline,
.btn-ghost,
.ak-btn-ghost,
.wp-block-button.is-style-outline .wp-block-button__link{
  color: rgba(255,255,255,.85) !important;
  border: 1.5px solid rgba(255,255,255,.18) !important;
  background: transparent !important;
  transition: transform .2s ease, border-color .2s ease, color .2s ease !important;
}
.btn-outline:hover,
.btn-ghost:hover,
.ak-btn-ghost:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  border-color: rgba(255,255,255,.4) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Cards */
.card,
.feature-card,
.ak-v3 .card,
.ak-v3 .price-card,
.ak-guide .step-card{
  border-radius: 24px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  animation: ak-fade-up .6s ease both;
}
.card:hover,
.feature-card:hover,
.card:focus-within,
.feature-card:focus-within,
.ak-v3 .card:hover,
.ak-v3 .card:focus-within,
.ak-v3 .price-card:hover,
.ak-v3 .price-card:focus-within,
.ak-guide .step-card:hover{
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 60px rgba(30,58,138,.12) !important;
  border-color: rgba(14,165,233,.3) !important;
}

.icon,
.ak-v3 .icon-wrap{
  background: var(--ak-grad) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(30,58,138,.25) !important;
  animation: ak-glow 3s ease-in-out infinite;
}
.card:hover .icon,
.card:focus-within .icon{
  transform: translateY(-2px) rotate(-4deg) scale(1.08) !important;
}

.hero-visual{
  animation: ak-float 6s ease-in-out infinite;
}

/* =========================================================
   TEMPLATE CSS CENTRALIZED (Login/Register/Flex/Home related)
========================================================= */

/* ---- Flexible Template (moved from Flexible Template.php) ---- */
  .ak-v3 .mock-header .dot{
    box-shadow: none;
  }
  .ak-v3 .mock-header .dot.ak-ui-dot-1{ background: #2f7ea8 !important; }
  .ak-v3 .mock-header .dot.ak-ui-dot-2{ background: #4292c3 !important; }
  .ak-v3 .mock-header .dot.ak-ui-dot-3{ background: #f59e0b !important; }

  .ak-v3 .icon-wrap svg,
  .ak-v3 .icon-wrap img,
  .ak-v3 .icon-wrap i,
  .ak-v3 .icon-wrap span{
    width: 22px;
    height: 22px;
    display: block;
    font-size: 22px;
    line-height: 1;
  }
  .ak-v3 .icon-wrap .dashicons{
    width: 22px;
    height: 22px;
    font-size: 22px;
    line-height: 22px;
  }
  .ak-v3 .eyebrow .ak-eyebrow-icn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    transform: translateY(1px);
  }
/* ---- Flexible Sidebar Template (moved from Flexible Templaate with Sidebar.php) ---- */
  .ak-guide-main{
    background: var(--ak-bg-page, #f4f8fc) !important;
    color: var(--ak-text-primary, #111827) !important;
  }
  .ak-guide-article section[id]{ scroll-margin-top:110px; }
  @media (max-width:980px){ .ak-guide-article section[id]{ scroll-margin-top:90px; } }

  /* ✅ FIX: when sidebar is hidden, switch layout to 1 column so article becomes full-width */
  .ak-guide-layout.ak-guide-layout--no-sidebar{
    grid-template-columns: 1fr !important;
  }
  .ak-guide-layout.ak-guide-layout--no-sidebar .ak-guide-article{
    grid-column: 1 / -1;
  }

/* ---- Login Template (moved from login.php) ---- */
/* ---------------------------------------------------------
   AccessiKey Login Page (AA-friendly, standalone)
--------------------------------------------------------- */
html, body{ height:100%; }
body.page-template-login-php,
body.page-template-login,
body.ak-login-page{
  background:#ffffff !important;
  color:#0b1f33 !important;
  font-family: "Plus Jakarta Sans", "Poppins", system-ui, -apple-system, Segoe UI, sans-serif;
  font-weight: 400;
}

/* Layout */
.ak-login{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width: 980px){
  .ak-login{ grid-template-columns: 1fr; }
}

/* LEFT: dark gradient, centered message, subtle animation */
.ak-login-side{
  position:relative;
  overflow:hidden;
  padding:56px;
  color:#ffffff;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(0,64,108,.28), rgba(0,64,108,0) 62%),
    radial-gradient(720px 520px at 72% 22%, rgba(245,204,0,.18), rgba(245,204,0,0) 60%),
    linear-gradient(180deg, #000814 0%, #00111c 100%);
  display:flex;
  flex-direction:column;
}
.ak-login-side::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(245,204,0,.22), transparent 46%),
    radial-gradient(circle at 70% 55%, rgba(169,214,255,.18), transparent 52%);
  filter: blur(28px);
  animation: akGlowMove 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes akGlowMove{
  0%{ transform: translate3d(-2%, -2%, 0) scale(1); opacity:.9; }
  50%{ transform: translate3d(3%, 2%, 0) scale(1.03); opacity:1; }
  100%{ transform: translate3d(-2%, -2%, 0) scale(1); opacity:.9; }
}

.ak-side-inner{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.ak-side-center{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.ak-side-copy{
  max-width: 520px;
}

.ak-side-title{
  margin:0 0 12px;
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -.55px;
  line-height: 1.06;
  color: #ffffff !important;
  text-shadow: 0 16px 34px rgba(0,0,0,.28);
}
.ak-side-sub{
  margin:0;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 500;
  color: #ffffff !important;
}

/* little animated underline */
.ak-spark{
  width: 170px;
  height: 4px;
  border-radius: 999px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, rgba(245,204,0,.0), rgba(245,204,0,.95), rgba(169,214,255,.85), rgba(245,204,0,.0));
  filter: blur(.2px);
  position: relative;
  overflow:hidden;
}
.ak-spark::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transform: translateX(-60%);
  animation: akShine 2.6s ease-in-out infinite;
}
@keyframes akShine{
  0%{ transform: translateX(-60%); opacity:.0; }
  20%{ opacity:1; }
  60%{ opacity:1; }
  100%{ transform: translateX(60%); opacity:0; }
}

/* Footer pinned to bottom */
.ak-side-footer{
  flex: 0 0 auto;
  margin-top: 22px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:13px;
  font-weight: 500;
  color: rgba(232,242,255,.74);
}
.ak-side-footer a{
  color:#b8dcff;
  font-weight: 600;
  text-decoration:none;
}
.ak-side-footer a:hover{ text-decoration: underline; }

/* RIGHT: clean form on white */
.ak-login-auth{
  padding:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
}
@media (max-width: 980px){
  .ak-login-auth{ padding:28px 18px 44px; }
  .ak-login-side{ padding:34px 18px; }
}
.ak-auth-inner{
  width:100%;
  max-width: 460px;
}

.ak-auth-head h3{
  margin:0 0 8px;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.3px;
  color:#0b1f33;
}
.ak-auth-head p{
  margin:0;
  color: rgba(11,31,51,.78);
  font-weight:500;
  line-height:1.7;
}

.ak-login-form{ margin-top:18px; }
.ak-login-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.ak-login-field label{ font-weight:600; color:#172b40; }

.ak-login-input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(11,31,51,.22);
  background:#fff;
  color:#0b1f33;
  font-weight:500;
  outline:none;
}
.ak-login-input:focus{
  box-shadow: 0 0 0 4px rgba(245,204,0,.35);
  border-color: rgba(245,204,0,.65);
}

.ak-login-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin: 8px 0 12px;
}
.ak-login-check{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:500;
  color: rgba(11,31,51,.78);
}
.ak-login-row a{
  color:#0b5fa8;
  font-weight:600;
  text-decoration:none;
}
.ak-login-row a:hover{ text-decoration:underline; }

.ak-login-error{
  margin:10px 0 12px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(185,28,28,.08);
  border: 1px solid rgba(185,28,28,.25);
  color: #7f1d1d;
  font-weight:600;
}

.ak-login-success{
  margin:10px 0 12px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(22, 163, 74, .08);
  border: 1px solid rgba(22, 163, 74, .22);
  color: #14532d;
  font-weight:600;
}

/* Buttons */
.ak-login-btn{
  width:100%;
  padding:12px 16px;
  border-radius:14px;
  border:0;
  cursor:pointer;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.ak-login-btn-primary{
  background: linear-gradient(-30deg, #f3696e 0%, #f8a902 100%);
  color:#0b1f33;
  box-shadow: 0 18px 44px rgba(243,105,110,.20);
}
.ak-login-btn-primary:hover{
  background: linear-gradient(-30deg, #f1585d 0%, #ffb119 100%);
  transform: translateY(-1px);
}

.ak-login-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:16px 0 10px;
  color:rgba(11,31,51,.62);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ak-login-divider::before,
.ak-login-divider::after{
  content:"";
  height:1px;
  flex:1 1 auto;
  background:rgba(11,31,51,.16);
}

.ak-login-btn-ghost{
  background:rgba(11,31,51,.04);
  border:1px solid rgba(11,31,51,.18);
  color:rgba(11,31,51,.92);
}
.ak-login-btn-ghost svg{ width:18px; height:18px; margin-right:10px; flex:0 0 auto; }
.ak-login-btn-ghost:hover{
  background:rgba(11,31,51,.08);
  transform:translateY(-1px);
}

.ak-login-helper{
  margin-top:12px;
  text-align:center;
  font-size:13px;
  font-weight:500;
  color:rgba(11,31,51,.68);
}
.ak-login-helper a{
  color:#0b5fa8;
  font-weight:600;
  text-decoration:none;
}
.ak-login-helper a:hover{ text-decoration:underline; }

/* Focus-visible for keyboard users (AA-friendly) */
.ak-login a:focus-visible,
.ak-login button:focus-visible,
.ak-login input:focus-visible{
  outline: 3px solid rgba(245,204,0,.85);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ak-login-side::before,
  .ak-spark::after{ animation:none !important; }
}

/* ---- Register Template (moved from SignUp.php) ---- */
/* ---------------------------------------------------------
   AccessiKey Register Page (AA-friendly, standalone)
--------------------------------------------------------- */
html, body{ height:100%; }
body.page-template-register-php,
body.page-template-register,
body.ak-register-page{
  background:#ffffff !important;
  color:#0b1f33 !important;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Hide theme header/footer */
body.page-template-register-php header,
body.page-template-register-php footer,
body.page-template-register-php #masthead,
body.page-template-register-php #colophon,
body.page-template-register header,
body.page-template-register footer,
body.page-template-register #masthead,
body.page-template-register #colophon,
body.ak-register-page header,
body.ak-register-page footer,
body.ak-register-page #masthead,
body.ak-register-page #colophon{
  display:none !important;
}
body.page-template-register-php #content,
body.page-template-register-php #primary,
body.page-template-register-php #main,
body.page-template-register #content,
body.page-template-register #primary,
body.page-template-register #main,
body.ak-register-page #content,
body.ak-register-page #primary,
body.ak-register-page #main{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  max-width:none !important;
}

.ak-form{ margin-top:18px; }
.ak-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.ak-field label{ font-weight:900; color:#0b1f33; }

.ak-input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(11,31,51,.22);
  background:#fff;
  color:#0b1f33;
  font-weight:800;
  outline:none;
}
.ak-input:focus{
  box-shadow: 0 0 0 4px rgba(245,204,0,.35);
  border-color: rgba(245,204,0,.65);
}

.ak-alert{
  margin:12px 0 12px;
  padding:10px 12px;
  border-radius:14px;
  font-weight:900;
}
.ak-alert-error{
  background: rgba(185,28,28,.08);
  border: 1px solid rgba(185,28,28,.25);
  color: #7f1d1d;
}

.ak-btn{
  width:100%;
  padding:12px 16px;
  border-radius:14px;
  border:0;
  cursor:pointer;
  font-weight:950;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.ak-btn-primary{
  background: linear-gradient(-30deg, #f3696e 0%, #f8a902 100%);
  color:#0b1f33;
  box-shadow: 0 18px 44px rgba(243,105,110,.20);
}
.ak-btn-primary:hover{
  background: linear-gradient(-30deg, #f1585d 0%, #ffb119 100%);
  transform: translateY(-1px);
}

.ak-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:16px 0 10px;
  color:rgba(11,31,51,.55);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ak-divider::before,
.ak-divider::after{
  content:"";
  height:1px;
  flex:1 1 auto;
  background:rgba(11,31,51,.14);
}

.ak-btn-ghost{
  background:rgba(11,31,51,.04);
  border:1px solid rgba(11,31,51,.18);
  color:rgba(11,31,51,.92);
}
.ak-btn-ghost:hover{
  background:rgba(11,31,51,.08);
  transform:translateY(-1px);
}
.ak-btn-ghost svg{ width:18px; height:18px; margin-right:10px; flex:0 0 auto; }

.ak-links{
  margin-top:12px;
  text-align:center;
  font-size:13px;
  font-weight:700;
  color:rgba(11,31,51,.68);
}
.ak-links a{
  color:#0b5fa8;
  font-weight:900;
  text-decoration:none;
}
.ak-links a:hover{ text-decoration:underline; }

/* Shared auth helpers (replacing inline styles) */
.ak-mb-12{ margin-bottom:12px !important; }
.ak-mt-6{ margin-top:6px !important; }
.ak-inline-dot{ margin:0 8px !important; display:inline-block; }

/* ---- Home/Flex utility classes (replacing static inline styles) ---- */
.ak-icon-img-22{ width:22px; height:22px; object-fit:contain; display:block; }
.ak-icon-dash-22{ font-size:22px !important; width:22px; height:22px; line-height:22px; }
.hero-grid.hero-grid-single{ grid-template-columns:1fr !important; }
.offer-inner.offer-inner-single{ grid-template-columns:1fr !important; }
.ak-btn-row-sm{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.ak-media-shell{ border-radius:18px; overflow:hidden; min-height:260px; }
.ak-media-cover{ width:100%; height:100%; object-fit:cover; display:block; }

.ak-v3-fs-120{ font-size:1.2rem; }
.ak-v3-actions-row{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }
.ak-v3-pad-22{ padding:22px; }
.ak-v3-img-fluid{ width:100%; height:auto; display:block; border-radius:16px; }
.ak-v3-center-80{ text-align:center; margin-bottom:80px; }
.ak-v3-center-44{ text-align:center; margin-bottom:44px; }
.ak-v3-h2-3xl{ font-size:3rem; }
.ak-v3-max-600{ max-width:600px; margin:0 auto; }
.ak-v3-max-720{ max-width:720px; margin:0 auto; }
.ak-v3-link-reset{ text-decoration:none; }
.ak-v3-flex-col{ display:flex; flex-direction:column; }
.ak-v3-mock-hint{ font-size:.7rem; font-weight:800; opacity:.5; }
.ak-v3-grid-stack-20{ display:grid; gap:20px; margin-top:30px; }
.ak-v3-card-compact{ padding:18px; border-radius:16px; }
.ak-mt-18{ margin-top:18px; }
.ak-w-100{ width:100%; }
.ak-v3-cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px; }

/* =========================================================
   GLOBAL TYPOGRAPHY CONSISTENCY (Light + Dark)
   Matches shared heading/body direction and keeps WCAG contrast.
========================================================= */
:root{
  --ak-type-heading: "Raleway", "Segoe UI", Arial, sans-serif;
  --ak-type-body: "Poppins", "Segoe UI", Arial, sans-serif;
  --ak-type-heading-light: #0f172a;
  --ak-type-text-light: #1f2937;
  --ak-type-muted-light: #475569;
  --ak-type-heading-dark: #f8fafc;
  --ak-type-text-dark: #e2e8f0;
  --ak-type-muted-dark: #cbd5e1;
}

body{
  font-family: var(--ak-type-body) !important;
  color: var(--ak-type-text-light) !important;
}

h1:not(.grad-text),
h2:not(.grad-text),
h3:not(.grad-text),
h4:not(.grad-text),
h5:not(.grad-text),
h6:not(.grad-text){
  font-family: var(--ak-type-heading) !important;
  color: var(--ak-type-heading-light) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}

.section-dark h1:not(.grad-text),
.section-dark h2:not(.grad-text),
.section-dark h3:not(.grad-text),
.section-dark h4:not(.grad-text),
.section-dark h5:not(.grad-text),
.section-dark h6:not(.grad-text),
.ak-guide-hero h1:not(.grad-text),
.ak-guide-hero h2:not(.grad-text),
.ak-guide-hero h3:not(.grad-text),
.ak-guide-hero h4:not(.grad-text),
.ak-guide-hero h5:not(.grad-text),
.ak-guide-hero h6:not(.grad-text){
  color: var(--ak-type-heading-dark) !important;
  -webkit-text-fill-color: currentColor !important;
}

p,
li,
ol,
ul,
dl,
dt,
dd,
blockquote,
figcaption,
caption,
label,
legend,
td,
th{
  color: var(--ak-type-text-light) !important;
  font-family: var(--ak-type-body) !important;
}

small,
.fineprint,
.muted{
  color: var(--ak-type-muted-light) !important;
}

body.dark-mode,
body.is-dark-theme,
html[data-ak-contrast="dark"] body{
  color: var(--ak-type-text-dark) !important;
}

body.dark-mode h1:not(.grad-text),
body.dark-mode h2:not(.grad-text),
body.dark-mode h3:not(.grad-text),
body.dark-mode h4:not(.grad-text),
body.dark-mode h5:not(.grad-text),
body.dark-mode h6:not(.grad-text),
body.is-dark-theme h1:not(.grad-text),
body.is-dark-theme h2:not(.grad-text),
body.is-dark-theme h3:not(.grad-text),
body.is-dark-theme h4:not(.grad-text),
body.is-dark-theme h5:not(.grad-text),
body.is-dark-theme h6:not(.grad-text),
html[data-ak-contrast="dark"] h1:not(.grad-text),
html[data-ak-contrast="dark"] h2:not(.grad-text),
html[data-ak-contrast="dark"] h3:not(.grad-text),
html[data-ak-contrast="dark"] h4:not(.grad-text),
html[data-ak-contrast="dark"] h5:not(.grad-text),
html[data-ak-contrast="dark"] h6:not(.grad-text){
  color: var(--ak-type-heading-dark) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.dark-mode p,
body.dark-mode li,
body.dark-mode ol,
body.dark-mode ul,
body.dark-mode dl,
body.dark-mode dt,
body.dark-mode dd,
body.dark-mode blockquote,
body.dark-mode figcaption,
body.dark-mode caption,
body.dark-mode label,
body.dark-mode legend,
body.dark-mode td,
body.dark-mode th,
body.is-dark-theme p,
body.is-dark-theme li,
body.is-dark-theme ol,
body.is-dark-theme ul,
body.is-dark-theme dl,
body.is-dark-theme dt,
body.is-dark-theme dd,
body.is-dark-theme blockquote,
body.is-dark-theme figcaption,
body.is-dark-theme caption,
body.is-dark-theme label,
body.is-dark-theme legend,
body.is-dark-theme td,
body.is-dark-theme th,
html[data-ak-contrast="dark"] p,
html[data-ak-contrast="dark"] li,
html[data-ak-contrast="dark"] ol,
html[data-ak-contrast="dark"] ul,
html[data-ak-contrast="dark"] dl,
html[data-ak-contrast="dark"] dt,
html[data-ak-contrast="dark"] dd,
html[data-ak-contrast="dark"] blockquote,
html[data-ak-contrast="dark"] figcaption,
html[data-ak-contrast="dark"] caption,
html[data-ak-contrast="dark"] label,
html[data-ak-contrast="dark"] legend,
html[data-ak-contrast="dark"] td,
html[data-ak-contrast="dark"] th{
  color: var(--ak-type-text-dark) !important;
}

body.dark-mode small,
body.dark-mode .fineprint,
body.dark-mode .muted,
body.is-dark-theme small,
body.is-dark-theme .fineprint,
body.is-dark-theme .muted,
html[data-ak-contrast="dark"] small,
html[data-ak-contrast="dark"] .fineprint,
html[data-ak-contrast="dark"] .muted{
  color: var(--ak-type-muted-dark) !important;
}

/* =========================================================
   FINAL VISIBILITY HOTFIX
   - Code block text + copy button contrast
   - Outline button contrast in dark/light
   - H1 dark split word yellow
   - Mobile menu text readability
========================================================= */

/* Code block: keep text readable even with broad .ak-guide text rules */
.ak-guide .ak-codeblock,
.ak-guide .ak-codeblock pre,
.ak-guide .ak-codeblock pre.ak-code{
  background: #020b1a !important;
  color: #e6f1ff !important;
  -webkit-text-fill-color: #e6f1ff !important;
  border-color: rgba(14,165,233,.34) !important;
}

.ak-guide .ak-codeblock pre.ak-code,
.ak-guide .ak-codeblock pre.ak-code *{
  color: #e6f1ff !important;
  -webkit-text-fill-color: #e6f1ff !important;
}

/* Copy button on dark code block */
.ak-guide .ak-code-actions .btn-outline,
.ak-guide .ak-code-actions .btn.btn-outline{
  background: rgba(14,165,233,.08) !important;
  color: #eaf4ff !important;
  -webkit-text-fill-color: #eaf4ff !important;
  border-color: #0ea5e9 !important;
}

.ak-guide .ak-code-actions .btn-outline:hover,
.ak-guide .ak-code-actions .btn.btn-outline:hover{
  background: rgba(14,165,233,.18) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #38bdf8 !important;
}

/* Global outline buttons: clear contrast in both themes */
body.dark-mode .btn-outline,
body.is-dark-theme .btn-outline,
.section-dark .btn-outline,
.hero.section-dark .btn-outline,
.ak-guide-hero .btn-outline{
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  border-color: #38bdf8 !important;
  background: rgba(14,165,233,.08) !important;
}

body.dark-mode .btn-outline:hover,
body.is-dark-theme .btn-outline:hover,
.section-dark .btn-outline:hover,
.hero.section-dark .btn-outline:hover,
.ak-guide-hero .btn-outline:hover{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #fde047 !important;
  background: rgba(14,165,233,.18) !important;
}

body.light-mode .section-light .btn-outline,
body.is-light-theme .section-light .btn-outline{
  color: #0b3b68 !important;
  -webkit-text-fill-color: #0b3b68 !important;
  border-color: #0284c7 !important;
  background: transparent !important;
}

body.light-mode .section-light .btn-outline:hover,
body.is-light-theme .section-light .btn-outline:hover{
  color: #082952 !important;
  -webkit-text-fill-color: #082952 !important;
  background: rgba(14,165,233,.10) !important;
}

/* Light mode ghost buttons (content sections) */
body.light-mode .section-light .btn-ghost,
body.is-light-theme .section-light .btn-ghost,
body:not(.dark-mode):not(.is-dark-theme) .section-light .btn-ghost{
  color: #0b3b68 !important;
  -webkit-text-fill-color: #0b3b68 !important;
  border-color: #0284c7 !important;
  background: rgba(14,165,233,.06) !important;
}

body.light-mode .section-light .btn-ghost:hover,
body.is-light-theme .section-light .btn-ghost:hover,
body:not(.dark-mode):not(.is-dark-theme) .section-light .btn-ghost:hover{
  color: #082952 !important;
  -webkit-text-fill-color: #082952 !important;
  border-color: #0ea5e9 !important;
  background: rgba(14,165,233,.14) !important;
}

/* Mobile menu readability */
@media (max-width: 991.98px){
  #akMobileMenu.mobile-panel{
    background: #020617 !important;
    border-top-color: #fde047 !important;
  }

  #akMobileMenu.mobile-panel::before{
    color: #fde047 !important;
    border-bottom-color: rgba(253,224,71,.28) !important;
  }

  #akMobileMenu .mobile-grid > a,
  #akMobileMenu .mobile-acc-btn{
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    background: #030b1a !important;
    border-color: rgba(148,163,184,.32) !important;
  }

  #akMobileMenu .mobile-grid > a:hover,
  #akMobileMenu .mobile-acc-btn:hover,
  #akMobileMenu .mobile-acc-btn[aria-expanded="true"]{
    color: #fde047 !important;
    -webkit-text-fill-color: #fde047 !important;
    background: rgba(245,204,0,.10) !important;
    border-color: rgba(253,224,71,.44) !important;
  }

  #akMobileMenu .mobile-acc-panel{
    background: #020b18 !important;
    border-color: rgba(148,163,184,.25) !important;
  }

  #akMobileMenu .mobile-acc-panel .sub{
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    background: #061325 !important;
    border-color: rgba(148,163,184,.18) !important;
  }

  #akMobileMenu .mobile-acc-panel .sub:hover,
  #akMobileMenu .mobile-acc-panel .sub[aria-current="page"]{
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: rgba(14,165,233,.18) !important;
    border-color: rgba(56,189,248,.50) !important;
  }
}

/* =========================================================
   FINAL SECTION-DARK TEXT + BUTTON CONTRAST FIX
========================================================= */
.section-dark p,
.section-dark .lead,
.section-dark .lead p,
.section-dark .section-head p,
.section-dark .section-head div p{
  color: #dbe8f8 !important;
  -webkit-text-fill-color: #dbe8f8 !important;
}

.section-dark .btn-ghost,
body.light-mode .section-dark .btn-ghost,
body.is-light-theme .section-dark .btn-ghost{
  background: rgba(14,165,233,.10) !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  border-color: rgba(56,189,248,.52) !important;
}

.section-dark .btn-ghost:hover,
body.light-mode .section-dark .btn-ghost:hover,
body.is-light-theme .section-dark .btn-ghost:hover{
  background: rgba(14,165,233,.20) !important;
  color: #fde047 !important;
  -webkit-text-fill-color: #fde047 !important;
  border-color: #fde047 !important;
}

/* =========================================================
   FINAL CARD FONT COLOR FIX
   Prevent section-level text color from washing out card text.
========================================================= */
body.light-mode .section-dark .card h3,
body.is-light-theme .section-dark .card h3,
body:not(.dark-mode):not(.is-dark-theme) .section-dark .card h3{
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
  background-image: none !important;
}

body.light-mode .section-dark .card p,
body.light-mode .section-dark .card li,
body.is-light-theme .section-dark .card p,
body.is-light-theme .section-dark .card li,
body:not(.dark-mode):not(.is-dark-theme) .section-dark .card p,
body:not(.dark-mode):not(.is-dark-theme) .section-dark .card li{
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}

body.dark-mode .section-dark .card h3,
body.is-dark-theme .section-dark .card h3,
html[data-ak-contrast="dark"] .section-dark .card h3{
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  background: none !important;
  background-image: none !important;
}

body.dark-mode .section-dark .card p,
body.dark-mode .section-dark .card li,
body.is-dark-theme .section-dark .card p,
body.is-dark-theme .section-dark .card li,
html[data-ak-contrast="dark"] .section-dark .card p,
html[data-ak-contrast="dark"] .section-dark .card li{
  color: #dbe8f8 !important;
  -webkit-text-fill-color: #dbe8f8 !important;
}

/* Step card (plain) dark mode fix */
body.dark-mode .ak-guide .step-card:not(.step-card-yellow):not(.step-card-dark),
body.is-dark-theme .ak-guide .step-card:not(.step-card-yellow):not(.step-card-dark),
html[data-ak-contrast="dark"] .ak-guide .step-card:not(.step-card-yellow):not(.step-card-dark){
  background: #0b1220 !important;
  border-color: rgba(56,189,248,.30) !important;
}

body.dark-mode .ak-guide .step-card:not(.step-card-yellow):not(.step-card-dark) h4,
body.is-dark-theme .ak-guide .step-card:not(.step-card-yellow):not(.step-card-dark) h4,
html[data-ak-contrast="dark"] .ak-guide .step-card:not(.step-card-yellow):not(.step-card-dark) h4{
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

body.dark-mode .ak-guide .step-card:not(.step-card-yellow):not(.step-card-dark) p,
body.dark-mode .ak-guide .step-card:not(.step-card-yellow):not(.step-card-dark) div,
body.is-dark-theme .ak-guide .step-card:not(.step-card-yellow):not(.step-card-dark) p,
body.is-dark-theme .ak-guide .step-card:not(.step-card-yellow):not(.step-card-dark) div,
html[data-ak-contrast="dark"] .ak-guide .step-card:not(.step-card-yellow):not(.step-card-dark) p,
html[data-ak-contrast="dark"] .ak-guide .step-card:not(.step-card-yellow):not(.step-card-dark) div{
  color: #dbe8f8 !important;
  -webkit-text-fill-color: #dbe8f8 !important;
}

/* =========================================================
   FINAL FOOTER + SECTION H1 CONSISTENCY FIX
========================================================= */

/* Footer readability (including logo/text blocks) */
#colophon.site-footer,
footer.site-footer{
  background: #020817;
  color: #dbe8f8;
}

#colophon.site-footer .foot h4,
footer.site-footer .foot h4{
  color: #f8fafc;
  -webkit-text-fill-color: #f8fafc;
  opacity: 1;
}

#colophon.site-footer .foot a,
footer.site-footer .foot a{
  color: #dbe8f8;
  -webkit-text-fill-color: #dbe8f8;
}

#colophon.site-footer .foot a:hover,
footer.site-footer .foot a:hover{
  color: #fde047;
  -webkit-text-fill-color: #fde047;
}

#colophon.site-footer .fineprint,
#colophon.site-footer .fineprint a,
footer.site-footer .fineprint,
footer.site-footer .fineprint a{
  color: rgba(219,232,248,.82);
  -webkit-text-fill-color: rgba(219,232,248,.82);
}

#colophon.site-footer .custom-logo,
#colophon.site-footer .custom-logo-link img,
footer.site-footer .custom-logo,
footer.site-footer .custom-logo-link img{
  opacity: 1;
  filter: none;
}

/* Section heading fallback consistency */
body.light-mode section h1:not([data-ak-word-split="1"]):not(.screen-reader-text),
body.light-mode section h2:not([data-ak-word-split="1"]):not(.screen-reader-text),
body.light-mode section h3:not(.screen-reader-text),
body.is-light-theme section h1:not([data-ak-word-split="1"]):not(.screen-reader-text),
body.is-light-theme section h2:not([data-ak-word-split="1"]):not(.screen-reader-text),
body.is-light-theme section h3:not(.screen-reader-text),
body:not(.dark-mode):not(.is-dark-theme) section h1:not([data-ak-word-split="1"]):not(.screen-reader-text),
body:not(.dark-mode):not(.is-dark-theme) section h2:not([data-ak-word-split="1"]):not(.screen-reader-text),
body:not(.dark-mode):not(.is-dark-theme) section h3:not(.screen-reader-text){
  color: #0ea5e9;
  -webkit-text-fill-color: #0ea5e9;
  background: none;
  background-image: none;
}

body.dark-mode section h1:not([data-ak-word-split="1"]):not(.screen-reader-text),
body.dark-mode section h2:not([data-ak-word-split="1"]):not(.screen-reader-text),
body.dark-mode section h3:not(.screen-reader-text),
body.is-dark-theme section h1:not([data-ak-word-split="1"]):not(.screen-reader-text),
body.is-dark-theme section h2:not([data-ak-word-split="1"]):not(.screen-reader-text),
body.is-dark-theme section h3:not(.screen-reader-text),
html[data-ak-contrast="dark"] section h1:not([data-ak-word-split="1"]):not(.screen-reader-text),
html[data-ak-contrast="dark"] section h2:not([data-ak-word-split="1"]):not(.screen-reader-text),
html[data-ak-contrast="dark"] section h3:not(.screen-reader-text){
  color: #fde047;
  -webkit-text-fill-color: #fde047;
  background: none;
  background-image: none;
}

/* Split headings (H1/H2): one global source of truth */
h1[data-ak-word-split="1"],
h2[data-ak-word-split="1"]{
  background: none;
  background-image: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

body.light-mode section h1[data-ak-word-split="1"] .ak-first-word,
body.light-mode section h2[data-ak-word-split="1"] .ak-first-word,
body.is-light-theme section h1[data-ak-word-split="1"] .ak-first-word,
body.is-light-theme section h2[data-ak-word-split="1"] .ak-first-word,
body:not(.dark-mode):not(.is-dark-theme) section h1[data-ak-word-split="1"] .ak-first-word,
body:not(.dark-mode):not(.is-dark-theme) section h2[data-ak-word-split="1"] .ak-first-word{
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
}

body.light-mode section h1[data-ak-word-split="1"] .ak-rest-words,
body.light-mode section h2[data-ak-word-split="1"] .ak-rest-words,
body.is-light-theme section h1[data-ak-word-split="1"] .ak-rest-words,
body.is-light-theme section h2[data-ak-word-split="1"] .ak-rest-words,
body:not(.dark-mode):not(.is-dark-theme) section h1[data-ak-word-split="1"] .ak-rest-words,
body:not(.dark-mode):not(.is-dark-theme) section h2[data-ak-word-split="1"] .ak-rest-words{
  color: #0ea5e9;
  -webkit-text-fill-color: #0ea5e9;
}

body.dark-mode section h1[data-ak-word-split="1"] .ak-first-word,
body.dark-mode section h2[data-ak-word-split="1"] .ak-first-word,
body.is-dark-theme section h1[data-ak-word-split="1"] .ak-first-word,
body.is-dark-theme section h2[data-ak-word-split="1"] .ak-first-word,
html[data-ak-contrast="dark"] section h1[data-ak-word-split="1"] .ak-first-word,
html[data-ak-contrast="dark"] section h2[data-ak-word-split="1"] .ak-first-word{
  color: #f8fafc;
  -webkit-text-fill-color: #f8fafc;
}

body.dark-mode section h1[data-ak-word-split="1"] .ak-rest-words,
body.dark-mode section h2[data-ak-word-split="1"] .ak-rest-words,
body.is-dark-theme section h1[data-ak-word-split="1"] .ak-rest-words,
body.is-dark-theme section h2[data-ak-word-split="1"] .ak-rest-words,
html[data-ak-contrast="dark"] section h1[data-ak-word-split="1"] .ak-rest-words,
html[data-ak-contrast="dark"] section h2[data-ak-word-split="1"] .ak-rest-words{
  color: #fde047;
  -webkit-text-fill-color: #fde047;
}

/* Keep split heading readable in dark sections even when page is light mode */
body.light-mode .section-dark h1[data-ak-word-split="1"] .ak-first-word,
body.light-mode .section-dark h2[data-ak-word-split="1"] .ak-first-word,
body.is-light-theme .section-dark h1[data-ak-word-split="1"] .ak-first-word,
body.is-light-theme .section-dark h2[data-ak-word-split="1"] .ak-first-word,
body:not(.dark-mode):not(.is-dark-theme) .section-dark h1[data-ak-word-split="1"] .ak-first-word,
body:not(.dark-mode):not(.is-dark-theme) .section-dark h2[data-ak-word-split="1"] .ak-first-word,
body.light-mode .hero.section-dark h1[data-ak-word-split="1"] .ak-first-word,
body.light-mode .hero.section-dark h2[data-ak-word-split="1"] .ak-first-word,
body.is-light-theme .hero.section-dark h1[data-ak-word-split="1"] .ak-first-word,
body.is-light-theme .hero.section-dark h2[data-ak-word-split="1"] .ak-first-word,
body:not(.dark-mode):not(.is-dark-theme) .hero.section-dark h1[data-ak-word-split="1"] .ak-first-word,
body:not(.dark-mode):not(.is-dark-theme) .hero.section-dark h2[data-ak-word-split="1"] .ak-first-word,
body.light-mode .ak-guide-hero h1[data-ak-word-split="1"] .ak-first-word,
body.light-mode .ak-guide-hero h2[data-ak-word-split="1"] .ak-first-word,
body.is-light-theme .ak-guide-hero h1[data-ak-word-split="1"] .ak-first-word,
body.is-light-theme .ak-guide-hero h2[data-ak-word-split="1"] .ak-first-word,
body:not(.dark-mode):not(.is-dark-theme) .ak-guide-hero h1[data-ak-word-split="1"] .ak-first-word,
body:not(.dark-mode):not(.is-dark-theme) .ak-guide-hero h2[data-ak-word-split="1"] .ak-first-word{
  color: #f8fafc;
  -webkit-text-fill-color: #f8fafc;
}

/* =========================================================
   FINAL HEADER + FOOTER VISUAL FIX
   - Hamburger lines straight
   - Footer grid alignment
   - Footer H4 contrast
========================================================= */
.burger > .chev{
  position:relative !important;
  width:20px !important;
  height:16px !important;
  border:0 !important;
  margin:0 !important;
  transform: none !important;
  opacity: 1 !important;
  margin-top: 0 !important;
}
.burger > .chev::before,
.burger > .chev::after,
.burger > .chev > span{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  width:20px !important;
  height:2px !important;
  background:#fff !important;
  border-radius:99px !important;
  transition:transform .2s ease, opacity .2s ease, top .2s ease !important;
}
.burger > .chev::before{ top:1px !important; }
.burger > .chev > span{ top:7px !important; }
.burger > .chev::after{ top:13px !important; }

#colophon.site-footer .footer-grid,
footer.site-footer .footer-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 22px !important;
  align-items: start !important;
}

#colophon.site-footer .foot,
footer.site-footer .foot{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#colophon.site-footer .foot h4,
footer.site-footer .foot h4{
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  opacity: 1 !important;
  margin: 0 0 8px !important;
}