/* -- Variables -------------------------------------- */
:root {
  --navy:      #051a38;
  --blue:      #0d3a6a;
  --blue-mid:  #1a5fa8;
  --gold-top:  #f5c518;
  --gold-btm:  #c89010;
  --gold-bdr:  rgba(25, 18, 0, 0.22);
  --gold-ink:  rgba(40, 28, 0, 0.90);
  --ink:       rgba(10, 25, 55, 0.92);
  --muted:     rgba(10, 25, 55, 0.68);
  --border:    rgba(10, 25, 55, 0.10);
  --container: 1140px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; background: #040c1c; }
body { overflow-x: hidden; }

#fscCanvas { width: 100% !important; }

body {
  font-family: "Source Sans 3", "Source Sans Pro", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
  background: linear-gradient(160deg, #010a16 0%, #021428 35%, #041e40 65%, #011020 100%);
  min-height: 100vh;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

/* -- Nav ---------------------------------------------- */
.site-nav {
  position: relative;
  z-index: 10;
  padding: 6px 0;
  background: linear-gradient(180deg, rgba(7, 11, 34, 0.75), rgba(7, 11, 34, 0.0));
  border-bottom: none;
}
.nav-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 100px;
  padding: 0 23px;
}
.nav-logo { display: inline-flex; align-items: center; margin-left: -36px; }
.nav-logo img {
  height: 80px;
  filter: drop-shadow(0 10px 26px rgba(42, 124, 255, 0.26));
  transform: translateY(6px);
}
.nav-links { display: flex; gap: 24px; align-items: center; justify-self: center; justify-content: center; }
.nav-links a {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.80);
  transition: color .15s;
}
.nav-links a:hover { color: #fff; }
.nav-links a.is-active { color: var(--gold-top); }
.nav-right { margin-left: 0; display: flex; align-items: center; gap: 10px; position: relative; justify-self: end; }

.btn-register {
  display: inline-block;
  background: linear-gradient(180deg, var(--gold-top) 0%, var(--gold-btm) 100%);
  border: 1px solid var(--gold-bdr);
  color: var(--gold-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
  text-decoration: none;
  transition: filter .15s;
}
.btn-register:hover { filter: brightness(1.07); }

/* Login popup trigger wrapper */
.nav-login-wrap { position: relative; }
.nav-login-wrap.is-open .login-popup { display: block; }

.btn-login {
  display: inline-block;
  background: linear-gradient(180deg, var(--gold-top) 0%, var(--gold-btm) 100%);
  border: 1px solid var(--gold-bdr);
  color: var(--gold-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
  text-decoration: none;
  transition: filter .15s;
  line-height: inherit;
}
.btn-login:hover { background: linear-gradient(180deg, #fad22a 0%, var(--gold-btm) 100%); }

/* Login popup — shows on hover of wrapper */
.login-popup {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 324px;
  background: #f7f7f7;
  border-radius: 6px;
  box-shadow: #999 0 0 4px;
  padding: 28px 28px 24px;
  z-index: 200;
  display: none;
  color: #333;
}
.login-popup-arrow {
  position: absolute;
  top: -10px; right: 32px;
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #f7f7f7;
}
.login-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.login-field label { font-size: 12px; font-weight: 600; color: #444; }
.login-field input {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  color: #333;
}
.login-forgot { display: block; font-size: 12px; color: #0d3a6a; margin-top: 12px; text-align: center; }
.login-submit {
  width: 100%;
  background: linear-gradient(to bottom, #5db843, #3d8c28);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.login-submit:hover { filter: brightness(1.1); }

/* -- Hero -------------------------------------------- */
.hero {
  border-top: none;
  padding-top: 36px;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.hero-title { margin-bottom: 20px; padding-left: 23px; }
.hero-title h1 {
  color: #fff;
  font-size: 45px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 12px;
}
.hero-title .lead {
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

.hero-inner {
  display: flex;
  align-items: flex-end;
  position: relative;
  min-height: 280px;
  padding: 0 23px;
}
.hero-copy {
  flex: 0 0 50%;
  padding-bottom: 55px;
  position: relative;
  z-index: 1;
}

/* Benefits with image-based checkmarks */
.benefits { margin-top: 14px; margin-bottom: 28px; }
.benefit-row {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  margin-bottom: 15px;
  line-height: 1.3;
}

.benefit-check {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: rgb(7, 32, 78);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 1px 3px rgba(0, 0, 0, 0.40);
  position: relative;
  display: block;
}
.benefit-check i {
  width: 42px; height: 42px;
  display: block;
  background-image: url('./images/checkmark.png');
  background-repeat: no-repeat;
  background-size: 42px 42px;
  position: absolute;
  left: 6px;
  bottom: 3px;
}

/* Gold "Try For Free" CTA button */
.btn-cta {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 78px;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  justify-items: start;
  width: 290px;
  padding: 10px 12px 10px 14px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(180deg, #fad42a 0%, #d49810 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
}
.btn-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(520px 160px at 20% 0%, rgba(255, 255, 255, 0.30), transparent 62%);
  opacity: 0.35;
  pointer-events: none;
}
.btn-cta-title {
  grid-column: 1; grid-row: 1;
  font-size: 28px; font-weight: 900;
  color: var(--gold-ink);
  line-height: 1.1;
  position: relative; z-index: 1;
}
.btn-cta-sub {
  grid-column: 1; grid-row: 2;
  font-size: 12px; font-style: normal; font-weight: 600;
  color: rgba(40, 28, 0, 0.80);
  line-height: 1.2;
  letter-spacing: 0.02em;
  position: relative; z-index: 1;
}
.btn-cta-icon {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: stretch; justify-self: stretch;
  display: grid; place-items: center;
  border-left: 1px solid rgba(25, 18, 0, 0.18);
  position: relative; z-index: 1;
}
.btn-cta-icon::before {
  content: '';
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-cta-icon::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid rgba(255, 255, 255, 0.90);
  transform: translateX(3px);
}
.btn-cta input[type="file"] {
  position: absolute;
  inset: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}

/* Hero screens image — flex child, aligns with nav/content padding */
.hero-image {
  flex: 1;
  min-width: 0;
  margin-bottom: -82px;
}
.hero-image img { width: 100%; }

/* -- Content area — glow sits here, behind the white surface -- */
.content-area {
  padding-top: 28px;
  position: relative;
}
.content-area.page-content {
  padding-top: 24px;
}
.content-area::before {
  content: '';
  position: absolute;
  top: -230px;
  left: 50%;
  transform: translateX(-34%);
  width: min(100%, var(--container));
  height: 620px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 56% at 58% 38%, rgba(55, 135, 255, 0.52), transparent 60%),
    radial-gradient(ellipse 42% 35% at 28% 28%, rgba(90, 170, 255, 0.28), transparent 56%),
    radial-gradient(ellipse 30% 28% at 78% 66%, rgba(25, 95, 225, 0.20), transparent 56%);
  filter: blur(34px);
  opacity: 0.98;
}

/* -- Flipbook Examples (below social proof) -- */
.examples { padding: 44px 0 44px; }
.examples-head { margin-bottom: 28px; }
.examples-head h2 { font-size: 26px; font-weight: 800; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.02em; }
.examples-head p { color: var(--muted); font-size: 15px; }
.examples-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.ex-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(10, 25, 55, 0.09);
  background: #fff;
  box-shadow: 0 2px 14px rgba(10, 25, 55, 0.08);
  display: block;
  transition: box-shadow .2s, transform .2s;
}
.ex-card:hover { box-shadow: 0 6px 28px rgba(10, 25, 55, 0.15); transform: translateY(-3px); }
.ex-cover { aspect-ratio: 3 / 4; overflow: hidden; }
.ex-cover img { width: 100%; height: 100%; object-fit: cover; }
.ex-body { padding: 10px 12px; text-align: center; }
.ex-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.ex-sub { font-size: 11.5px; color: var(--muted); }

/* -- White surface card -------------- */
.white-surface {
  margin: 0 auto 56px;
  background: #ffffff;
  border-radius: 32px;
  padding: 0;
  width: min(var(--container), calc(100% - 40px));
  overflow: clip;
  border: 1px solid rgba(255, 255, 255, 0.40);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.70);
  color: var(--ink);
  position: relative;
  z-index: 1;
}
.white-surface::before {
  content: '';
  position: absolute;
  inset: -12% -10%;
  pointer-events: none;
  background:
    radial-gradient(420px 220px at 12% 12%, rgba(70, 213, 255, 0.08), transparent 62%),
    radial-gradient(460px 220px at 88% 14%, rgba(42, 124, 255, 0.07), transparent 60%);
  opacity: 0.7;
}
.white-surface > * { position: relative; z-index: 1; }
.ws-inner { padding: 0 43px; }

/* Divider between white-surface sections */
.ws-divider { border: none; border-top: 1px solid var(--border); margin: 0 43px; }

/* -- Top hero-split: left = 3×2 examples, right = counter + logos -- */
.hero-split {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 40px;
  padding: 48px 0;
  align-items: start;
}

/* Heading above examples — same style as .section-head */
.split-examples-head { margin-bottom: 24px; }
.split-examples-head h2 {
  font-size: 28px; font-weight: 800;
  color: var(--ink); letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.split-examples-head p { color: var(--muted); font-size: 15px; line-height: 1.5; }

/* Left: 3-column 2-row example grid */
.split-examples-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  row-gap: 28px;
}
.split-examples-grid .ex-cover { aspect-ratio: 3 / 4.2; }
.split-examples-grid .ex-body { padding: 8px 10px; }
.split-examples-grid .ex-title { font-size: 12px; }
.split-examples-grid .ex-sub { font-size: 11px; }

.aside-heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  margin: 10px 0 16px;
  text-align: center;
}

/* Counter tiles — stretch to fill full column width */
.counter-tiles {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
}
.counter-tile {
  flex: 1;
  min-width: 0;
  height: 56px;
  background: linear-gradient(to bottom, #e8e7ec 54%, #f0f4f9 54%);
  border-top: 1px solid #fff;
  border-radius: 4px;
  box-shadow: #9b9b9f 0 1px 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 700;
  color: var(--blue);
  text-shadow: #fff 0 1px 1px;
  line-height: 1;
  padding-top: 5px;
}
.counter-sep {
  font-size: 36px; font-weight: 700;
  color: #888;
  padding: 14px 1px 0;
  flex-shrink: 0;
}
.counter-plus {
  flex: 1;
  min-width: 0;
  height: 56px;
  background: linear-gradient(to bottom, #e8e7ec 54%, #f0f4f9 54%);
  border-top: 1px solid #fff;
  border-radius: 4px;
  box-shadow: #9b9b9f 0 1px 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 700;
  color: var(--blue);
  text-shadow: #fff 0 1px 1px;
  line-height: 1;
  padding-top: 5px;
}

/* Partner logos — silver cells */
.partner-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.partner-cell {
  flex: 1;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eaeaee;
  box-shadow: inset rgba(140, 140, 150, 0.30) 0 1px 3px, #eee 0 1px 0;
  border-radius: 5px;
  padding: 8px;
}
.partner-cell img {
  max-width: calc(100% - 20px);
  max-height: calc(100% - 16px);
  object-fit: contain;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.partner-cell img:hover {
  opacity: 0.75;
}

/* "See more customers" link button */
.btn-sky {
  display: block;
  text-align: center;
  margin-top: 10px;
  padding: 11px 20px;
  border-radius: 8px;
  border: 1px solid #c8c8cc;
  background: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.80);
  color: #444;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: filter .15s;
  cursor: pointer;
}
.btn-sky:hover { filter: brightness(0.96); }

/* Full-width CTA button inside the split aside */
.split-aside .btn-cta {
  width: 100%;
  margin-top: 12px;
  border-radius: 10px;
}

/* -- Section head ---------------------------------- */
.section-head { margin-bottom: 24px; }
.section-head h2 {
  font-size: clamp(26px, 3vw, 36px); font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.section-head p { color: var(--muted); font-size: 16px; }

/* -- Feature grid (Why Instant Flipbook) ---------- */
.features-wrap { padding: 40px 0 32px; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}
.feature-card {
  padding: 18px 18px 18px 20px;
  border-radius: 18px;
  background: rgba(15, 92, 255, 0.03);
  border: 1px solid var(--border);
}
.feature-head {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 8px;
}
.feature-icon { width: 22px; height: 22px; color: #0e4080; }
.feature-icon svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; }
.feature-head h3 {
  font-size: 16px; font-weight: 800;
  color: var(--ink);
  margin: 0; letter-spacing: -0.01em;
}
.feature-card p { font-size: 15px; color: rgba(10, 25, 55, 0.62); line-height: 1.55; }

/* -- Industry intro heading ------------------------ */
.industry-intro { padding: 40px 0 8px; }

/* -- Content block (industry sections) ------------ */
.industry-section { padding: 48px 0; }
.content-block {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: center;
}
.cb-head {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 10px;
}
.cb-icon { width: 22px; height: 22px; color: #0e4080; margin-top: 2px; }
.cb-icon svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; }
.cb-title {
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0;
}
.cb-lede { color: rgba(10, 25, 55, 0.62); line-height: 1.6; margin-bottom: 14px; font-size: 15px; }

.cb-list { display: grid; gap: 8px; }
.cb-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  color: rgba(10, 25, 55, 0.78);
  font-size: 15px;
  line-height: 1.55;
}
.cb-bullet {
  width: 18px; height: 18px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.10);
  border: 1px solid rgba(22, 163, 74, 0.28);
  position: relative;
  margin-top: 2px; flex-shrink: 0;
}
.cb-bullet::after {
  content: '';
  position: absolute;
  left: 6px; top: 3px;
  width: 5px; height: 9px;
  border-right: 2px solid #16a34a;
  border-bottom: 2px solid #16a34a;
  transform: rotate(40deg);
}
.cb-media {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 10;
}
.cb-media img { width: 100%; height: 100%; object-fit: cover; }

/* -- Social proof block (Join 130K) -------------- */
.social-proof-wrap {
  padding: 48px 0;
  text-align: center;
}

.trusted-heading {
  font-size: 36px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 36px;
  line-height: 1.2;
}
.trusted-heading span { color: var(--blue-mid); }
.trusted-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-bottom: 0;
}
.tstat { text-align: center; padding: 0 28px; }
.tstat-num {
  display: block;
  font-size: 34px;
  font-weight: 900;
  color: var(--blue);
  line-height: 1;
  letter-spacing: -0.02em;
}
.tstat-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tstat-div {
  width: 1px;
  height: 52px;
  background: var(--border);
  flex-shrink: 0;
}
.logo-strip-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 20px;
}
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 32px;
  margin-bottom: 12px;
}
.logo-strip img {
  max-width: 100px;
  max-height: 28px;
  width: auto; height: auto;
  object-fit: contain;
  opacity: 0.40;
  filter: grayscale(1) contrast(1.3);
  transition: opacity .25s, filter .25s;
}
.logo-strip img:hover { opacity: 0.85; filter: grayscale(0); }

/* -- CTA footer ------------------------------------ */
.cta-wrap { padding: 40px 0; }
.cta-card {
  background: rgba(10, 25, 55, 0.04);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.cta-card h2 { font-size: 24px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.cta-card p { color: var(--muted); font-size: 15px; }
.cta-card .btn-cta { width: auto; min-width: 260px; flex-shrink: 0; }

/* -- Footer -------------------------------------- */
.site-footer {
  background: #040c1c;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 36px 0 24px;
  box-shadow: 0 100vh 0 100vh #040c1c;
}
.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;

}
.footer-logo img { height: 44px; opacity: 0.80; margin-left: -20px; }
.footer-note { display: none; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.footer-links a { font-size: 14px; color: rgba(255, 255, 255, 0.60); transition: color .15s; }
.footer-links a:hover { color: #fff; }
.footer-copy { font-size: 13px; color: rgba(255, 255, 255, 0.35); }

/* -- Hamburger button (hidden on desktop) ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  grid-column: 3;
  justify-self: end;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 2px;
  transition: transform .22s, opacity .22s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -- Responsive ------------------------------------ */
@media (max-width: 980px) {
  .nav-inner { padding: 0 10px; }
  .hero-split { gap: 28px; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-grid .partner-cell:last-child { display: none; }
  .split-examples-grid { grid-template-columns: repeat(3, 1fr); }
  .examples-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: 1fr; }
  .content-block { grid-template-columns: 1fr; }
  .cb-media { order: -1; }
  .white-surface { width: min(var(--container), calc(100% - 24px)); }
  .ws-inner { padding: 0 30px; }
  .ws-divider { margin: 0 30px; }
  .counter-tiles { flex-wrap: wrap; }
  .trusted-stats { flex-wrap: wrap; gap: 16px 0; justify-content: center; }
  .tstat { padding: 0 16px; }
  .tstat-num { font-size: 28px; }
  .tstat-label { font-size: 12px; }
  .tstat-div { height: 40px; }
  .split-aside .btn-cta {
    grid-template-columns: 1fr 50px;
    padding: 12px 14px;
  }
  .split-aside .btn-cta .btn-cta-title { font-size: 20px; }
  .split-aside .btn-cta .btn-cta-sub { font-size: 11px; }
  .split-aside .btn-cta .btn-cta-icon::before { width: 28px; height: 28px; }
  .cta-card { flex-direction: column; align-items: flex-start; }
  .cta-card .btn-cta { min-width: 0; width: 100%; }
}
@media (max-width: 740px) {
  .hero-split { grid-template-columns: 1fr; }
  .split-aside { text-align: center; }
  .split-aside .counter-tiles { justify-content: center; }
  .split-aside .partner-grid { max-width: 480px; margin-left: auto; margin-right: auto; grid-template-columns: repeat(3, 1fr); }
  .split-aside .partner-grid .partner-cell:last-child { display: flex; }
  .split-aside .btn-cta { margin-left: auto; margin-right: auto; }
}
@media (max-width: 768px) {
  .nav-inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    min-height: 70px;
    padding: 0;
  }
  .page-index .nav-inner { padding: 0; }
  .nav-logo { grid-column: 1; grid-row: 1; margin-left: -20px; }
  .nav-logo img { height: 56px; transform: none; }
  .nav-toggle {
    display: flex;
    grid-column: 2;
    grid-row: 1;
  }
  .nav-links,
  .nav-right { display: none; }
  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    width: 100%;
    gap: 0;
    padding: 16px 0 8px;
    border-top: none;
  }
  .nav-links.is-open a {
    padding: 14px 0;
    border-bottom: none;
    font-size: 17px;
    text-align: center;
    letter-spacing: 0.02em;
    opacity: 0.85;
    transition: opacity 0.15s;
  }
  .nav-links.is-open a:hover,
  .nav-links.is-open a.active {
    opacity: 1;
  }
  .nav-right.is-open {
    display: flex;
    grid-column: 1 / -1;
    width: 100%;
    padding: 16px 0 20px;
    border-top: none;
    margin-left: 0;
    justify-content: center;
    gap: 12px;
  }
  .nav-right.is-open .btn-register,
  .nav-right.is-open .btn-login,
  .nav-right.is-open .btn,
  .nav-right.is-open .btn-outline {
    min-width: 120px;
    text-align: center;
    font-size: 15px;
    padding: 10px 24px;
    border-radius: 8px;
  }
  .nav-login-wrap { position: relative; }
}
@media (max-width: 700px) {
  .hero-title h1 { font-size: 28px; }
  .hero-copy { flex: none; width: 100%; }
  .hero-title { padding-left: 0; }
  .hero-inner {
    padding: 0; min-height: auto; padding-bottom: 0;
    flex-direction: column;
  }
  .hero-image {
    flex: none;
    width: 80%;
    max-width: 400px;
    margin: 0 auto -70px;
  }
  .examples-grid { grid-template-columns: repeat(2, 1fr); }
  .white-surface { border-radius: 20px 20px 0 0; width: 100%; border-left: none; border-right: none; border-bottom: none; }
  .ws-inner { padding: 0 16px; }
  .ws-divider { margin: 0 16px; }
  .cta-card { flex-direction: column; align-items: flex-start; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }
  .footer-grid .footer-links { justify-content: center; }
  .footer-grid .footer-logo img { margin: 0 auto; }
  .footer-grid .footer-copy { text-align: center; }
  .hero-split { padding: 36px 0; }
  .split-examples-grid { grid-template-columns: repeat(2, 1fr); }
  .btn-cta {
    width: 100%;
    max-width: 320px;
    grid-template-columns: 1fr 60px;
    padding: 14px 16px;
  }
  .btn-cta-title { font-size: 22px; }
  .btn-cta-sub { font-size: 11px; }
  .btn-cta-icon::before { width: 30px; height: 30px; }
  .split-aside .btn-cta { max-width: none; }
  .page-sidebar .btn-cta { max-width: none; }
  .trusted-heading { font-size: 28px; margin-bottom: 28px; }
  .trusted-stats { flex-wrap: wrap; gap: 16px 0; justify-content: center; }
  .tstat { padding: 0 16px; }
  .tstat-num { font-size: 26px; }
  .tstat-label { font-size: 11px; }
  .tstat-div { height: 36px; }
}
@media (max-width: 480px) {
  .examples-grid { grid-template-columns: 1fr; }
  .split-examples-grid { grid-template-columns: 1fr; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .trusted-heading { font-size: 24px; margin-bottom: 24px; }
  .trusted-stats { justify-content: space-around; }
  .tstat { padding: 0 10px; }
  .tstat-num { font-size: 24px; }
  .tstat-div { display: none; }
  .ws-inner { padding: 0 12px; }
  .ws-divider { margin: 0 12px; }
}

/* ═══════════════════════════════════════════════════════
   INDEX PAGE (.page-index)
   ═══════════════════════════════════════════════════════ */

.page-index .nav-inner { padding: 0 23px; }
.page-index .nav-logo { margin-left: -36px; }

.page-index .white-surface p,
.page-index .white-surface li,
.page-index .cb-lede,
.page-index .cb-list li,
.page-index .feature-card p,
.page-index .section-head p,
.page-index .split-examples-head p,
.page-index .pricing-note,
.page-index .pricing-checks li,
.page-index .cta-card p {
  letter-spacing: 0.01em;
}

.page-index .white-surface h2,
.page-index .white-surface h3,
.page-index .cb-title,
.page-index .aside-heading,
.page-index .trusted-heading,
.page-index .tstat-num {
  font-weight: 900;
  letter-spacing: -0.01em;
}

.page-index .section-head p,
.page-index .split-examples-head p {
  color: rgba(10, 25, 55, 0.62);
}
.page-index .pricing-section .section-head p,
.page-index .pricing-note {
  color: rgba(10, 25, 55, 0.68);
}

.page-index .trusted-heading span { color: #0f5cff; }
.page-index .tstat-num { color: #0f5cff; }

/* Split layout: features + counter side-by-side */
.split-features .section-head { margin-bottom: 18px; }
.split-features .feature-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}
.split-features .feature-card {
  padding: 14px 16px;
  border-radius: 14px;
}
.split-features .feature-head { margin-bottom: 4px; }
.split-features .feature-card p {
  font-size: 15px;
  line-height: 1.55;
}
@media (min-width: 860px) {
  .split-features .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Pricing table */
.pricing-section { padding: 48px 0; }
.pricing-note {
  text-align: center;
  color: rgba(10, 25, 55, 0.70);
  font-size: 15px;
  max-width: 720px;
  margin: 0 auto 28px;
  line-height: 1.6;
}
.pricing-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 18px;
  border: 1px solid rgba(10, 25, 55, 0.10);
  background: #fff;
  overflow: hidden;
  margin-top: 8px;
}
.pricing-strip-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 16px 24px;
  position: relative;
}
.pricing-strip-tier + .pricing-strip-tier::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: rgba(10, 25, 55, 0.08);
}
.pricing-tier {
  font-size: 18px;
  font-weight: 900;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 10px;
}
.pricing-price {
  font-size: 44px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.pricing-currency {
  font-size: 24px;
  font-weight: 700;
  vertical-align: super;
  margin-right: 2px;
}
.pricing-per {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 600;
}
.pricing-range {
  font-size: 13px;
  font-weight: 700;
  color: #0f5cff;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(15, 92, 255, 0.07);
}
.pricing-includes {
  margin-top: 28px;
  text-align: center;
}
.pricing-includes-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.pricing-includes .pricing-checks {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  max-width: 680px;
}
.pricing-includes .pricing-checks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}
@media (max-width: 700px) {
  .pricing-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-strip-tier:nth-child(3)::before { display: none; }
  .pricing-strip-tier:nth-child(n+3) {
    border-top: 1px solid rgba(10, 25, 55, 0.08);
  }
}
@media (max-width: 420px) {
  .pricing-strip { grid-template-columns: 1fr; }
  .pricing-strip-tier + .pricing-strip-tier::before { display: none; }
  .pricing-strip-tier + .pricing-strip-tier {
    border-top: 1px solid rgba(10, 25, 55, 0.08);
  }
  .pricing-includes .pricing-checks {
    flex-direction: column;
    align-items: center;
  }
}

/* Flipbook examples on white surface */
.examples-surface { padding: 48px 0; }
.examples-surface .section-head { margin-bottom: 24px; }
.examples-surface-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.ex-card-surface {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #f0f4f9;
  border: 1px solid rgba(10, 25, 55, 0.08);
  box-shadow: none;
  transition: transform .2s;
}
.ex-card-surface:hover {
  box-shadow: none;
  transform: translateY(-3px);
}
.ex-card-surface .ex-cover {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin: 10px 10px 0;
  border-radius: 10px;
  border: 1px solid rgba(10, 25, 55, 0.06);
}
.ex-card-surface .ex-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ex-card-surface .ex-body {
  padding: 10px 12px 12px;
  text-align: center;
}
.ex-card-surface .ex-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.ex-card-surface .ex-sub {
  font-size: 12.5px;
  color: var(--muted);
}
@media (max-width: 980px) {
  .examples-surface-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .examples-surface-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════
   INNER PAGES SHARED
   ═══════════════════════════════════════════════════════ */

.page-title {
  font-size: 34px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.page-subtitle {
  color: rgba(10, 25, 55, 0.62);
  font-size: 15px;
  margin-bottom: 32px;
  letter-spacing: 0.01em;
}

.page-split {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .page-split { grid-template-columns: 1fr; gap: 0; }
  .page-sidebar { padding-top: 8px; padding-bottom: 32px; position: static; }
  .page-sidebar .btn-cta {
    max-width: none;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    align-items: center;
    padding: 16px 0 16px 20px;
  }
  .page-sidebar .btn-cta-sub {
    grid-column: 2;
    grid-row: 1;
    padding-left: 12px;
  }
  .page-sidebar .btn-cta-icon {
    grid-column: 3;
    grid-row: 1;
    width: 60px;
  }
  .faq-wrap { padding-bottom: 8px; }
  .guides-wrap { padding-bottom: 8px; }
}

.page-sidebar {
  padding-top: 44px;
  position: sticky;
  top: 20px;
}

.page-sidebar .btn-cta {
  width: 100%;
  margin-top: 12px;
  border-radius: 10px;
}

.featured-heading {
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.featured-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.featured-list li {
  border-bottom: 1px solid var(--border);
}
.featured-list li a {
  display: block;
  padding: 11px 0;
  color: rgba(10, 25, 55, 0.72);
  font-size: 14.5px;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}
.featured-list li a:hover {
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════
   FAQ PAGE
   ═══════════════════════════════════════════════════════ */

.faq-wrap { padding: 44px 0 48px; }

.faq-contact {
  color: rgba(10, 25, 55, 0.62);
  font-size: 15px;
  margin-bottom: 24px;
  letter-spacing: 0.01em;
}
.faq-contact a {
  color: #0d3a6a;
  font-weight: 600;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  background: rgba(10, 25, 55, 0.02);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  user-select: none;
  transition: background 0.15s;
}
.faq-question:hover,
.faq-item.is-open .faq-question {
  background: rgba(10, 25, 55, 0.04);
}
.faq-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  stroke: var(--muted);
}
.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}
.faq-answer {
  display: none;
  padding: 14px 24px 20px;
  color: rgba(10, 25, 55, 0.72);
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  border-top: 1px solid var(--border);
}
.faq-answer a {
  color: #0d3a6a;
  text-decoration: underline;
}
.faq-item.is-open .faq-answer {
  display: block;
}
@media (max-width: 900px) {
  .faq-wrap { padding-bottom: 8px; }
}

/* ═══════════════════════════════════════════════════════
   GUIDES PAGE
   ═══════════════════════════════════════════════════════ */

.guides-wrap { padding: 44px 0 48px; }
@media (max-width: 900px) {
  .guides-wrap { padding-bottom: 8px; }
}

.guide-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}
.guide-card:first-of-type { padding-top: 0; }
.guide-card:last-of-type { border-bottom: none; }

.guide-thumb {
  width: 140px;
  height: 100px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(10, 25, 55, 0.05);
}
.guide-body h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.guide-body h3 a { color: inherit; text-decoration: none; }
.guide-body h3 a:hover { color: #0d3a6a; }
.guide-body p {
  color: rgba(10, 25, 55, 0.68);
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  margin-bottom: 12px;
}
.guide-link {
  font-size: 14px;
  font-weight: 700;
  color: #0d3a6a;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.guide-link:hover { color: #0f5cff; }

@media (max-width: 560px) {
  .guide-card { grid-template-columns: 1fr; gap: 12px; }
  .guide-thumb { width: 100%; height: 160px; }
}

/* ═══════════════════════════════════════════════════════
   ARTICLE / GUIDE DETAIL PAGE
   ═══════════════════════════════════════════════════════ */

.article-wrap { padding: 44px 0 48px; }

.breadcrumb {
  font-size: 14px;
  color: rgba(10, 25, 55, 0.5);
  margin-bottom: 20px;
  letter-spacing: 0.01em;
}
.breadcrumb a { color: #0d3a6a; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 6px; }

.article-title {
  font-size: 32px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  line-height: 1.2;
}
.article-hero {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 32px;
  object-fit: cover;
  max-height: 320px;
}
.article-body {
  color: rgba(10, 25, 55, 0.78);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.01em;
}
.article-body h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  margin: 32px 0 12px;
  letter-spacing: -0.01em;
}
.article-body p { margin-bottom: 16px; }
.article-body ul { margin: 0 0 16px 20px; padding: 0; }
.article-body ul li { margin-bottom: 4px; }
.article-body a { color: #0d3a6a; text-decoration: underline; }
.article-body img {
  max-width: 100%;
  border-radius: 10px;
  margin: 16px 0;
  border: 1px solid var(--border);
}
.article-body code {
  background: rgba(10, 25, 55, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
}
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 32px;
  font-size: 14px;
  font-weight: 700;
  color: #0d3a6a;
  text-decoration: none;
}
.article-back:hover { color: #0f5cff; }
.article-body ol { margin: 0 0 16px 20px; padding: 0; }
.article-body ol li { margin-bottom: 4px; }

.embed-generator { margin: 24px 0; }
.embed-field { margin-bottom: 16px; }
.embed-field label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 4px; font-size: 14px; }
.embed-field input[type="text"],
.embed-field textarea {
  width: 100%; max-width: 420px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 14px; font-family: inherit; color: var(--ink);
}
.embed-field input[readonly] { background: rgba(10,25,55,.04); color: rgba(10,25,55,.5); }
.embed-field textarea { max-width: 100%; resize: vertical; }
.embed-field-check label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }

/* ═══════════════════════════════════════════════════════
   DASHBOARD PAGE (.page-dashboard)
   ═══════════════════════════════════════════════════════ */

.page-dashboard .ws-inner { padding: 0 26px; }
.page-dashboard .nav-inner { padding: 0 6px; }
.page-dashboard-sm .ws-inner { padding: 0 34px; }
.page-dashboard-sm .nav-inner { padding: 0 14px; }
.page-dashboard-mid .ws-inner { padding: 0 43px; }
.page-dashboard-mid .nav-inner { padding: 0 23px; }
.page-dashboard-wide .ws-inner { padding: 0 60px; }
.page-dashboard-wide .nav-inner { padding: 0 40px; }

.page-dashboard .content-area::before,
.page-dashboard-mid .content-area::before { display: none; }
.page-dashboard .white-surface,
.page-dashboard-mid .white-surface { overflow: visible; }
.page-dashboard .white-surface::before,
.page-dashboard-mid .white-surface::before { inset: 0; border-radius: inherit; }

.dash-wrap { padding: 28px 0 36px; }
.page-dashboard-sm .dash-wrap { padding: 36px 0 42px; }
.page-dashboard-mid .dash-wrap { padding: 44px 0 48px; }
.page-dashboard-wide .dash-wrap { padding: 60px 0; }

.dash-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid rgba(10, 25, 55, 0.12);
  background: rgba(10, 25, 55, 0.03);
  color: rgba(10, 25, 55, 0.82);
  font-size: 16px;
  letter-spacing: 0.01em;
}
.notice-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.notice-icon svg { width: 16px; height: 16px; stroke: #fff; fill: none; }
.dash-notice strong { font-weight: 800; color: var(--ink); }
.dash-notice + .dash-head { margin-top: 16px; }

.dash-notice-silver,
.dash-notice-gold,
.dash-notice-platinum {
  color: #000;
  text-transform: uppercase;
  font-weight: 700;
}
.dash-notice-silver strong,
.dash-notice-gold strong,
.dash-notice-platinum strong { color: #000; }

.dash-notice-silver {
  background: linear-gradient(to bottom, #e4e3e8 50%, #d8d7dd 50%);
  border-color: #a1a1a1;
}
.dash-notice-silver .notice-icon { background: #7c7c82; }

.dash-notice-gold {
  background: linear-gradient(to bottom, #ebad26 50%, #e59f01 50%);
  border-color: #ce8e00;
}
.dash-notice-gold .notice-icon { background: #ce8e00; }

.dash-notice-platinum {
  background: linear-gradient(to bottom, #858585 50%, #777777 50%);
  border-color: #737373;
}
.dash-notice-platinum .notice-icon { background: #555; }

.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(10, 25, 55, 0.03);
  border: 1px solid rgba(10, 25, 55, 0.10);
}
.dash-title {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.dash-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-purchase-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(to bottom, #5db843, #3d8c28);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s;
}
.btn-purchase-all .fl { width: 16px; height: 16px; flex-shrink: 0; }
.btn-purchase-all { position: relative; }
.btn-purchase-all::after,
.btn-purchase-all::before { content: none; }
.btn-purchase-all:hover { filter: brightness(1.1); }

.dash-help {
  margin: 10px 0 8px;
  color: rgba(10, 25, 55, 0.62);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.01em;
}
.dash-help a { color: #0d3a6a; text-decoration: underline; }

/* Flipbook card grid */
.dash-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 980px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dash-grid { grid-template-columns: 1fr; }
}

/* Add-new tile */
.tile-add {
  background: #0b2b89;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tile-add-hit {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: 100%;
  color: inherit;
  cursor: pointer;
  border-radius: inherit;
  display: flex;
  flex: 1;
}
.tile-add-hit:focus-visible {
  outline: 2px solid rgba(70, 213, 255, 0.85);
  outline-offset: 2px;
}
.tile-add .tile-body {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding: 24px;
  flex: 1;
}
.tile-add .add-plus { color: rgba(255, 255, 255, 0.2); }
.tile-add .add-plus svg { width: 56px; height: 56px; display: block; }
.tile-add .add-plus svg path { fill: currentColor; }
.tile-add h3 {
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.tile-add .upload-inline { width: 100%; position: relative; }
.tile-add .upload-inline input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.btn-gold {
  display: block;
  width: 100%;
  padding: 16px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-align: center;
  color: rgba(40, 28, 0, 0.92);
  background: linear-gradient(180deg, #e9b227 0%, #bf8200 100%);
  border: 1px solid rgba(25, 18, 0, 0.22);
  cursor: pointer;
  transition: filter 0.15s;
}
.btn-gold:hover { filter: brightness(1.05); }

/* Flipbook tiles */
.tile {
  border-radius: 14px;
  background: rgba(10, 25, 55, 0.03);
  border: 1px solid var(--border);
  overflow: visible;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.flipbook-hero {
  position: relative;
  height: 224px;
  padding: 18px 14px 18px;
  display: grid;
  place-items: center;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  overflow: hidden;
}
.flipbook-cover {
  position: relative;
  height: 190px;
  width: auto;
  max-width: 78%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.flipbook-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(var(--cover-zoom, 1));
  transform-origin: center;
}
.cover-converting {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 4px;
  display: grid;
  place-items: center;
}
.cover-converting[hidden] { display: none; }
.fl-cogwheel {
  display: block;
  width: 24px;
  height: 24px;
  background: #0b2b89;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M495.9 166.6c3.2 8.7.5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6.3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/svg%3E") no-repeat 50% 50% / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M495.9 166.6c3.2 8.7.5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6.3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/svg%3E") no-repeat 50% 50% / contain;
  animation: cog-spin 2.5s linear infinite;
}
@keyframes cog-spin { to { transform: rotate(360deg); } }
.cover-error {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 4px;
  display: grid;
  place-items: center;
}
.cover-error[hidden] { display: none; }
.cover-error-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2.5px solid #ef4444;
  color: #ef4444;
  font-size: 18px;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
}
/* Converting badge (pill) */
.flipbook-converting-badge {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 6px;
  background: #0b2b89;
  color: rgba(255, 255, 255, 0.94);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1.2;
  position: relative;
}
.flipbook-converting-badge[hidden] { display: none; }
.flipbook-converting-badge-label { flex: 1; text-align: center; }
.flipbook-converting-badge-help {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #f59e0b;
  border: 1px solid rgba(80, 50, 0, 0.22);
  color: rgba(80, 50, 0, 0.92);
  cursor: pointer;
  user-select: none;
}
.flipbook-converting-badge-help .q {
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}
.flipbook-converting-badge-help::after,
.flipbook-converting-badge-help::before { content: none; }

.flipbook-meta {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.flipbook-meta > * {
  min-width: 0;
}
.flipbook-name {
  margin: 0;
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flipbook-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: rgba(10, 25, 55, 0.62);
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
  flex-shrink: 0;
}
.status-dot.is-busy {
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
}
.status-dot.is-error {
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

/* Action buttons */
.flipbook-actions {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.icon-actions {
  width: 100%;
  display: flex;
  gap: 6px;
  align-items: center;
}
.icon-action {
  flex: 1;
  min-width: 38px;
  height: 46px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(10, 25, 55, 0.05);
  border: 1px solid var(--border);
  color: rgba(10, 25, 55, 0.6);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  position: relative;
  cursor: pointer;
  text-decoration: none;
}
.icon-action svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.icon-action:hover {
  background: rgba(10, 25, 55, 0.08);
  border-color: rgba(10, 25, 55, 0.18);
  color: var(--ink);
}

/* Icon tooltips (handled by JS) */
.icon-action::after,
.icon-action::before { content: none; }
.icon-action.is-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}

.btn-purchase {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  min-height: 50px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: linear-gradient(to bottom, #5db843, #3d8c28);
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: filter 0.15s;
  box-sizing: border-box;
  font-family: inherit;
}
.btn-purchase .fl { width: 18px; height: 18px; flex-shrink: 0; }
.btn-purchase { position: relative; }
.btn-purchase[data-tip]::after,
.btn-purchase[data-tip]::before { content: none; }
.btn-purchase:hover { filter: brightness(1.1); }
.btn-purchase.btn-download {
  background: linear-gradient(180deg, #f0c640 0%, #d4a017 100%);
  color: rgba(40, 28, 0, 0.92);
  border: none;
}
.btn-purchase.btn-download:hover { filter: brightness(1.05); }

/* Expires bar */
.expires {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 6px;
  background: #0b2b89;
  color: rgba(255, 255, 255, 0.94);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.2;
  position: relative;
}
.expires-label { flex: 1; text-align: center; }

.expires-help {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #e9b227;
  border: 1px solid rgba(25, 18, 0, 0.22);
  color: rgba(40, 28, 0, 0.92);
  cursor: pointer;
  user-select: none;
}
.expires-help .q {
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}
.expires-help::after,
.expires-help::before { content: none; }


/* Dashboard footer variant (single-row) */
.footer-row {
  display: flex;
  align-items: center;
  gap: 24px;
}
.footer-brand { flex-shrink: 0; }
.footer-brand .footer-logo img {
  height: 40px;
  opacity: 0.8;
  margin-bottom: 4px;
  margin-left: -18px;
}
.footer-row .footer-links {
  flex: 1;
  justify-content: center;
  padding-top: 0;
}
.footer-row .footer-copy {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  margin: 0;
  flex-shrink: 0;
  text-align: right;
}
@media (max-width: 900px) {
  .footer-row {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .footer-row .footer-links { justify-content: center; }
}

.page-dashboard .site-footer { padding: 20px 0; }

@media (max-width: 980px) {
  .page-dashboard-mid .ws-inner { padding: 0 30px; }
  .page-dashboard-mid .nav-inner { padding: 0 10px; }
  .page-dashboard-wide .ws-inner { padding: 0 30px; }
  .page-dashboard-wide .nav-inner { padding: 0 10px; }
}
@media (max-width: 700px) {
  .page-dashboard .ws-inner,
  .page-dashboard-sm .ws-inner,
  .page-dashboard-mid .ws-inner,
  .page-dashboard-wide .ws-inner { padding: 0 16px; }
  .page-dashboard .nav-inner,
  .page-dashboard-sm .nav-inner,
  .page-dashboard-mid .nav-inner,
  .page-dashboard-wide .nav-inner { padding: 0; }
  .page-dashboard-sm .dash-wrap,
  .page-dashboard-mid .dash-wrap,
  .page-dashboard-wide .dash-wrap { padding: 28px 0 36px; }
  .dash-head { padding: 10px 12px; }
  .dash-notice { padding: 12px 14px; font-size: 15px; }
}
@media (max-width: 480px) {
  .page-dashboard .ws-inner,
  .page-dashboard-sm .ws-inner,
  .page-dashboard-mid .ws-inner,
  .page-dashboard-wide .ws-inner { padding: 0 12px; }
}

/* ── JS tooltips (body-level, Safari-safe) ── */
.js-tip {
  position: fixed;
  z-index: 10000;
  max-width: min(280px, calc(100vw - 16px));
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
}
.js-tip-wide {
  white-space: normal;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.js-tip::before {
  content: "";
  position: absolute;
  left: var(--arrow-left, 50%);
  top: 100%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--ink);
}
.js-tip-below::before {
  top: auto;
  bottom: 100%;
  border-top: none;
  border-bottom: 6px solid var(--ink);
}
.js-tip img {
  display: block;
  max-width: 100%;
  margin: 0 auto 6px;
  border-radius: 4px;
}
.js-tip-wide:has(img) {
  max-width: min(380px, calc(100vw - 16px));
}

/* ── Settings help ? icons ── */
.settings-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #e5e7eb;
  border: 1px solid rgba(0,0,0,.1);
  color: #555;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  margin-left: 6px;
  flex-shrink: 0;
}
.settings-help:hover {
  background: #d1d5db;
}
.settings-help .q {
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}
.settings-help::after,
.settings-help::before { content: none; }
.settings-checks .settings-help {
  margin-left: 4px;
}
.settings-color-field .settings-help {
  margin-left: 4px;
}

/* ── Delete dialog ── */
#delete-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: none;
  border-radius: 12px;
  padding: 28px 24px 20px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  max-width: min(520px, 92vw);
  width: 100%;
}
#delete-dialog::backdrop {
  background: rgba(0,0,0,.45);
}
#delete-dialog h3 {
  margin: 0 0 10px;
  font-size: 18px;
}
#delete-dialog p {
  margin: 0 0 16px;
  color: var(--muted);
}
#delete-dialog menu {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  list-style: none;
}
#delete-dialog button {
  appearance: none;
  border: 1px solid var(--border);
  background: #fff;
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
#delete-dialog button:hover {
  background: #f5f5f5;
}
#delete-dialog #delete-dialog-ok {
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
}
#delete-dialog #delete-dialog-ok:hover {
  background: #991b1b;
}
#delete-dialog .dlg-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  appearance: none;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: rgba(10, 25, 55, 0.45);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
}
#delete-dialog .dlg-close:hover {
  background: rgba(10, 25, 55, 0.07);
  color: var(--ink);
}

/* ── Settings page ── */
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.settings-header h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}
.settings-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #0b2b89;
  text-decoration: none;
}
.settings-back:hover { text-decoration: underline; }

.settings-section {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 18px;
}
.settings-section h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.settings-field {
  margin-bottom: 14px;
}
.settings-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}
.settings-field input[type="text"],
.settings-field select {
  width: 100%;
  max-width: 360px;
  padding: 9px 12px;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  transition: border-color .15s;
}
.settings-field input[type="text"]:focus,
.settings-field select:focus {
  outline: none;
  border-color: #0b2b89;
  box-shadow: 0 0 0 3px rgba(11,43,137,.1);
}

.settings-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 24px;
}
.settings-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  padding: 4px 0;
}
.settings-checks input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #0b2b89;
  flex-shrink: 0;
}

.settings-colors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px 24px;
}
.settings-color-field {
  display: flex;
  align-items: center;
  gap: 10px;
}
.settings-color-field label {
  font-size: 13px;
  font-weight: 600;
  color: #444;
  flex: 1;
}
.settings-color-field input[type="color"] {
  width: 42px;
  height: 34px;
  padding: 2px;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
  flex-shrink: 0;
}

.settings-bg-preview {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.settings-bg-thumb {
  width: 140px;
  height: 100px;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  overflow: hidden;
  background: #f7f7f7;
}
.settings-bg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.settings-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}
.btn-settings-save {
  background: #1f7a1f;
  color: #fff;
  border: 0;
  padding: 11px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: filter .15s;
}
.btn-settings-save:hover { filter: brightness(1.15); }
.btn-settings-remove {
  background: #b91c1c;
  color: #fff;
  border: 0;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.btn-settings-remove:hover { filter: brightness(1.15); }

.settings-alert {
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
}
.settings-alert-ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.settings-alert-err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.settings-alert-warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

@media (max-width: 640px) {
  .settings-section { padding: 16px; }
  .settings-checks { grid-template-columns: 1fr; }
  .settings-colors { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   AUTH / FORM PAGES
   ═══════════════════════════════════════════════════════ */

.page-auth .ws-inner { padding: 48px 43px 52px; }

.page-auth h1 {
  font-size: 32px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.page-auth h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 36px 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.page-auth h2:first-of-type { margin-top: 28px; }

.page-auth .form-alert {
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.page-auth .form-alert-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.page-auth .form-alert-success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.page-auth .form-alert-info {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.page-auth form {
  max-width: 420px;
}
.page-auth .form-wide {
  max-width: 560px;
}

.page-auth .form-group {
  margin-bottom: 18px;
}
.page-auth .form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}
.page-auth .form-group input[type="text"],
.page-auth .form-group input[type="email"],
.page-auth .form-group input[type="password"],
.page-auth .form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.page-auth .form-group input:focus,
.page-auth .form-group select:focus {
  outline: none;
  border-color: #0b2b89;
  box-shadow: 0 0 0 3px rgba(11, 43, 137, 0.10);
}

.page-auth .form-check {
  margin-bottom: 10px;
}
.page-auth .form-check label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
}
.page-auth .form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #0b2b89;
  flex-shrink: 0;
}

.page-auth .btn-submit {
  display: inline-block;
  margin-top: 6px;
  padding: 11px 32px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: none;
  color: #fff;
  background: linear-gradient(to bottom, #5db843, #3d8c28);
  transition: filter .15s;
}
.page-auth .btn-submit:hover { filter: brightness(1.08); }

.page-auth .btn-danger {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: none;
  color: #fff;
  background: #b91c1c;
  transition: filter .15s;
}
.page-auth .btn-danger:hover { filter: brightness(1.1); }

.page-auth .form-footer {
  margin-top: 24px;
  font-size: 15px;
  color: rgba(10, 25, 55, 0.68);
}
.page-auth .form-footer a {
  color: #0d3a6a;
  font-weight: 600;
  text-decoration: underline;
}
.page-auth .form-footer a:hover { color: #0f5cff; }

.page-auth .form-note {
  color: rgba(10, 25, 55, 0.62);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 16px;
}

@media (max-width: 980px) {
  .page-auth .ws-inner { padding: 40px 30px 44px; }
}
@media (max-width: 700px) {
  .page-auth .ws-inner { padding: 32px 16px 36px; }
  .page-auth h1 { font-size: 26px; }
}
@media (max-width: 480px) {
  .page-auth .ws-inner { padding: 28px 12px 32px; }
}

/* ═══════════════════════════════════════════════════════
   INVOICES PAGE
   ═══════════════════════════════════════════════════════ */

.invoices-wrap { padding: 44px 0 48px; }
.invoices-wrap h1 {
  font-size: 28px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.invoices-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #0b2b89;
  text-decoration: none;
  margin-bottom: 20px;
}
.invoices-back:hover { text-decoration: underline; }

.invoices-table {
  width: 100%;
  border-collapse: collapse;
}
.invoices-table th,
.invoices-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
  color: var(--ink);
  font-size: 14px;
}
.invoices-table th {
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.invoices-table td code {
  font-size: 12px;
  background: rgba(10, 25, 55, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
}
.invoices-table .btn-invoice {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(10, 25, 55, 0.03);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.invoices-table .btn-invoice:hover { background: rgba(10, 25, 55, 0.07); }
.invoices-muted { color: var(--muted); font-size: 14px; }

.invoices-pagination {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}
.invoices-pagination .btn-invoice {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(10, 25, 55, 0.03);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.invoices-pagination .btn-invoice:hover { background: rgba(10, 25, 55, 0.07); }

@media (max-width: 700px) {
  .invoices-table th,
  .invoices-table td { padding: 8px 6px; font-size: 13px; }
  .invoices-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ═══════════════════════════════════════════════════════
   OWNERSHIP BAND — self-hosted / no-cloud section
   ═══════════════════════════════════════════════════════ */

.ownership-band { padding: 48px 0; }
.ownership-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 10px;
}
.ownership-card {
  background: rgba(5, 26, 56, 0.035);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ownership-card-icon {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #0d3a6a 0%, #1a5fa8 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ownership-card-icon svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ownership-card h3 {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}
.ownership-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 860px) {
  .ownership-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ownership-grid { grid-template-columns: 1fr; gap: 12px; }
  .ownership-band { padding: 36px 0; }
}

/* ═══════════════════════════════════════════════════════
   FLIPBOOK FEATURES SECTION — wrapper for product features
   ═══════════════════════════════════════════════════════ */

.fb-features-section {
  padding: 48px 0;
}
@media (max-width: 700px) {
  .fb-features-section { padding: 36px 0; }
}
@media (max-width: 480px) {
  .fb-features-section { padding: 28px 0; }
}

/* ═══════════════════════════════════════════════════════
   SECONDARY OUTLINE BUTTON
   ═══════════════════════════════════════════════════════ */

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  border-radius: 10px;
  border: 2px solid var(--navy);
  background: transparent;
  color: var(--navy);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-outline:hover {
  background: var(--navy);
  color: #fff;
}
.btn-outline svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════════════
   TRUST BAND — Fortune 500 / legacy block
   ═══════════════════════════════════════════════════════ */

.trust-band {
  text-align: left;
  padding: 48px 0;
}
.trust-band .section-head {
  max-width: none;
  margin: 0 0 24px;
}
.trust-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.trust-pillar {
  background: rgba(10, 25, 55, 0.035);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.trust-pillar-num {
  font-size: 32px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.03em;
  line-height: 1;
}
.trust-pillar-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  line-height: 1.35;
}
.trust-callout {
  max-width: 720px;
  margin: 0 auto;
  background: rgba(245, 197, 24, 0.08);
  border: 1px solid rgba(245, 197, 24, 0.35);
  border-radius: 14px;
  padding: 22px 28px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.65;
  text-align: left;
}
.trust-callout strong {
  font-weight: 700;
  color: var(--navy);
}
@media (max-width: 860px) {
  .trust-pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .trust-pillars { grid-template-columns: 1fr 1fr; gap: 12px; }
  .trust-pillar { padding: 20px 12px 18px; }
  .trust-pillar-num { font-size: 26px; }
  .trust-callout { padding: 18px 16px; font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════
   FEATURES MORE LINK — below features grid on homepage
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   DESIGN OVERHAUL — typography, rhythm, visual contrast
   ═══════════════════════════════════════════════════════ */

/* 1 ─ Typography scale */
.section-head { margin-bottom: 24px; }
.section-head h2 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 900;
  letter-spacing: -0.025em;
}
.section-head p {
  font-size: 16px;
  color: rgba(10, 25, 55, 0.72);
  line-height: 1.6;
}

/* 2 ─ Trust block */
.trust-band {
  text-align: left;
  padding: 48px 0;
}
.trust-band .section-head {
  max-width: none;
}
.trust-band .section-head h2 {
  font-size: clamp(26px, 3vw, 36px);
  margin-bottom: 14px;
}
.trust-band .section-head p {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(10, 25, 55, 0.70);
}
.trust-band .section-head p + p {
  margin-top: 14px;
}

/* 3 ─ Industry sections — alternating layout + spacing */
.industry-section { padding: 48px 0; }
.industry-section + .industry-section {
  border-top: 1px solid var(--border);
}

/* Publishers: image flips to the left */
.content-block.cb-flipped {
  grid-template-columns: 0.85fr 1.15fr;
}
.content-block.cb-flipped .cb-media {
  order: -1;
}

/* Industry icons — slightly larger */
.cb-icon { width: 26px; height: 26px; }
.cb-head { gap: 12px; }

/* 4 ─ Ownership band — full-width dark navy strip */
.ownership-band {
  background: linear-gradient(135deg, #041e40 0%, #051a38 60%, #041428 100%);
  margin: 0 -43px;
  padding: 52px 72px 56px;
}
.ownership-band .section-head {
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}
.ownership-band .section-head h2 {
  color: #fff;
  font-size: clamp(26px, 3vw, 36px);
  white-space: nowrap;
}
.ownership-band .section-head p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
}

/* 5 ─ Features section */
.features-section { padding: 48px 0; }
.feature-card {
  padding: 22px 22px 20px;
}
.feature-icon { width: 26px; height: 26px; }
.feature-head {
  grid-template-columns: 26px 1fr;
  gap: 13px;
  margin-bottom: 10px;
}
.feature-head h3 { font-size: 16px; }

/* 6 ─ Pricing section */
.pricing-section { padding: 48px 0; }
.pricing-tier { font-size: 18px; letter-spacing: -0.02em; margin-bottom: 10px; }
.pricing-price { font-size: 44px; letter-spacing: -0.03em; }

/* 7 ─ CTA card — dark navy */
.cta-card {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 40px rgba(5, 26, 56, 0.28), inset 0 1px 0 rgba(255,255,255,0.07);
}
.cta-card h2 { color: #fff; }
.cta-card p  { color: rgba(255, 255, 255, 0.72); }

/* 8 ─ Examples surface */
.examples-surface { padding: 48px 0; }

/* 9 ─ Social proof */
.social-proof-wrap { padding: 48px 0; }

/* ─ Responsive updates for overhaul ─ */
@media (max-width: 980px) {
  .ownership-band { margin: 0 -30px; padding: 48px 40px; }
  .content-block.cb-flipped { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ownership-band { margin: 0 -16px; padding: 40px 16px; }
  .ownership-band .section-head h2 { white-space: normal; }
  .trust-band { padding: 36px 0; }
  .industry-section { padding: 36px 0; }
  .features-section { padding: 36px 0; }
  .pricing-section { padding: 36px 0; }
  .section-head h2 { font-size: clamp(22px, 5vw, 30px); }
  .trust-band .section-head h2 { font-size: clamp(22px, 5vw, 30px); }
  .content-block.cb-flipped .cb-media { order: 0; }
}
@media (max-width: 480px) {
  .trust-band { padding: 28px 0; }
  .features-section { padding: 28px 0; }
  .pricing-section { padding: 28px 0; }
}