/* ============================================================
   ZEUS PUBLISHING — Design System v3 · "Editage-style"
   Reference: editage.com — royal blue #113DCD, deep navy #00084D,
   yellow #FFDC68 accent, Poppins display + Lato body, pill buttons,
   clean white cards. Token names kept from v1/v2 so page-local
   styles keep working (--serif/--gold-* are legacy names remapped).
   ============================================================ */

:root {
  /* Blue system (Editage: indigo hero + royal blue primary) */
  --navy-950: #10173F;
  --navy-900: #1B2569;   /* indigo navy: dark sections, footer */
  --navy-800: #113DCD;   /* PRIMARY royal blue */
  --navy-700: #0C2DB0;   /* primary hover */
  --navy-600: #3B5FE0;
  --navy-100: #DEE3FA;   /* lavender tint band */
  /* Editage gradient accents */
  --purple: #7B4BE0;
  --pink: #E91E8C;
  --grad: linear-gradient(90deg, #2242C8 0%, #7B4BE0 55%, #E91E8C 100%);
  /* Legacy "gold" tokens → remapped accents */
  --gold-600: #113DCD;   /* accent TEXT on light = blue */
  --gold-500: #7B4BE0;   /* accent fill = purple */
  --gold-400: #A9BFFF;   /* accent on dark = periwinkle */
  --gold-100: #EEE9FC;   /* light purple tint */
  /* Surfaces */
  --paper: #F7F9FE;
  --paper-2: #EFF3FC;
  --white: #FFFFFF;
  --ink: #262626;
  --muted: #4B5563;
  --line: #E5E9F2;
  --success: #166B42;
  --on-dark: #F2F4FF;
  --on-dark-soft: #B6BDDC;
  /* Type (legacy names: --serif = display face, --sans = body) */
  --serif: "Poppins", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sans: "Lato", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(2, 12, 77, .06), 0 6px 18px rgba(2, 12, 77, .05);
  --shadow-md: 0 4px 10px rgba(2, 12, 77, .07), 0 14px 34px rgba(2, 12, 77, .09);
  --shadow-lg: 0 8px 18px rgba(2, 12, 77, .08), 0 24px 56px rgba(2, 12, 77, .13);
  --radius: 12px;
  --radius-sm: 8px;
  --maxw: 1180px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  /* Editage signature: gradient strip at the very top */
  border-top: 5px solid;
  border-image: var(--grad) 1;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
::selection { background: var(--navy-100); color: var(--navy-900); }
:focus-visible { outline: 3px solid rgba(17, 61, 205, .45); outline-offset: 2px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Typography ---------- */
h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: #191C3A;
}
h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1.1; }
h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); }
h3 { font-size: 1.22rem; }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 640px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy-800); margin-bottom: 14px; font-family: var(--serif);
}
.eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--gold-500); }
.section { padding: 92px 0; }
.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .lead { margin: 12px auto 0; }
.section-head h2 + .lead { margin-top: 12px; }

/* Dark sections: Editage deep navy with a soft blue glow */
.dark {
  background-color: var(--navy-900);
  background-image: radial-gradient(640px 420px at 85% -10%, rgba(17, 61, 205, .5), transparent 62%);
  color: var(--on-dark);
}
.dark .lead { color: var(--on-dark-soft); }
.dark .eyebrow { color: var(--gold-400); }
.dark .eyebrow::before { background: var(--gold-400); }
.dark h1, .dark h2, .dark h3 { color: var(--white); }

/* ---------- Buttons: Editage pills ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 26px; height: 50px; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--serif); font-weight: 600; font-size: .93rem; letter-spacing: 0;
  text-transform: none; white-space: nowrap;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-navy { background: var(--navy-800); color: var(--white); }
.btn-navy:hover { background: var(--navy-700); box-shadow: 0 8px 20px rgba(17, 61, 205, .3); }
.btn-gold { background: linear-gradient(90deg, #2242C8, #7B4BE0); color: var(--white); }
.btn-gold:hover { background: linear-gradient(90deg, #1B38B4, #6A3BD1); box-shadow: 0 8px 22px rgba(84, 68, 214, .38); }
.btn-outline { border-color: var(--navy-800); color: var(--navy-800); background: transparent; }
.btn-outline:hover { background: var(--navy-800); color: var(--white); }
/* On dark heroes: solid white pill, like Editage's "Submit Enquiry" */
.btn-outline-light { border-color: var(--white); background: var(--white); color: var(--navy-900); }
.btn-outline-light:hover { background: #EDF1FF; border-color: #EDF1FF; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.btn-lg { height: 56px; padding: 0 34px; font-size: 1rem; }
.btn-sm { height: 42px; padding: 0 20px; font-size: .85rem; }

/* ---------- Topbar: light utility bar (Editage-style) ---------- */
.topbar { background: #F3F5FB; color: var(--muted); font-size: .8rem; border-bottom: 1px solid var(--line); }
.topbar .container { display: flex; justify-content: space-between; align-items: center; padding-top: 7px; padding-bottom: 7px; gap: 16px; }
.topbar a { color: var(--navy-800); font-weight: 700; transition: color .18s; }
.topbar a:hover { color: var(--purple); }
.topbar-items { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar-items span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(2, 12, 77, .09); }
/* Editage layout: logo left · nav right beside it · Login/Register/CTA on the right */
.nav-wrap { display: flex; align-items: center; height: 78px; gap: 10px; }
.logo { display: flex; align-items: center; gap: 11px; min-width: 0; flex: none; }
.logo-img { height: 50px; width: auto; display: block; }
.logo-img-footer { background: var(--white); padding: 10px 16px; border-radius: 12px; height: 58px; }
.main-nav { justify-content: flex-start; margin-left: 22px; margin-right: auto; }
.nav-cta { flex: none; }
.nav-login {
  font-weight: 700; font-size: .95rem; color: var(--ink); padding: 9px 14px; border-radius: 8px;
  transition: color .16s, background-color .16s;
}
.nav-login:hover { color: var(--navy-800); background: var(--paper-2); }
.logo-mark { width: 42px; height: 42px; flex: none; }
.logo-text { line-height: 1.05; }
.logo-text b { display: block; font-family: var(--serif); font-size: 1.28rem; font-weight: 800; letter-spacing: .08em; color: var(--navy-900); }
.logo-text span { display: block; font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--navy-800); font-weight: 700; }
.main-nav { display: flex; align-items: center; gap: 0; }
.main-nav > li { position: relative; }
.main-nav > li > a {
  display: flex; align-items: center; gap: 5px; padding: 9px 12px;
  font-size: .95rem; font-weight: 700; color: var(--ink); border-radius: 8px;
  transition: color .16s, background-color .16s;
}
.main-nav > li > a:hover { color: var(--navy-800); background: var(--paper-2); }
.main-nav > li > a.active { color: var(--navy-800); box-shadow: inset 0 -2px 0 var(--navy-800); border-radius: 8px 8px 0 0; }
.main-nav .caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 300px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.main-nav li:hover .dropdown, .main-nav li:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 11px 14px; border-radius: var(--radius-sm); font-size: .88rem; transition: background-color .15s; }
.dropdown a b { display: block; font-family: var(--serif); font-weight: 600; font-size: .95rem; color: var(--navy-900); }
.dropdown a small { color: var(--muted); font-size: .78rem; }
.dropdown a:hover { background: var(--paper-2); }
.dropdown a:hover b { color: var(--navy-800); }
.nav-cta { display: flex; align-items: center; gap: 10px; flex: none; }
/* The auth block main.js builds into the hamburger menu. Hidden by default and
   turned on ONLY by the open-menu rule in the max-width:1099px block, because it
   stays in the DOM after the menu closes: without this it reappears beside the
   logo as a stray nav item the moment the layout is wide — which is exactly what
   desktop view does on a phone. */
.main-nav > li.nav-mobile-auth { display: none; }
.nav-toggle { display: none; background: none; border: none; width: 44px; height: 44px; position: relative; flex: none; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 10px; width: 24px; height: 2.4px; background: var(--navy-900); border-radius: 2px; transition: all .25s var(--ease);
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -8px; left: 0; }
.nav-toggle span::after { top: 8px; left: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero .container { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; padding-top: 88px; padding-bottom: 96px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 12px; padding: 0; border-radius: 0;
  background: none; border: none; flex-wrap: wrap;
  color: var(--gold-400); font-size: .76rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: 22px; font-family: var(--serif);
}
.hero-badge::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--grad); flex: none; }
.hero h1 span { color: var(--gold-400); font-style: normal; }
.hero .lead { margin: 20px 0 36px; font-size: 1.15rem; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-note { margin-top: 28px; display: flex; gap: 26px; flex-wrap: wrap; font-size: .84rem; color: var(--on-dark-soft); }
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.hero-note svg { width: 15px; height: 15px; color: var(--gold-400); }
.hero-art { position: relative; }

/* ---------- Hero slider (Editage-style) ---------- */
.hero-slider { position: relative; overflow: hidden; }
.hero-slides { display: flex; transition: transform .55s var(--ease); }
.hero-slide { flex: 0 0 100%; min-width: 0; }
.slide-journal h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.slide-cover { display: flex; justify-content: center; }
.slide-cover img {
  width: 100%; max-width: 300px; border-radius: 10px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
  transform: rotate(3deg); transition: transform .4s var(--ease);
}
.hero-slide:hover .slide-cover img { transform: rotate(0deg) translateY(-6px); }
.cover-fan { display: flex; justify-content: center; align-items: center; }
.cover-fan img { width: 42%; margin: 0 -5%; border-radius: 8px; box-shadow: 0 24px 48px rgba(0, 0, 0, .5); }
.cover-fan img:nth-child(1) { transform: rotate(-8deg); }
.cover-fan img:nth-child(2) { transform: translateY(-12px) scale(1.07); z-index: 2; position: relative; }
.cover-fan img:nth-child(3) { transform: rotate(8deg); }
/* Arrows live together in the bottom-right corner — never over the content */
.hero-arrow {
  position: absolute; bottom: 54px; z-index: 6;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .28); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.hero-arrow svg { width: 18px; height: 18px; }
.hero-arrow:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .6); }
.hero-arrow.prev { right: 76px; left: auto; }
.hero-arrow.next { right: 24px; }
/* Clear round dots (no numbers): hollow white circles, the active one filled orange.
   Raised above the floating trust card that overlaps the hero bottom by 38px. */
.hero-dots { position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 6; }
.hero-dot {
  width: 14px; height: 14px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .75); background: transparent;
  transition: all .2s var(--ease);
}
.hero-dot:hover { background: rgba(255, 255, 255, .35); }
.hero-dot.active {
  background: #F9A51A; border-color: #F9A51A;
  box-shadow: 0 0 0 4px rgba(249, 165, 26, .3);
}
@media (max-width: 760px) {
  .hero-arrow { width: 36px; height: 36px; bottom: 50px; }
  .hero-arrow.prev { right: 62px; }
  .hero-arrow.next { right: 16px; }
  .hero-dots { left: 24px; transform: none; bottom: 52px; }
  .slide-cover img { max-width: 220px; }
}

/* ---------- Trust strip: floating card over lavender band (Editage-style) ---------- */
.trust { background: var(--navy-100); }
.trust .container {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 24px 32px; transform: translateY(-38px); margin-bottom: -14px;
}
.trust-label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.trust-logos { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* Publishing sits on one side of the rule, author services on the other — the
   divider does that grouping, so every chip starts from the same colour. */
.trust-logos .tl-sep { width: 1px; height: 24px; background: var(--line); flex: none; }
/* Each chip goes to the page it names, so the hover means something. */
.trust-logos a { transition: background-color .16s var(--ease), border-color .16s var(--ease),
  color .16s var(--ease), transform .16s var(--ease); }
.trust-logos a:hover { background: var(--navy-800); border-color: var(--navy-800);
  color: var(--white); transform: translateY(-2px); }
.trust-logos span, .trust-logos a {
  font-family: var(--serif); font-weight: 600; font-size: .88rem; color: var(--navy-900);
  padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
}

/* ---------- Stats: modern gradient stat band ---------- */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.stats-grid::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad);
}
.stat {
  text-align: center; padding: 40px 20px 36px; background: none;
  border: none; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none;
  transition: background-color .22s var(--ease);
}
.stat:first-child { border-left: none; }
.stat:hover { background: var(--paper); }
.stat-icon {
  width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.stat-icon svg { width: 26px; height: 26px; }
.si-blue { background: #E1F3FC; color: #0E7DB8; }
.si-pink { background: #FDE7F3; color: #C4156E; }
.si-orange { background: #FEF3D9; color: #C77A00; }
.si-navy { background: #E2E6F5; color: #1B2569; }
.stat:hover .stat-icon { transform: translateY(-4px) scale(1.1) rotate(-4deg); box-shadow: 0 10px 20px rgba(2, 12, 77, .12); }
.dark .si-blue { background: rgba(41, 171, 226, .18); color: #7FD0F5; }
.dark .si-pink { background: rgba(236, 30, 121, .18); color: #F98BC4; }
.dark .si-orange { background: rgba(249, 165, 26, .18); color: #FFC968; }
.dark .si-navy { background: rgba(255, 255, 255, .1); color: #C9D2F2; }
.stat b {
  display: block; font-family: var(--serif); font-weight: 800; font-size: 2.9rem;
  line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  background: linear-gradient(105deg, #113DCD 20%, #7B4BE0 80%);
  -webkit-background-clip: text; background-clip: text;
  color: var(--navy-800); -webkit-text-fill-color: transparent;
}
.stat b em { font-style: normal; -webkit-text-fill-color: transparent; }
.stat span {
  display: block; margin-top: 12px; font-size: .88rem; font-weight: 700; color: var(--muted);
}
.stat:hover b { background: linear-gradient(105deg, #0C2DB0 15%, #B4126B 95%); -webkit-background-clip: text; background-clip: text; }
.dark .stats-grid { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.dark .stat { border-left-color: rgba(255, 255, 255, .12); }
.dark .stat:hover { background: rgba(255, 255, 255, .05); }
.dark .stat b { background: linear-gradient(105deg, #A9BFFF 15%, #F49AC8 90%); -webkit-background-clip: text; background-clip: text; color: var(--gold-400); }
.dark .stat span { color: var(--on-dark-soft); }

/* ---------- Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.card {
  position: relative;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(17, 61, 205, .35); }
.card h3 { margin: 16px 0 10px; }
.card p { color: var(--muted); font-size: .93rem; flex: 1; }
.card .card-link {
  margin-top: 18px; font-family: var(--serif); font-weight: 600; color: var(--navy-800); font-size: .9rem;
  display: inline-flex; align-items: center; gap: 6px; transition: color .16s;
}
.card .card-link:hover { color: var(--navy-700); text-decoration: underline; text-underline-offset: 4px; }
.card-icon {
  width: 52px; height: 52px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  background: #EAF0FF; color: var(--navy-800);
}
.card-icon svg { width: 26px; height: 26px; }
.dark .card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.dark .card:hover { border-color: rgba(255, 220, 104, .45); }
.dark .card p { color: var(--on-dark-soft); }
.dark .card-icon { background: rgba(255, 255, 255, .1); color: var(--gold-400); }

/* ---------- Journal cards ---------- */
.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.journal-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.journal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(17, 61, 205, .35); }
.journal-cover { aspect-ratio: 16/8.6; position: relative; }
/* Real portrait covers */
.jcover { background: linear-gradient(160deg, var(--navy-100), var(--paper-2)); padding: 30px 30px 0; display: flex; justify-content: center; overflow: hidden; }
.jcover img {
  width: 100%; max-width: 250px; display: block; border-radius: 8px 8px 0 0;
  box-shadow: 0 -14px 34px rgba(2, 12, 77, .22);
  transition: transform .3s var(--ease);
}
.journal-card:hover .jcover img { transform: translateY(-8px); }
.journal-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.journal-body h3 { font-size: 1.08rem; margin-bottom: 6px; }
.journal-body .issn { font-size: .76rem; color: var(--muted); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.journal-metrics { display: flex; gap: 8px; margin: 14px 0 16px; flex-wrap: wrap; }
.metric-chip {
  font-size: .72rem; font-weight: 700; padding: 5px 12px;
  border-radius: 999px; background: var(--navy-100); color: var(--navy-700);
}
.metric-chip.oa { background: #E2F3E9; color: var(--success); }
.metric-chip.gold { background: var(--gold-100); color: #8A6D00; }
.journal-body .btn { margin-top: auto; align-self: flex-start; white-space: normal; height: auto; min-height: 42px; padding-top: 8px; padding-bottom: 8px; text-align: center; }

/* ---------- Filter bar ---------- */
.filter-bar { display: flex; gap: 14px; margin-bottom: 40px; flex-wrap: wrap; align-items: center; }
.search-box { position: relative; flex: 1; min-width: 260px; }
.search-box input {
  width: 100%; padding: 14px 18px 14px 48px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--white); font-size: .95rem; outline: none; transition: border-color .2s, box-shadow .2s;
}
.search-box input:focus { border-color: var(--navy-800); box-shadow: 0 0 0 3px rgba(17, 61, 205, .15); }
.search-box svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white);
  font-size: .85rem; font-weight: 700; color: var(--muted); transition: all .18s var(--ease);
}
.chip:hover { border-color: var(--navy-800); color: var(--navy-800); }
.chip.active { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }

/* ---------- Editing tiers ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.tier {
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 34px 26px 30px; position: relative; display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.tier:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.tier.featured { border: 2px solid var(--navy-800); box-shadow: 0 0 0 4px rgba(17, 61, 205, .1), var(--shadow-md); }
.tier-flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--navy-800); color: var(--white); font-size: .68rem; font-weight: 700;
  font-family: var(--serif); letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 18px; border-radius: 999px; white-space: nowrap;
}
.tier-offer {
  display: inline-block; align-self: flex-start;
  background: #FDE7F3; color: #B4126B; border: 1px solid rgba(233, 30, 140, .4);
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}
.tier h3 { font-size: 1.15rem; }
.tier .tier-tag { font-size: .82rem; color: var(--muted); margin: 6px 0 18px; min-height: 42px; }
.tier .price { font-family: var(--serif); font-weight: 700; font-size: 2rem; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.tier .price small { font-size: .82rem; color: var(--muted); font-family: var(--sans); font-weight: 400; }
.tier ul { margin: 20px 0 26px; flex: 1; }
.tier li { display: flex; gap: 10px; padding: 8px 0; font-size: .87rem; color: var(--ink); align-items: flex-start; border-bottom: 1px solid var(--paper-2); }
.tier li:last-child { border-bottom: none; }
.tier li.na { color: #6B7482; text-decoration: line-through; }
.tier li svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--navy-800); }
.tier li.na svg { color: #767E8F; }
.tier .btn { white-space: normal; height: auto; min-height: 48px; padding-top: 10px; padding-bottom: 10px; text-align: center; }

/* ---------- Sample edit demo (Track Changes / Clean) ---------- */
.sample-demo { max-width: 880px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.sample-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 22px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.sample-tabs { display: inline-flex; background: var(--white); border: 1.5px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px; }
.sample-tab { padding: 9px 20px; border: none; background: transparent; border-radius: 999px; font-weight: 700; font-size: .85rem; color: var(--muted); transition: all .18s var(--ease); }
.sample-tab.active { background: var(--navy-800); color: var(--white); }
.sample-legend { display: flex; gap: 16px; font-size: .76rem; color: var(--muted); flex-wrap: wrap; }
.sample-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sample-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lg-del { background: #FDE8E8; border: 1px solid #E02424; }
.lg-ins { background: #E1EFFE; border: 1px solid #1C64F2; }
.lg-com { background: #FEF3C7; border: 1px solid #D97706; }
.sample-doc { padding: 34px 38px 30px; font-size: .98rem; line-height: 2.05; color: var(--ink); }
.sample-doc h3 { font-size: 1.02rem; margin-bottom: 14px; color: #191C3A; }
.sample-doc del { background: #FDE8E8; color: #C81E1E; text-decoration: line-through; padding: 1px 4px; border-radius: 3px; }
.sample-doc ins { background: #E1EFFE; color: #1A56DB; text-decoration: none; padding: 1px 4px; border-radius: 3px; font-weight: 700; }
.sample-doc sup { color: #B45309; font-weight: 800; font-size: .78em; }
.sample-comments { margin-top: 22px; display: grid; gap: 10px; }
.sample-comment { background: #FFFBEB; border: 1px solid #FDE68A; border-left: 4px solid #D97706; border-radius: 8px; padding: 12px 16px; font-size: .85rem; color: var(--ink); }
.sample-comment b { color: #92400E; }
.sample-foot { padding: 14px 22px; border-top: 1px solid var(--line); background: var(--paper); font-size: .82rem; color: var(--muted); text-align: center; }
@media (max-width: 560px) { .sample-doc { padding: 24px 18px; } .sample-toolbar { justify-content: center; } }

/* ---------- Comparison table ---------- */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
table.compare { width: 100%; border-collapse: collapse; min-width: 760px; font-size: .89rem; }
.compare th, .compare td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--line); }
.compare th { background: var(--navy-900); color: var(--white); font-family: var(--serif); font-weight: 600; font-size: .92rem; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare td:first-child { font-weight: 700; color: var(--ink); }
.compare tr:nth-child(even) td { background: var(--paper); }
.compare .yes { color: var(--navy-800); font-weight: 700; }
.compare .no { color: #6B7280; }
.compare td.featured-col { background: #EAF0FF !important; }

/* ---------- Calculator ---------- */
.calc {
  background: var(--white); border-radius: 16px; box-shadow: var(--shadow-lg);
  overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr;
  border: 1px solid var(--line);
}
.calc-form { padding: 44px; }
.calc-form h3 { font-size: 1.45rem; margin-bottom: 6px; }
.calc-form .sub { color: var(--muted); font-size: .9rem; margin-bottom: 28px; }
.field { margin-bottom: 22px; }
.field label {
  display: block; font-family: var(--serif); font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--navy-800); margin-bottom: 8px;
}
.field input[type="number"], .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); outline: none; color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy-800); background: var(--white); box-shadow: 0 0 0 3px rgba(17, 61, 205, .13);
}
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg button {
  padding: 11px 8px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper);
  font-size: .82rem; font-weight: 700; color: var(--muted); transition: all .18s var(--ease);
}
.seg button.active { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }
.calc-result {
  background-color: var(--navy-900);
  background-image: radial-gradient(420px 320px at 90% 0%, rgba(17, 61, 205, .55), transparent 65%);
  color: var(--white); padding: 44px; display: flex; flex-direction: column; justify-content: center;
}
.calc-result .label { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-400); font-weight: 700; font-family: var(--serif); }
.calc-price { font-family: var(--serif); font-weight: 800; font-size: 3.2rem; line-height: 1.1; margin: 10px 0 4px; font-variant-numeric: tabular-nums; }
.calc-price small { font-size: 1.05rem; color: var(--on-dark-soft); font-family: var(--sans); font-weight: 400; }
.calc-meta { color: var(--on-dark-soft); font-size: .88rem; margin-bottom: 26px; }
.calc-meta b { color: var(--white); font-weight: 700; }
.calc-breakdown { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 18px; margin-bottom: 26px; font-size: .86rem; }
.calc-breakdown div {
  display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: var(--on-dark-soft);
  border-bottom: 1px dotted rgba(255, 255, 255, .22);
}
.calc-breakdown div:last-child { border-bottom: none; }
.calc-breakdown div b { color: var(--white); font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-note { font-size: .76rem; color: #97A1C9; margin-top: 14px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.step {
  position: relative; padding: 30px 24px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(17, 61, 205, .35); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--serif); font-weight: 800; font-size: 2.2rem; line-height: 1;
  color: var(--navy-100);
  position: absolute; top: 18px; right: 20px; pointer-events: none;
}
.step h3 { font-size: 1.04rem; margin-bottom: 8px; padding-right: 56px; }
.step p { font-size: .87rem; color: var(--muted); }
.dark .step { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.dark .step p { color: var(--on-dark-soft); }
.dark .step::before { color: rgba(255, 220, 104, .35); }

/* ---------- Accordion ---------- */
.accordion { max-width: 820px; margin: 0 auto; }
.acc-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; transition: border-color .2s; }
.acc-item.open { border-color: rgba(17, 61, 205, .4); }
.acc-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 24px; background: none; border: none; text-align: left;
  font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--navy-900);
}
.acc-btn .acc-icon {
  width: 28px; height: 28px; border-radius: 50%; background: #EAF0FF; color: var(--navy-800);
  display: flex; align-items: center; justify-content: center; flex: none; font-size: 1.1rem;
  transition: transform .25s var(--ease), background-color .25s, color .25s;
}
.acc-item.open .acc-icon { transform: rotate(45deg); background: var(--navy-800); color: var(--white); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.acc-panel p { padding: 0 24px 22px; color: var(--muted); font-size: .92rem; }

/* ---------- Testimonials ---------- */
.testi-wrap { position: relative; max-width: 860px; margin: 0 auto; }
.testi-track { overflow: hidden; }
.testi-slides { display: flex; transition: transform .45s var(--ease); }
.testi { flex: 0 0 100%; padding: 40px 48px; text-align: center; }
.testi blockquote { font-family: var(--serif); font-size: 1.22rem; font-weight: 500; font-style: normal; line-height: 1.6; color: var(--ink); }
.dark .testi blockquote { color: var(--on-dark); }
.testi .who { margin-top: 22px; font-size: .9rem; }
.testi .who b { display: block; color: var(--navy-800); font-family: var(--serif); font-weight: 700; }
.dark .testi .who b { color: var(--gold-400); }
.testi .who span { color: var(--muted); }
.dark .testi .who span { color: var(--on-dark-soft); }
.testi-stars { color: #EFAF13; letter-spacing: 3px; margin-bottom: 14px; font-size: 1.05rem; }
.testi-nav { display: flex; justify-content: center; gap: 10px; margin-top: 8px; }
.testi-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: #C3CBDF; transition: all .25s var(--ease); padding: 0; }
.testi-dot.active { background: var(--navy-800); width: 26px; border-radius: 999px; }
.dark .testi-dot { background: rgba(255, 255, 255, .28); }
.dark .testi-dot.active { background: var(--gold-400); }

/* ---------- News ---------- */
.news-card { padding: 0; overflow: hidden; }
.news-thumb { height: 150px; }
.news-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.news-date { font-family: var(--serif); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-800); margin-bottom: 8px; }
.news-body h3 { font-size: 1.05rem; margin: 0 0 8px; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band .container { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 70px; padding-bottom: 70px; flex-wrap: wrap; }
.cta-band h2 { max-width: 560px; }
.cta-band p { color: var(--on-dark-soft); margin-top: 10px; max-width: 520px; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Feature list ---------- */
.feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
.feature-item { display: flex; gap: 16px; align-items: flex-start; }
.feature-item .fi-icon {
  width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm);
  background: #EAF0FF; color: var(--navy-800);
  display: flex; align-items: center; justify-content: center;
}
.feature-item .fi-icon svg { width: 22px; height: 22px; }
.feature-item b { display: block; margin-bottom: 3px; font-family: var(--serif); font-weight: 600; }
.feature-item p { font-size: .87rem; color: var(--muted); }
.dark .feature-item .fi-icon { background: rgba(255, 255, 255, .1); color: var(--gold-400); }
.dark .feature-item b { color: var(--white); }
.dark .feature-item p { color: var(--on-dark-soft); }

/* ---------- Guarantee band ---------- */
.badge-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 40px; max-width: 1020px; margin: 0 auto; }
.badge-item { display: flex; align-items: flex-start; gap: 14px; }
.badge-item svg { width: 36px; height: 36px; color: var(--gold-400); flex: none; }
.badge-item b { display: block; font-size: .96rem; font-family: var(--serif); font-weight: 600; color: var(--white); }
.badge-item span { font-size: .8rem; color: var(--on-dark-soft); }

/* ---------- Editor profiles ---------- */
.editor-card { text-align: center; }
.editor-avatar { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 16px; border: 3px solid var(--navy-100); }
.editor-card .cred { font-family: var(--serif); font-size: .72rem; color: var(--navy-800); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.editor-card h3 { margin: 6px 0 4px; font-size: 1.08rem; }
.editor-card .field-tag { font-size: .84rem; color: var(--muted); }
.editor-card .exp { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }

/* ---------- Wizard ---------- */
.wizard { max-width: 780px; margin: 0 auto; background: var(--white); border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden; }
.wizard-head {
  background-color: var(--navy-900);
  background-image: radial-gradient(420px 260px at 90% 0%, rgba(17, 61, 205, .55), transparent 65%);
  padding: 30px 40px; color: var(--white);
}
.wizard-head h2 { color: var(--white); }
.wizard-progress { display: flex; gap: 8px; margin-top: 18px; }
.wizard-progress i { flex: 1; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .18); transition: background-color .3s var(--ease); }
.wizard-progress i.done { background: var(--gold-400); }
.wizard-body { padding: 40px; }
.wizard-step { display: none; }
.wizard-step.active { display: block; animation: fadeUp .35s var(--ease); }
.wizard-foot { display: flex; justify-content: space-between; padding: 0 40px 36px; gap: 12px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.radio-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.radio-card { position: relative; }
.radio-card input { position: absolute; opacity: 0; }
.radio-card label {
  display: block; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); cursor: pointer; font-size: .9rem;
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}
.radio-card label b { display: block; color: var(--navy-900); font-family: var(--serif); font-weight: 600; }
.radio-card label small { color: var(--muted); }
.radio-card input:checked + label { border-color: var(--navy-800); background: #EAF0FF; box-shadow: 0 0 0 3px rgba(17, 61, 205, .12); }
.radio-card input:focus-visible + label { outline: 3px solid rgba(17, 61, 205, .45); outline-offset: 2px; }
.success-panel { text-align: center; padding: 30px 20px; }
.success-panel .ok-ring { width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 50%; background: #E2F3E9; color: var(--success); display: flex; align-items: center; justify-content: center; }
.success-panel .ok-ring svg { width: 40px; height: 40px; }

/* ---------- Tabs ---------- */
.tabs { display: inline-flex; background: var(--white); border: 1.5px solid var(--line); border-radius: 999px; padding: 5px; gap: 4px; margin-bottom: 40px; }
.tab-btn { padding: 11px 26px; border: none; background: transparent; border-radius: 999px; font-weight: 700; font-size: .9rem; color: var(--muted); transition: all .18s var(--ease); }
.tab-btn.active { background: var(--navy-800); color: var(--white); }
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeUp .35s var(--ease); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
.contact-info-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; display: flex; gap: 18px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
  transition: border-color .2s, transform .2s var(--ease);
}
.contact-info-card:hover { border-color: rgba(17, 61, 205, .35); transform: translateY(-2px); }
.contact-info-card .ci-icon {
  width: 46px; height: 46px; flex: none; border-radius: var(--radius-sm);
  background: #EAF0FF; color: var(--navy-800);
  display: flex; align-items: center; justify-content: center;
}
.contact-info-card .ci-icon svg { width: 22px; height: 22px; }
.contact-info-card b { display: block; margin-bottom: 3px; font-family: var(--serif); font-weight: 600; }
.contact-info-card p, .contact-info-card a { color: var(--muted); font-size: .9rem; }
.contact-info-card a:hover { color: var(--navy-800); }
.contact-form { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 40px; box-shadow: var(--shadow-lg); }
/* ---------- Legal pages (privacy, terms) ---------- */
.legal-grid { display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: start; }
.legal-toc {
  position: sticky; top: 100px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm);
}
.legal-toc h4 {
  font-family: var(--serif); font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
.legal-toc a {
  display: block; padding: 8px 12px; border-radius: var(--radius-sm); font-size: .88rem;
  color: var(--muted); border-left: 2px solid transparent; transition: all .18s var(--ease);
}
.legal-toc a:hover { background: var(--paper-2); color: var(--navy-800); }
.legal-toc a.current { background: #EAF0FF; color: var(--navy-800); font-weight: 700; border-left-color: var(--navy-800); }

.legal-meta {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 999px;
  background: var(--navy-100); color: var(--navy-700); font-size: .82rem; font-weight: 700; margin-bottom: 26px;
}
.legal-body > section { scroll-margin-top: 100px; margin-bottom: 48px; }
.legal-body h2 {
  font-size: 1.45rem; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--line);
}
.legal-body h3 { font-size: 1.05rem; margin: 24px 0 8px; color: var(--navy-800); }
.legal-body p { color: var(--muted); margin-bottom: 14px; }
.legal-body ul { margin: 0 0 16px; }
.legal-body li { color: var(--muted); padding: 6px 0 6px 26px; position: relative; }
.legal-body li::before {
  content: ""; position: absolute; left: 6px; top: 15px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--navy-800); opacity: .45;
}
.legal-body a { color: var(--navy-800); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal-note {
  background: linear-gradient(135deg, #EAF0FF, #F3E8FF); border: 1px solid var(--navy-100);
  border-radius: var(--radius); padding: 20px 24px; margin: 0 0 24px;
}
.legal-note b {
  display: block; font-family: var(--serif); font-size: .76rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy-800); margin-bottom: 6px;
}
.legal-note p { color: var(--ink); margin: 0; font-size: .93rem; }
.legal-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: .9rem; }
.legal-table th, .legal-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-table th { background: var(--paper-2); font-family: var(--serif); font-weight: 600; color: var(--navy-900); }
.legal-table td { color: var(--muted); }
@media (max-width: 900px) {
  .legal-grid { grid-template-columns: 1fr; gap: 28px; }
  .legal-toc { position: static; }
  .legal-toc a { display: inline-block; }
}

/* "Coming soon" badge — used where a feature is announced but not yet live */
.soon-badge {
  display: inline-block; margin-top: 18px; padding: 6px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28);
  color: var(--gold-400); font-family: var(--serif); font-weight: 600; font-size: .78rem;
  letter-spacing: .04em;
}

/* Honeypot — must stay reachable to bots but invisible to people */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 14px; font-size: .88rem; font-weight: 700; min-height: 1.2em; }
.form-status.error { color: #C2185B; }
.form-status.pending { color: var(--muted); }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: #96A0C8; font-size: .9rem; }
.footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px; padding: 70px 0 50px; }
.footer-brand p { margin: 18px 0 22px; max-width: 300px; font-size: .87rem; }
.site-footer h4 { color: var(--white); font-family: var(--serif); font-weight: 700; font-size: .98rem; margin-bottom: 18px; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { transition: color .18s; }
.site-footer a:hover { color: var(--gold-400); }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--gold-400); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .8rem; }
.footer-bottom .legal { display: flex; gap: 20px; }
.social { display: flex; gap: 10px; }
.social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: center; transition: all .2s var(--ease); }
.social a:hover { border-color: var(--gold-400); color: var(--gold-400); transform: translateY(-2px); }
.social svg { width: 16px; height: 16px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: 72px 0 64px; position: relative; overflow: hidden; }
.page-hero .container { position: relative; }
.page-hero .lead { margin-top: 14px; }
.breadcrumb { font-size: .78rem; font-weight: 700; color: var(--on-dark-soft); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--gold-400); }
.breadcrumb .sep { margin: 0 8px; color: rgba(255, 220, 104, .6); }

/* ---------- Reveal animations ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .07s; }
.reveal-d2 { transition-delay: .14s; }
.reveal-d3 { transition-delay: .21s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  /* Collapse nav early: desktop nav does not fit below ~1100px */
  html { scroll-padding-top: 84px; }
  .main-nav, .nav-cta .btn-outline, .nav-login { display: none; }
  .nav-toggle { display: block; }
  .nav-wrap { flex-direction: row; justify-content: space-between; height: 68px; padding: 0; gap: 12px; }
  .main-nav.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0; background: var(--white);
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 14px 18px 22px;
    max-height: calc(100vh - 130px); overflow-y: auto;
  }
  .main-nav.open > li > a { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; padding: 14px 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .main-nav.open > li > a.active { box-shadow: none; color: var(--navy-800); }
  .main-nav.open .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: 0 0 0 16px; min-width: 0; }

  /* Login / Register / Get a Quote, rebuilt into the menu by main.js because the
     header itself has no room for them at this width. Full-width tap targets:
     these are the two things a phone visitor most often came to do. */
  .main-nav.open > li.nav-mobile-auth {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
  }
  /* The .main-nav link rules are more specific than .btn-outline / .btn-gold and
     would otherwise flatten these into square, ink-coloured menu links — dark
     text on the gold button's gradient. Restore the pill look explicitly. */
  .main-nav.open > li.nav-mobile-auth > a {
    font-family: var(--serif); font-size: .95rem; font-weight: 600;
    border-radius: 999px; width: 100%;
    /* The whole border, not just border-bottom: the menu rule above sets a
       1px grey bottom rule on every link, and cancelling only that side would
       leave the pill open along the bottom. */
    border: 2px solid var(--navy-800);
    color: var(--navy-800);
  }
  .main-nav.open > li.nav-mobile-auth > a.btn-gold {
    border-color: transparent; color: var(--white);
  }
}
@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 68px; }
  .hero-art { max-width: 520px; }
  .stats-grid, .tier-grid, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid .stat:nth-child(odd) { border-left: none; }
  .stats-grid .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .dark .stats-grid .stat:nth-child(n+3) { border-top-color: rgba(255, 255, 255, .12); }
  .journal-grid, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .badge-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .feature-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .section { padding: 60px 0; }
  .stats-grid, .tier-grid, .journal-grid, .grid-3, .grid-4, .grid-2, .steps, .form-row, .radio-cards, .badge-band { grid-template-columns: 1fr; }
  .stats-grid .stat { border-left: none; }
  .stats-grid .stat + .stat { border-top: 1px solid var(--line); }
  .dark .stats-grid .stat + .stat { border-top-color: rgba(255, 255, 255, .12); }
  .calc-form, .calc-result { padding: 30px 24px; }
  .wizard-body { padding: 28px 22px; }
  .wizard-foot { padding: 0 22px 28px; }
  .footer-main { grid-template-columns: 1fr; gap: 32px; }
  .topbar .container { justify-content: center; }
  .topbar-items { justify-content: center; }
  .testi { padding: 36px 20px; }
  .nav-wrap { height: 68px; }
}
@media (max-width: 430px) {
  /* Prevent header overflow on small phones */
  .nav-cta .btn-gold { display: none; }
  .logo-text b { font-size: 1.1rem; }
  .logo-img { height: 38px; }
}

/* ==========================================================================
   Author accounts — register / login / reset / dashboard
   ========================================================================== */

/* ---- shared form controls ---- */
.field { margin-bottom: 20px; }
.field label { display: block; font-family: var(--serif); font-weight: 600; font-size: .92rem;
  color: var(--ink); margin-bottom: 7px; }
.field label .req { color: #E91E8C; }
.field label .opt { font-weight: 400; color: var(--muted); font-size: .8rem; text-transform: none; }
.field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="tel"], .field input[type="number"], .field select, .field textarea {
  width: 100%; padding: 13px 15px; font-family: inherit; font-size: .95rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px; transition: border-color .16s, box-shadow .16s; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: #113DCD; box-shadow: 0 0 0 4px rgba(17, 61, 205, .12); }
.field input:disabled { background: #F4F5F8; color: var(--muted); cursor: not-allowed; }
.field small { display: block; margin-top: 7px; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.field small a { color: #113DCD; font-weight: 700; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }

.checkline { display: flex; gap: 11px; align-items: flex-start; margin: 4px 0 24px; font-size: .89rem;
  color: var(--muted); line-height: 1.55; cursor: pointer; }
.checkline input { margin-top: 3px; width: 17px; height: 17px; accent-color: #113DCD; flex: none; }
.checkline a { color: #113DCD; font-weight: 700; }

.btn-block { width: 100%; justify-content: center; }

/* password strength */
.pw-meter { margin-top: 9px; display: flex; align-items: center; gap: 10px; }
.pw-meter > span { flex: 1; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; position: relative; }
.pw-meter > span::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--pw, 0%);
  border-radius: 999px; background: var(--pw-c, #E0463C); transition: width .25s, background .25s; }
.pw-meter > b { font-size: .76rem; font-weight: 700; color: var(--pw-c, #E0463C); min-width: 70px; text-align: right; }

/* ---- alerts ---- */
.alert { padding: 15px 18px; border-radius: 12px; font-size: .9rem; line-height: 1.6; margin-bottom: 18px;
  border: 1px solid transparent; }
.alert b { font-family: var(--serif); }
.alert a { font-weight: 700; text-decoration: underline; }
.alert-error { background: #FDECEA; border-color: #F5C2BC; color: #8E2018; }
.alert-error a { color: #8E2018; }
.alert-ok { background: #E7F6EC; border-color: #B6E0C4; color: #14663A; }
.alert-ok a { color: #14663A; }
.alert-warn { background: #FFF6E3; border-color: #F3DCA6; color: #7A5410; }
.alert-warn a { color: #7A5410; }

/* ---- auth pages ---- */
.auth-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 48px; align-items: start; }
.auth-wrap-narrow { grid-template-columns: minmax(0, 520px); justify-content: center; }
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 40px;
  box-shadow: 0 18px 50px rgba(27, 37, 105, .07); }
.auth-title { font-size: 1.7rem; margin: 0 0 6px; }
.auth-sub { color: var(--muted); font-size: .92rem; margin: 0 0 26px; }
.auth-sub a, .auth-fine a { color: #113DCD; font-weight: 700; }
.auth-fine { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--muted); text-align: center; }

.auth-done { text-align: center; padding: 8px 0; }
.auth-done-icon { width: 68px; height: 68px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center; background: linear-gradient(135deg, #EAF0FF, #F3E8FF); color: #113DCD; }
.auth-done-icon svg { width: 30px; height: 30px; }
.auth-done-ok { background: #E7F6EC; color: #14663A; }
.auth-done h2 { font-size: 1.45rem; margin: 0 0 10px; }
.auth-done p { color: var(--muted); font-size: .94rem; line-height: 1.65; margin: 0 0 14px; }
.auth-done .btn { margin-top: 8px; }

.auth-aside { position: sticky; top: 100px; padding: 34px 30px; border-radius: 20px;
  background: linear-gradient(150deg, #1B2569 0%, #2A2F7A 100%); color: #fff; }
.auth-aside h3 { color: #fff; font-size: 1.12rem; margin: 0 0 18px; }
.auth-aside .tick-list { list-style: none; padding: 0; margin: 0 0 26px; }
.auth-aside .tick-list li { position: relative; padding-left: 30px; margin-bottom: 14px;
  font-size: .88rem; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.auth-aside .tick-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  border-radius: 50%; background-color: rgba(255, 255, 255, .14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px; background-repeat: no-repeat; background-position: center; }
.auth-note { padding: 18px 20px; border-radius: 14px; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16); }
.auth-note b { display: block; font-family: var(--serif); font-size: .92rem; margin-bottom: 6px; color: #fff; }
.auth-note p { margin: 0; font-size: .84rem; line-height: 1.6; color: rgba(255, 255, 255, .8); }

/* ---- dashboard ---- */
.dash-hero { padding-bottom: 54px; }

.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 34px; }
.dash-stat { display: flex; align-items: center; gap: 16px; padding: 22px 24px; background: #fff;
  border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s; }
.dash-stat strong { display: block; font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; color: var(--ink); }
.dash-stat span { display: block; font-size: .82rem; color: var(--muted); margin-top: 3px; }
.dash-stat-ico { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center;
  background: #EAF0FF; color: #113DCD; }
.dash-stat-ico svg { width: 22px; height: 22px; }
.dash-stat-ico-b { background: #FFF3E0; color: #C97A10; }
.dash-stat-ico-c { background: #E7F6EC; color: #14663A; }
.dash-stat-ico-d { background: linear-gradient(135deg, #113DCD, #7B4BE0); color: #fff; }
.dash-stat-cta:hover { transform: translateY(-3px); border-color: #C9D4F5; box-shadow: 0 14px 34px rgba(27, 37, 105, .1); }
.dash-stat-cta strong { color: #113DCD; }

.dash-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
.dash-panel { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 32px 34px; }
.dash-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.dash-panel-head h2 { font-size: 1.24rem; margin: 0; }
.dash-fine { margin: 16px 0 0; font-size: .83rem; color: var(--muted); }
.dash-fine a, .dash-meta a { color: #113DCD; font-weight: 700; }
.dash-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dash-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 620px; }
.dash-table th { text-align: left; padding: 0 14px 12px; font-family: var(--serif); font-size: .76rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.dash-table td { padding: 15px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.dash-table tbody tr:hover { background: #FAFBFF; }
.dash-table code { font-size: .82rem; font-weight: 700; color: #113DCD; background: #EEF2FE;
  padding: 4px 9px; border-radius: 7px; white-space: nowrap; }
.dash-table td b { display: block; font-family: var(--serif); font-weight: 600; color: var(--ink); }
.dash-table td small { display: block; margin-top: 4px; font-size: .8rem; color: var(--muted); }

.status-pill { display: inline-block; padding: 5px 13px; border-radius: 999px; font-size: .76rem;
  font-weight: 700; white-space: nowrap; }
.st-received { background: #EEF2FE; color: #26389B; }
.st-quoted { background: #F3E8FF; color: #6A2FBE; }
.st-progress { background: #FFF3E0; color: #A5620B; }
.st-delivered { background: #E7F6EC; color: #14663A; }
.st-closed { background: #F1F2F5; color: #5A6478; }

.dash-empty { text-align: center; padding: 44px 20px; }
.dash-empty svg { width: 52px; height: 52px; color: #C4CBDD; margin-bottom: 16px; }
.dash-empty h3 { font-size: 1.1rem; margin: 0 0 8px; }
.dash-empty p { color: var(--muted); font-size: .9rem; max-width: 440px; margin: 0 auto 22px; line-height: 1.65; }

@media (min-width: 981px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .dash-grid .dash-panel:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-aside { position: static; order: 2; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .auth-card, .dash-panel { padding: 26px 22px; }
  .field-row { grid-template-columns: 1fr; }
  .dash-stats { grid-template-columns: 1fr; }
  .dash-panel-head { flex-direction: column; align-items: flex-start; }
}

/* ---- registration: title + first + last on one line ---- */
.name-row { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 0 16px; }

.select-wrap { position: relative; }
.select-wrap select {
  width: 100%; padding: 13px 38px 13px 15px; font-family: inherit; font-size: .95rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  transition: border-color .16s, box-shadow .16s; }
.select-wrap select:focus { outline: none; border-color: #113DCD; box-shadow: 0 0 0 4px rgba(17, 61, 205, .12); }
.select-wrap::after {
  content: ""; position: absolute; right: 15px; top: 50%; width: 9px; height: 9px; pointer-events: none;
  border-right: 2px solid #5A6478; border-bottom: 2px solid #5A6478;
  transform: translateY(-70%) rotate(45deg); }

/* ---- password field with a show/hide toggle ---- */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 48px !important; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 9px; color: #5A6478; cursor: pointer;
  transition: color .15s, background .15s; }
.pw-toggle:hover { color: #113DCD; background: #F1F4FD; }
.pw-toggle:focus-visible { outline: 2px solid #113DCD; outline-offset: 1px; }
.pw-toggle svg { width: 19px; height: 19px; }
.pw-toggle[aria-pressed="true"] { color: #113DCD; }

.dash-intro { margin: -6px 0 22px; font-size: .87rem; color: var(--muted); line-height: 1.6; }

@media (max-width: 620px) {
  .name-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Orders — quote, checkout, and the order's own page
   ========================================================================== */

.order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.order-grid .order-wide { grid-column: 1 / -1; }
.order-grid.order-new { grid-template-columns: minmax(0, 1fr) 340px; }
.dash-grid .order-wide { grid-column: 1 / -1; }

.order-open { font-weight: 700; color: #113DCD; white-space: nowrap;
  display: inline-block; padding: 5px 12px; border-radius: 8px;
  border: 1px solid transparent; text-decoration: none;
  transition: background .12s, border-color .12s; }
.order-open:hover { background: #EEF2FE; border-color: #C9D6FA; }
/* The reference opens the job it names. It already looked like a control, and
   the only way in was a link at the far end of a wide row. */
.reflink { text-decoration: none; }
.reflink code { cursor: pointer; }
.reflink:hover code { background: #113DCD; color: #fff; }

/* Read receipts, both ways. Quiet by design: it answers "did it arrive" without
   competing with the message it sits under. */
/* Read state, in a colour of its own and with room above it. Grey on grey under
   a grey timestamp was one more line of small print, when the whole point of it
   is to be answerable at a glance. */
.msg-read { margin-top: 11px; padding-top: 8px; border-top: 1px solid rgba(22,35,58,.08);
  font-size: .73rem; font-weight: 700; color: #1B7A46; text-align: right; }
.msg-read::before { content: "✓ "; font-weight: 800; }
.msg-read.unread { color: #A8752A; }
.msg-read.unread::before { content: "◔ "; }
/* A reply the author has not opened yet. This is the one thing on the page that
   should be findable without reading anything. */
.msg-new { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px;
  background: #E7F0FF; color: #113DCD; font-size: .72rem; font-weight: 800;
  letter-spacing: .01em; vertical-align: middle; }
/* And the same count beside Messages in the portal sidebar. */
.portal-nav .nav-count { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px;
  background: #E5157E; color: #fff; font-size: .7rem; font-weight: 800; text-align: center; }
.order-total { font-size: 1.05rem; color: #113DCD; }
.order-sub { font-family: var(--serif); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 22px 0 10px; }
.order-sub:first-child { margin-top: 0; }

.order-facts { min-width: 0; }
.order-facts td { padding: 11px 0; }
.order-facts td:first-child { color: var(--muted); width: 42%; }
.order-facts tbody tr:hover { background: none; }
.order-facts code { font-size: .85rem; word-break: break-all; }

/* ---- order summary panel ---- */
.order-summary { position: sticky; top: 100px; padding: 30px; border-radius: 20px;
  background: linear-gradient(150deg, #1B2569 0%, #2A2F7A 100%); color: #fff; }
.order-summary h3 { color: #fff; font-size: 1.05rem; margin: 0 0 4px; }
.order-price { font-family: var(--serif); font-size: 2.3rem; font-weight: 700; line-height: 1.1;
  margin: 10px 0 20px; color: #fff; }
.order-price small { font-size: .95rem; font-weight: 600; opacity: .7; }
.order-summary dl { margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.order-summary dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: .87rem; }
.order-summary dt { color: rgba(255, 255, 255, .68); }
.order-summary dd { margin: 0; font-weight: 700; text-align: right; }
.order-min { font-size: .82rem; color: #FFD98A; margin: 0 0 12px; }
.order-fine { font-size: .82rem; line-height: 1.6; color: rgba(255, 255, 255, .72); margin: 0 0 10px; }
.order-fine a { color: #fff; text-decoration: underline; }


/* ---- manuscript upload (order.php and submit.html share this markup) ----
   These lived only in submit.html's page-local <style>, so order.php — which
   loads styles.css and nothing else — rendered the drop zone unstyled, with the
   raw OS file input and a 300px SVG. Defined here so both pages get them. */
.upload-box { position: relative; border: 2px dashed var(--line); border-radius: 12px;
  padding: 14px 16px; text-align: center; background: var(--paper); cursor: pointer;
  transition: border-color .2s, background-color .2s; }
.upload-box:hover, .upload-box:focus-visible { border-color: #113DCD; background: #F2F6FF; }
.upload-box.dragging, .upload-box.dragover { border-color: #113DCD; background: #E7EEFF; border-style: solid; }
.upload-box svg { width: 22px; height: 22px; margin: 0 auto 5px; color: #113DCD; pointer-events: none; }
.upload-box b { display: block; font-family: var(--serif); color: var(--ink); pointer-events: none; }
.upload-box small, .upload-box span { display: block; margin-top: 3px; font-size: .78rem;
  line-height: 1.55; color: var(--muted); pointer-events: none; }
.upload-box input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; }

.file-list { list-style: none; padding: 0; margin: 12px 0 0; }
.file-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; margin-bottom: 8px; background: #fff; border: 1px solid var(--line);
  border-radius: 11px; font-size: .88rem; }
.file-list li span { min-width: 0; overflow-wrap: anywhere; }
/* A file that has actually been taken. The same pastel green the site already
   uses for delivered files, so "accepted" reads the same way everywhere —
   and the pink below stays the one colour that means something is wrong.
   Only rows main.js builds get this; the lists on files.php stay plain. */
.file-list li.is-attached { border-color: #B6E0C4; background: #F3FBF6; }
.file-list li.is-error, .file-list li.too-big { border-color: #E8A0BF; background: #FDF2F7; }
.file-list li button { flex: none; border: 0; background: none; font: inherit; font-size: .82rem;
  font-weight: 700; color: var(--muted); cursor: pointer; padding: 0 2px; }
.file-list li button:hover { color: #B4126B; }

/* ---- file lists on the order page ---- */
.order-files { list-style: none; padding: 0; margin: 0; }
.order-files li { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 9px; font-size: .89rem; }
.order-files li span { min-width: 0; overflow-wrap: anywhere; }
.order-files li a { font-weight: 700; color: #113DCD; white-space: nowrap; }
.order-files li.is-delivery { border-color: #B6E0C4; background: #F3FBF6; }
/* The certificate is neither what the author sent nor a file the editor wrote —
   it is what we attest to. Gold rather than the delivery green, so the three
   groups read apart at a glance. */
.order-files li.is-cert { border-color: #EBD3A2; background: #FFFAF0; }

/* ---- "I have sent the transfer" ----
   Quiet on purpose. It sits under the bank details as an offer, not a call to
   action: the author has already done the work, and this only tells us to look. */
.order-sent-box { margin-top: 22px; padding: 18px 20px; border: 1px dashed var(--line);
  border-radius: 12px; background: #FBFCFF; }
.order-sent-form { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px;
  align-items: end; margin-top: 14px; }
.order-sent-form label { display: block; font-family: var(--serif); font-size: .82rem;
  font-weight: 700; color: var(--navy-900); }
.order-sent-form label .dash-fine { display: inline; font-weight: 400; }
.order-sent-form input { width: 100%; margin-top: 6px; padding: 11px 13px; font: inherit;
  font-size: .9rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--white); }
.order-sent-form button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 620px) { .order-sent-form { grid-template-columns: 1fr; } }

/* ---- conversations ----
   Two sides, told apart by where they sit and what colour they are rather than
   by a label, so a long thread can be read at a glance. */
.msg-thread { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.msg-thread li { max-width: 78%; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--line); }
.msg-thread .from-them { align-self: flex-start; background: #F3FAF5; border-color: #CBE7D6;
  border-bottom-left-radius: 4px; }
.msg-thread .from-us { align-self: flex-end; background: #EEF2FE; border-color: #C3CEF6;
  border-bottom-right-radius: 4px; }
.msg-who { font-family: var(--serif); font-weight: 700; font-size: .82rem; color: var(--navy-900);
  margin-bottom: 5px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.msg-who time { font-family: var(--sans); font-weight: 400; font-size: .74rem; color: var(--muted); }
.msg-body { font-size: .92rem; line-height: 1.6; overflow-wrap: anywhere; }

.msg-form { display: block; margin-top: 4px; }
.msg-form label { display: block; font-family: var(--serif); font-size: .84rem; font-weight: 700;
  color: var(--navy-900); margin: 14px 0 6px; }
.msg-form textarea, .msg-form input[type=text], .msg-form select { width: 100%; padding: 12px 14px;
  font: inherit; font-size: .93rem; border: 1.5px solid var(--line); border-radius: 11px;
  background: var(--white); }
.msg-form textarea { resize: vertical; min-height: 96px; }
.msg-form button { margin-top: 14px; }

/* One conversation on the editor's desk, folded until it is needed. */
.tk-item { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; background: var(--white); }
.tk-item > summary { padding: 14px 16px; cursor: pointer; display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; list-style: none; }
.tk-item > summary::-webkit-details-marker { display: none; }
.tk-item > summary:hover { background: #F5F8FF; }
.tk-item[open] > summary { border-bottom: 1px solid var(--line); }
.tk-item > div { padding: 16px; }
@media (max-width: 620px) { .msg-thread li { max-width: 100%; } }

/* ---- history ---- */
.order-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.order-timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.order-timeline li { position: relative; padding: 0 0 20px; }
.order-timeline li::before { content: ""; position: absolute; left: -22px; top: 5px; width: 10px; height: 10px;
  border-radius: 50%; background: #113DCD; box-shadow: 0 0 0 3px #fff; }
.order-timeline li:last-child { padding-bottom: 0; }
.order-timeline time { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.order-timeline p { margin: 3px 0 0; font-size: .9rem; line-height: 1.6; }

@media (max-width: 980px) {
  .order-grid, .order-grid.order-new { grid-template-columns: 1fr; }
  .order-summary { position: static; order: -1; }
}

/* ==========================================================================
   Author portal — sidebar shell, overview, profile
   ========================================================================== */

.portal-hero { padding-bottom: 46px; }
/* The account area runs wider than the marketing pages: it carries tables and
   four service cards in a row, not long-form text that needs a short measure. */
.portal-hero .container, .portal .container { max-width: 1360px; }
/* the bar, header and footer follow, so nothing is narrower than the content
   sitting under it. Browsers without :has() just keep the standard measure. */
body:has(.portal) .topbar > .container,
body:has(.portal) .site-header > .container,
body:has(.portal) .site-footer > .container { max-width: 1360px; }
.portal-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 34px; align-items: start; }
.portal-body { display: grid; gap: 24px; min-width: 0; }

/* ---- sidebar ---- */
.portal-nav { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.portal-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 11px;
  font-family: var(--serif); font-weight: 600; font-size: .92rem; color: var(--ink); text-decoration: none;
  transition: background .15s, color .15s; }
.portal-nav a svg { width: 18px; height: 18px; flex: none; color: var(--muted); transition: color .15s; }
.portal-nav a:hover { background: #F3F6FE; }
.portal-nav a.on { background: linear-gradient(135deg, #113DCD, #7B4BE0); color: #fff; }
.portal-nav a.on svg { color: #fff; }
.portal-new { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 16px !important; color: #113DCD !important; }
.portal-new svg { color: #113DCD !important; }
.portal-out { margin-top: 2px; font-size: .85rem !important; font-weight: 400 !important; color: var(--muted) !important; }

/* progress ring */
.pm-ring { --pct: 0; flex: none; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#113DCD calc(var(--pct) * 1%), #E8ECF7 0);
  position: relative; }
.pm-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.pm-ring span { position: relative; z-index: 1; font-family: var(--serif); font-weight: 700;
  font-size: .95rem; color: #113DCD; }

/* ---- empty state ---- */
.ov-empty svg { width: 58px; height: 58px; }
.ov-trust { list-style: none; padding: 0; margin: 26px auto 0; max-width: 520px; text-align: left; }
.ov-trust li { position: relative; padding-left: 28px; margin-bottom: 10px; font-size: .87rem; color: var(--muted); }
.ov-trust li::before { content: ""; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; border-radius: 50%;
  background-color: #E7F6EC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314663A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 10px; background-repeat: no-repeat; background-position: center; }

/* ---- profile completeness panel ---- */
.profile-meter .pm-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.profile-meter h2 { font-size: 1.15rem; margin: 0 0 4px; }
.profile-meter p { font-size: .87rem; color: var(--muted); margin: 0; }
.pm-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 22px; }
.pm-list li { display: flex; align-items: center; gap: 9px; font-size: .87rem; color: var(--muted); }
.pm-list li svg { width: 16px; height: 16px; flex: none; color: #C4CBDD; }
.pm-list li.is-done { color: var(--ink); }
.pm-list li.is-done svg { color: #2F8F4E; }

/* ---- radio preference groups ---- */
.pref-set { border: 0; padding: 0; margin: 0 0 26px; }
.pref-set legend { font-family: var(--serif); font-weight: 600; font-size: .92rem; color: var(--ink);
  padding: 0; margin-bottom: 12px; }
.pref-opt { display: flex; align-items: flex-start; gap: 11px; padding: 12px 15px; margin-bottom: 8px;
  border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-size: .89rem; line-height: 1.55;
  transition: border-color .15s, background .15s; }
.pref-opt:hover { border-color: #C9D4F5; background: #FAFBFF; }
.pref-opt input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: #113DCD; }
.pref-opt input:checked ~ span { font-weight: 700; color: var(--ink); }
.pref-note { font-size: .82rem; color: var(--muted); margin: 10px 0 0; line-height: 1.6; }

/* ---- preferences echoed on the order form ---- */
.order-pref { padding: 18px 20px; border-radius: 13px; background: #F5F8FF; border: 1px solid #DCE5FB;
  margin-bottom: 24px; }
.order-pref b { display: block; font-family: var(--serif); font-size: .89rem; margin-bottom: 10px; }
.order-pref ul { list-style: none; padding: 0; margin: 0 0 10px; }
.order-pref li { display: flex; gap: 10px; font-size: .85rem; color: var(--ink); padding: 3px 0; }
.order-pref li span { color: var(--muted); min-width: 130px; flex: none; }
.order-pref a { font-size: .83rem; font-weight: 700; color: #113DCD; }

@media (max-width: 900px) {
  .portal-grid { grid-template-columns: 1fr; }
  .portal-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .portal-nav a { flex: 1 1 auto; justify-content: center; }
  .portal-new { border-top: 0; padding-top: 11px !important; margin-top: 0; }
}
@media (max-width: 620px) {
  .profile-meter .pm-head { flex-direction: column-reverse; align-items: flex-start; }
  .order-pref li { flex-direction: column; gap: 0; }
  .order-pref li span { min-width: 0; }
}

/* ---- profile settings submenu inside the portal sidebar ---- */
.portal-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 16px;
  padding-left: 14px; border-left: 2px solid var(--line); }
.portal-sub a { padding: 7px 10px !important; font-family: inherit !important; font-weight: 400 !important;
  font-size: .85rem !important; color: var(--muted) !important; border-radius: 8px; }
.portal-sub a:hover { background: #F3F6FE; color: var(--ink) !important; }
.portal-sub a.on { background: #EEF2FE; color: #113DCD !important; font-weight: 700 !important; }
.portal-sub[hidden] { display: none; }

/* the sticky site header must not cover a section jumped to from the submenu */
.dash-panel[id] { scroll-margin-top: 96px; }

@media (max-width: 900px) {
  .portal-sub { flex-direction: row; flex-wrap: wrap; width: 100%; order: 99;
    margin: 8px 0 0; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .portal-sub a { flex: 1 1 auto; text-align: center; }
}

/* ==========================================================================
   Portal overview blocks
   ========================================================================== */

/* ---- three-panel hero strip ---- */
.hero-strip { display: grid; grid-template-columns: 1.1fr 1fr 1fr; background: #fff;
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.hs-panel { padding: 26px 28px; display: flex; flex-direction: column; align-items: flex-start;
  position: relative; min-width: 0; }
.hs-panel h3 { font-size: 1rem; margin: 0 0 6px; }
.hs-panel p { font-size: .86rem; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.hs-panel .btn { margin-top: auto; }
.hs-lead { font-size: .95rem !important; color: var(--ink) !important; line-height: 1.65 !important;
  margin-bottom: 20px !important; }
.hs-lead b { color: var(--navy-800); }
.hs-badge { display: inline-flex; align-items: center; gap: 9px; margin-top: auto;
  font-size: .8rem; font-weight: 700; color: #14663A; }
.hs-badge svg { width: 20px; height: 20px; flex: none; }
.hs-blue  { background: #F4F6FF; }
.hs-green { background: #F2FAF5; padding-right: 108px; }

.hs-ring { --pct: 0; position: absolute; top: 26px; right: 26px;
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#14663A calc(var(--pct) * 1%), #DDEAE1 0); }
.hs-ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #F2FAF5; }
.hs-ring span { position: relative; z-index: 1; font-family: var(--serif); font-weight: 700;
  font-size: .82rem; color: #14663A; }
.hs-ring-label { position: absolute; top: 94px; right: 20px; width: 74px; text-align: center;
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; color: #14663A; }

/* ---- service catalogue with tabs ---- */
.svc-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: -6px 0 24px; }
.svc-tab { font: inherit; font-size: .85rem; font-weight: 700; color: var(--muted); cursor: pointer;
  padding: 9px 18px; border-radius: 10px; border: 1px solid var(--line); background: #fff;
  transition: background .15s, color .15s, border-color .15s; }
.svc-tab:hover { background: #F3F6FE; color: var(--ink); }
.svc-tab.on { background: #EEF2FE; border-color: #C9D4F5; color: #113DCD; }
.svc-pane[hidden] { display: none; }

/* The tier cards are the ones from editing.html#tiers, in a narrower column —
   only the spacing and type sizes come down, never the structure. */
.portal .tier-grid { gap: 16px; }
.portal .tier { padding: 30px 20px 26px; border-radius: 16px; }
.portal .tier h3 { font-size: 1.02rem; }
.portal .tier .tier-tag { font-size: .8rem; min-height: 56px; margin: 6px 0 14px; }
.portal .tier .price { font-size: 1.62rem; }
.portal .tier .price small { font-size: .76rem; }
.portal .tier ul { margin: 16px 0 20px; }
.portal .tier li { font-size: .8rem; padding: 7px 0; gap: 8px; line-height: 1.45; }
.portal .tier li svg { width: 14px; height: 14px; margin-top: 3px; }
.portal .tier .btn { min-height: 44px; font-size: .84rem; padding-left: 12px; padding-right: 12px; }
.portal .tier-flag { font-size: .6rem; letter-spacing: .07em; padding: 5px 12px; top: -12px; }
/* hovering anywhere on the card lights up its call to action */
.portal .tier:hover { border-color: var(--navy-800); }
.portal .tier:hover .btn-outline { background: var(--navy-800); color: var(--white); }

.svc-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 14px; }
.svc-mini-item { border: 1px solid var(--line); border-radius: 13px; padding: 18px 20px; }
.svc-mini-item h4 { font-size: .92rem; margin: 0 0 5px; display: flex; align-items: center;
  flex-wrap: wrap; gap: 8px; }
.svc-mini-item p { font-size: .82rem; color: var(--muted); line-height: 1.55; margin: 0; }
.svc-mini-soon { background: #FAFBFF; }
.svc-soon { padding: 2px 9px; border-radius: 999px; background: #FFF3E0; color: #C97A10;
  font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.svc-note { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; margin-top: 20px; padding: 18px 22px; border-radius: 14px; background: #F4F6FF; }
.svc-note b { display: block; font-family: var(--serif); font-size: .95rem; margin-bottom: 3px; }
.svc-note span { font-size: .84rem; color: var(--muted); line-height: 1.55; }

/* ---- trust bar ---- */
.trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center;
  padding: 26px 24px; border-radius: 20px; background: linear-gradient(120deg, var(--navy-900), var(--navy-700)); }
.trust-bar b { display: block; font-family: var(--serif); font-size: 1.7rem; color: #fff; line-height: 1.1; }
.trust-bar span { display: block; margin-top: 5px; font-size: .78rem; color: rgba(255, 255, 255, .74);
  line-height: 1.45; }

/* ---- why authors stay ---- */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.why-item h4 { font-size: .96rem; margin: 0 0 6px; }
.why-item p { font-size: .84rem; color: var(--muted); line-height: 1.6; margin: 0; }
.why-ico { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 12px;
  display: grid; place-items: center; background: #EEF2FE; color: #113DCD; }
.why-ico svg { width: 21px; height: 21px; }

/* ---- resource cards ---- */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.res-card { display: block; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px;
  background: #fff; transition: transform .15s, box-shadow .15s, border-color .15s; }
.res-card:hover { transform: translateY(-2px); border-color: #C9D4F5;
  box-shadow: 0 12px 30px rgba(27, 37, 105, .08); }
.res-kind { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px;
  background: #EEF2FE; color: #113DCD; font-size: .66rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; }
.res-card h4 { font-size: .95rem; margin: 0 0 6px; }
.res-card p { font-size: .83rem; color: var(--muted); line-height: 1.55; margin: 0; }

/* The order form asks four separate things — what to edit, when to have it, what
   to leave out, and who the paperwork is for. A rule between them stops the whole
   column reading as one undifferentiated list of boxes. */
.ord-sep { border: 0; border-top: 1px solid var(--line); margin: 18px 0 16px; }

/* Banded step headings. A plain 1px rule was too quiet to read as a change of
   subject on a form this long, so each stage gets a tinted band with its number
   — the transition is visible at a glance rather than hunted for. */
.ord-step {
  display: flex; align-items: center; gap: 11px;
  margin: 30px 0 16px; padding: 11px 15px;
  background: var(--paper-2); border-radius: 12px;
  border-left: 3px solid var(--navy-800);
}
.ord-step:first-of-type { margin-top: 4px; }
.ord-step b {
  flex: none; width: 25px; height: 25px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-800); color: var(--white);
  font-family: var(--serif); font-size: .78rem; font-weight: 700; line-height: 1;
}
.ord-step span {
  font-family: var(--serif); font-weight: 600; font-size: .96rem;
  color: var(--navy-900); line-height: 1.2;
}

/* The order form carries a dozen controls. A tighter rhythm than the rest of
   the site keeps quote, dates and price visible together instead of pushing the
   summary a screen away. Scoped so no other form changes. */
.order-new .field { margin-bottom: 13px; }
.order-new .field label { margin-bottom: 5px; }
.order-new .field > small { margin-top: 4px; line-height: 1.45; font-size: .78rem; }
.order-new .field input, .order-new .field select, .order-new .field textarea { padding: 10px 14px; }
.order-new .upload-box + .file-list { margin: 6px 0 10px; }
.order-new .order-pref { margin-top: 14px; }
.order-new .checkline { margin: 14px 0; }

/* ---- delivery plans on the order form ----
   A date and its price on one row, so the author chooses a deadline rather
   than decoding a speed. */
.plan-block { margin: 0 0 16px; }
.plan-block h3 { font-size: .95rem; margin: 0 0 8px; }
.plan-empty, .plan-toolong { padding: 12px 14px; border: 1px dashed var(--line); border-radius: 10px;
  font-size: .83rem; color: var(--muted); line-height: 1.5; background: var(--paper); }
.plan-toolong a { color: #113DCD; font-weight: 700; }
/* One bordered table, rows divided by hairlines — the schedule reads as a
   price list rather than a stack of cards. */
.plan-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  border-top: 2px solid var(--navy-800); }
.plan-table[hidden], .plan-empty[hidden], .plan-toolong[hidden] { display: none; }
.plan-head { display: flex; justify-content: space-between; padding: 9px 14px;
  background: #F4F6FF; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy-800); }
.plan-row { display: flex; align-items: center; gap: 9px; padding: 9px 14px; cursor: pointer;
  border-top: 1px solid var(--line); background: #fff; transition: background .15s; }
.plan-row:first-of-type { border-top: 0; }
.plan-row:hover { background: #FAFBFF; }
.plan-row.on { background: #F4F6FF; }
.plan-row input { flex: none; width: 15px; height: 15px; accent-color: #113DCD; }
/* Date, badges and turnaround all sit on one line: stacking them is what made
   these rows twice as tall as they needed to be. */
.plan-when { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
  flex-wrap: wrap; line-height: 1.25; }
.plan-when b { font-family: var(--serif); font-size: .85rem; color: var(--ink); }
.plan-when small { font-size: .74rem; color: var(--muted); }
.plan-bolt { width: 13px; height: 13px; flex: none; color: #E8A33D; }

/* Badges state a fact about the row: the live campaign's percentage, the
   cheapest date, and the quickest one this manuscript can actually have. */
.plan-tag { font-family: var(--sans); font-style: normal; font-size: .66rem; font-weight: 700;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  background: #E7F6EC; color: #14663A; }
.plan-flag { position: relative; font-family: var(--sans); font-style: normal; font-size: .62rem;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  padding: 3px 9px 3px 13px; }
.plan-flag::before { content: ""; position: absolute; inset: 0; border-radius: 3px;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%); z-index: -1; }
.plan-flag { z-index: 0; }
.flag-rec { color: #8A5A06; } .flag-rec::before { background: #FCE9C4; }
.flag-exp { color: #5B3AA8; } .flag-exp::before { background: #EBE4FB; }

.plan-price { flex: none; display: flex; align-items: baseline; gap: 8px;
  font-variant-numeric: tabular-nums; }
.plan-price del { font-family: var(--sans); font-size: .78rem; color: var(--muted); }
.plan-price b { font-family: var(--serif); font-weight: 700; font-size: .98rem; color: var(--ink); }

/* ---- sections that should be left alone ---- */
.scope-field .scope-choices { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 0; }
.scope-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px; margin-top: 14px; align-items: start; }
.scope-panel[hidden] { display: none; }
.scope-box { position: relative; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; background: var(--paper); }
/* the caret points back at whichever choice opened this panel */
.scope-box::before { content: ""; position: absolute; top: -7px; left: var(--caret, 40px);
  width: 12px; height: 12px; background: var(--paper); border-left: 1px solid var(--line);
  border-top: 1px solid var(--line); transform: rotate(45deg); }
.scope-sections { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.scope-sections label { display: flex; align-items: center; gap: 10px; font-size: .86rem;
  cursor: pointer; }
.scope-sections input { width: 16px; height: 16px; accent-color: #113DCD; }
.scope-other { width: 100%; margin-top: 12px; }
.scope-tip { position: relative; margin: 0; padding: 12px 16px; border-radius: 10px;
  background: #EEF2FE; color: #113DCD; font-size: .84rem; line-height: 1.5; }
.scope-tip::before { content: ""; position: absolute; top: 16px; left: -6px; width: 12px; height: 12px;
  background: #EEF2FE; transform: rotate(45deg); }

@media (max-width: 700px) {
  .scope-panel { grid-template-columns: 1fr; }
  .scope-tip { display: none; }
}

/* reference material sits visually below the manuscript it supports */
.upload-box-ref { margin-top: 14px; border-style: dashed; background: var(--paper); }
.upload-box-ref b .opt { font-family: var(--sans); font-weight: 400; font-size: .78rem; color: var(--muted); }

/* These read as a question and its answers, not as form labels, so they keep
   normal sentence case instead of the shouted uppercase used for field names. */
.field .scope-label { font-family: var(--serif); font-size: .95rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 8px; }
.scope-choices { display: grid; gap: 5px; margin-bottom: 8px; }
.field label.scope-choice { display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--sans); font-size: .88rem; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--ink); margin-bottom: 0; }
.scope-choice input { width: 17px; height: 17px; accent-color: #113DCD; }

@media (max-width: 560px) {
  .plan-row { flex-wrap: wrap; }
  .plan-price { width: 100%; padding-left: 32px; }
}

/* the reference row is the one that gets forgotten, so it reads a shade louder */
.pay-ref td { border-top: 1px solid var(--line); }
.pay-ref td small { display: block; margin-top: 2px; font-family: var(--sans); font-weight: 400;
  font-size: .76rem; color: var(--muted); text-transform: none; letter-spacing: 0; }
.pay-ref code { background: #FFF3E0 !important; color: #A85F06 !important; }

/* ---- campaign strip ----
   Sits above everything, driven by the same row that discounts the quote. */
/* ---- signed in as somebody else ----
   Deliberately the ugliest thing on the site. The whole point of the feature is
   that the session is indistinguishable from the real user's, so the only guard
   against forgetting whose account you are in is a bar you cannot read past. It
   sticks to the top for the same reason: scrolling must not make it go away. */
.imp-bar { position: sticky; top: 0; z-index: 900; background: #8E2018; color: #fff;
  border-bottom: 3px solid #FFD98A; }
.imp-bar .container { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 10px; padding-bottom: 10px; }
.imp-bar p { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 9px;
  flex-wrap: wrap; margin: 0; font-size: .85rem; line-height: 1.4; }
.imp-bar svg { width: 19px; height: 19px; flex: none; color: #FFD98A; }
.imp-bar b { font-family: var(--serif); font-weight: 700; }
.imp-bar span { color: rgba(255, 255, 255, .9); }
.imp-bar form { flex: none; margin: 0; }
.imp-bar button { padding: 9px 18px; border: 2px solid #fff; border-radius: 999px;
  background: #fff; color: #8E2018; font-family: var(--serif); font-weight: 700;
  font-size: .82rem; cursor: pointer; }
.imp-bar button:hover { background: #FFD98A; border-color: #FFD98A; }
@media print { .imp-bar { position: static; } }

.promo-bar { background: linear-gradient(90deg, #6B1E5B 0%, #7B2E86 45%, #5B4BC4 100%); color: #fff; }
.promo-bar .container { display: flex; align-items: center; gap: 16px;
  padding-top: 9px; padding-bottom: 9px; }
.promo-bar p { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
  margin: 0; font-size: .84rem; line-height: 1.35; }
.promo-bar svg { width: 18px; height: 18px; flex: none; color: #FFD98A; }
.promo-bar b { font-family: var(--serif); font-weight: 700; }
.promo-bar span { color: rgba(255, 255, 255, .88); }
.promo-code { flex: none; display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.15; }
.promo-code small { font-size: .62rem; color: rgba(255, 255, 255, .7); letter-spacing: .04em; }
.promo-code b { font-size: .82rem; letter-spacing: .06em; border-bottom: 1px dashed rgba(255,255,255,.6); }
.promo-x { flex: none; border: 0; background: none; color: rgba(255, 255, 255, .8);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.promo-x:hover { color: #fff; }
.promo-bar[hidden] { display: none; }
@media (max-width: 700px) {
  .promo-bar p { flex-wrap: wrap; font-size: .78rem; }
  .promo-code { display: none; }
}

/* ---- copy button ----
   Sits beside anything the author has to retype into a banking form. */
.copy-wrap { display: inline-flex; align-items: center; gap: 6px; }
.copy-btn { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px;
  padding: 0; margin-left: 6px; vertical-align: middle; cursor: pointer;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--muted);
  transition: color .15s, border-color .15s, background .15s; }
.copy-btn:hover { color: #113DCD; border-color: #C9D4F5; background: #F3F6FE; }
.copy-btn:focus-visible { outline: 2px solid var(--navy-800); outline-offset: 1px; }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn .ci-done { display: none; }
.copy-btn.is-copied { color: #14663A; border-color: #BFE3CD; background: #E7F6EC; }
.copy-btn.is-copied .ci-copy { display: none; }
.copy-btn.is-copied .ci-done { display: block; }

/* ---- phone field with a country picker ----
   The flag is a regional-indicator letter pair, so it needs the emoji font;
   without it the browser would draw two lettered boxes. */
.zp-flag { font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 1.05em; line-height: 1; }

.phone-field { display: flex; align-items: stretch; gap: 0; }
.phone-field .phone-no { flex: 1; min-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-left: 0; }
.cc-native { flex: none; width: 148px; border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* once main.js takes over, the native select hides behind the button */
.phone-field.is-enhanced .cc-native { position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cc-picker { position: relative; flex: none; }
.cc-btn { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px;
  font: inherit; font-size: .92rem; cursor: pointer; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line); border-right: 0;
  border-radius: 12px 0 0 12px; transition: border-color .15s, background .15s; }
.cc-btn:hover { background: #F7F9FF; }
.cc-btn:focus-visible { outline: 2px solid var(--navy-800); outline-offset: -2px; }
.cc-dial { font-variant-numeric: tabular-nums; }
.cc-caret { width: 0; height: 0; margin-left: 2px; border: 5px solid transparent;
  border-top-color: var(--muted); transform: translateY(2px); }

.cc-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: 320px; max-width: 78vw;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(27, 37, 105, .16); overflow: hidden; }
.cc-pop[hidden] { display: none; }
.cc-search { width: 100%; height: 42px; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 0 14px; font: inherit; font-size: .9rem; }
.cc-search:focus { outline: none; background: #F7F9FF; }
.cc-list { list-style: none; margin: 0; padding: 6px; max-height: 264px; overflow-y: auto; }
.cc-list li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  font-size: .88rem; cursor: pointer; }
.cc-list li:hover, .cc-list li.is-active { background: #EEF2FE; }
.cc-list li[aria-selected="true"] { font-weight: 700; }
.cc-list .cc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-list .cc-code { color: var(--muted); font-variant-numeric: tabular-nums; }
.cc-empty { padding: 16px; text-align: center; font-size: .86rem; color: var(--muted); }

@media (max-width: 520px) {
  .cc-pop { width: 280px; }
}

/* ---- help block ---- */
.help-card { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; padding: 28px 32px; border-radius: 20px; background: #F4F6FF;
  border: 1px solid #E1E7FA; }
.help-card h3 { font-size: 1.08rem; margin: 0 0 6px; }
.help-card p { font-size: .87rem; color: var(--muted); line-height: 1.6; margin: 0; max-width: 460px; }
.help-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.help-links a:first-child { font-size: .89rem; font-weight: 700; color: #113DCD; }

@media (max-width: 1080px) {
  .hero-strip { grid-template-columns: 1fr 1fr; }
  .hs-panel:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
}
/* Four across is only honest while each card still has ~185px. The sidebar
   stacks at 900px and hands that width back, so the usable range comes in two
   pieces: wide desktops, and the band just under 900 where there is no sidebar.
   In between, a balanced 2×2 beats four cramped columns. */
.portal .tier-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) and (min-width: 901px) {
  .portal .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .portal .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .why-grid, .res-grid { grid-template-columns: 1fr; }
  .trust-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .portal .tier-grid { grid-template-columns: 1fr; }
  .portal .tier .tier-tag { min-height: 0; }
}
@media (max-width: 700px) {
  .hero-strip { grid-template-columns: 1fr; }
  .hs-panel { border-bottom: 1px solid var(--line); }
  .hs-panel:last-child { border-bottom: 0; }
  .hs-green { padding-right: 108px; }
}

/* ==========================================================================
   Mobile ⇄ desktop view switch
   Built and shown by js/main.js only when screen.width <= 900, i.e. on a real
   phone. There is deliberately no media query gating visibility: in desktop
   view the viewport reports 1280px, so a max-width query would hide the very
   button needed to switch back.
   ========================================================================== */
.view-switch {
  position: fixed; right: 14px; bottom: 14px; z-index: 90;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 15px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px;
  background: var(--navy-900); color: var(--white);
  font-family: var(--serif); font-size: .8rem; font-weight: 600; line-height: 1;
  box-shadow: 0 6px 22px rgba(16, 23, 63, .34); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.view-switch:active { transform: translateY(1px); }
.view-switch svg { width: 15px; height: 15px; flex: none; }

/* In desktop view the whole page is laid out at 1280px and scaled down to fit a
   ~375px screen — roughly 0.3x. At normal size this button would render about
   13px across and be impossible to tap, so it is scaled up by about the same
   factor to stay the same physical size in the hand. */
html.zp-desktop-view .view-switch {
  right: 44px; bottom: 44px; gap: 22px;
  padding: 32px 48px; border-width: 3px; font-size: 2.5rem;
  box-shadow: 0 18px 60px rgba(16, 23, 63, .38);
}
html.zp-desktop-view .view-switch svg { width: 46px; height: 46px; stroke-width: 2.4; }

@media print { .view-switch { display: none; } }

/* ---------- "Keep me signed in" on the sign-in form ---------- */
.auth-remember {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 2px 0 20px; cursor: pointer;
  font-family: var(--serif); font-size: .9rem; font-weight: 600; color: var(--ink);
}
.auth-remember input {
  flex: none; width: 18px; height: 18px; margin: 1px 0 0;
  accent-color: var(--navy-800); cursor: pointer;
}
.auth-remember span { display: block; }
.auth-remember small {
  display: block; margin-top: 3px;
  font-family: var(--sans); font-size: .78rem; font-weight: 400; color: var(--muted); line-height: 1.45;
}

/* ---------- Profile: remembered devices ---------- */
.device-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.device-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 16px; background: var(--white);
  border: 1px solid var(--line); border-radius: 12px;
}
.device-list li.is-here { border-color: var(--navy-800); background: var(--paper-2); }
.dv-what { display: block; min-width: 0; }
.dv-what b { font-family: var(--serif); font-size: .95rem; color: var(--navy-900); }
.dv-what small { display: block; margin-top: 3px; font-size: .78rem; color: var(--muted); }
.dv-here {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--navy-800); color: var(--white);
  font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.dv-form { flex: none; margin: 0; }
@media (max-width: 560px) {
  .device-list li { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dv-form, .dv-form .btn { width: 100%; }
}

/* ---------- File pickers ----------
   A bare <input type="file"> draws its own button and its own "no file chosen",
   and both come from the browser in the BROWSER's language — so a Turkish Chrome
   puts "Dosya Seç" in the middle of an English form and there is no attribute,
   property or stylesheet that can change the words. The only fix is to stop
   showing the browser's control and show our own.

   The input is not hidden, only made transparent and stretched over the box:
   display:none would break `required`, because Chrome refuses to report a
   validation message on a control it cannot scroll into view. Same technique as
   .upload-box, which has worked on the quote form since day one. */
/* .field label is uppercase with wide tracking, and this IS a label — without a
   reset the control shouts NO FILE CHOSEN and, worse, renames the author's file
   to MAIN-TEXT.DOCX the moment one is picked. It needs its own selector rather
   than living on .filepick below: a lone class (0,1,0) loses to .field label
   (0,1,1), so the plainer version silently did nothing. */
.field label.filepick { text-transform: none; letter-spacing: normal;
  font-family: var(--sans); font-weight: 400; color: var(--ink); }
.filepick { position: relative; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer; transition: border-color .15s, background-color .15s; }
.filepick:hover { border-color: #113DCD; background: #F7F9FF; }
.filepick:focus-within { border-color: #113DCD; box-shadow: 0 0 0 3px rgba(17,61,205,.12); }
.filepick input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; }
.filepick .fp-btn { flex: none; padding: 6px 13px; border-radius: 7px; background: #EEF2FE;
  color: #113DCD; font-size: .8rem; font-weight: 700; pointer-events: none; }
/* The chosen filename is the whole point of the control on the editor's return
   form, where TRACK and CLEAN must not be swapped — so it is readable, not the
   browser's grey afterthought, and it truncates rather than wrapping the row. */
.filepick .fp-name { font-size: .85rem; color: var(--muted); pointer-events: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filepick.has { border-color: #B9C6EE; background: #FCFDFF; }
.filepick.has .fp-name { color: var(--ink); font-weight: 600; }

/* ---------- Row numbers ----------
   Position in the list as it is currently shown, not an identity — the order's
   real name is the reference in the next column. Muted and narrow so the two are
   never confused, and tabular figures so the column stays straight past 9. */
.rownum { width: 1%; white-space: nowrap; text-align: right; color: var(--muted);
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* The reCAPTCHA checkbox. Google's iframe is a fixed 304px, so it is given room
   rather than squeezed, and it scales down on a narrow phone instead of pushing
   the form sideways. */
.zp-captcha, [data-captcha] { margin: 18px 0; }
.zp-captcha:empty, [data-captcha]:empty { margin: 0; }
@media (max-width: 360px) {
  .g-recaptcha { transform: scale(.87); transform-origin: 0 0; }
}