:root {
  --ink: #15182f;
  --muted: #525a70;
  --paper: #f8f9fe;
  --line: #dfe4f0;
  --blue: #332bc7;
  --navy: #171832;
}
html {scroll-padding-top: 96px}
body {background: var(--paper); line-height: 1.45}
.site-header {height: 72px; position: sticky; top: 0; z-index: 10; background: #fff; max-width: none; padding: 0 max(24px,calc((100vw - 1184px)/2)); gap: 26px}
.site-header .brand,.site-footer .brand {display: inline-flex; gap: 9px; white-space: nowrap; font-size: 24px}
.brand img {display: block; flex: 0 0 auto}
.site-header .main-navigation {display: flex; align-items: center; gap: 22px; font-size: 14px}
.main-navigation a,.site-footer a {display: inline-flex}
.main-navigation > a {min-height: 42px; align-items: center}
.main-navigation > a:hover,.tool-menu summary:hover {color: var(--blue)}
.main-navigation .account-link {padding: 0 14px; border: 1px solid var(--line); border-radius: 10px}
.mobile-menu {display: none}
.tool-menu summary {display: flex; gap: 5px; align-items: center; padding: 10px 11px; list-style: none; cursor: pointer; border-radius: 9px; background: #eeedff}
.tool-menu summary::-webkit-details-marker {display: none}
.tool-menu[open] summary svg,.mobile-menu[aria-expanded="true"] svg {transform: rotate(180deg)}
.menu-panel {position: absolute; top: calc(100% - 1px); left: max(20px,calc((100vw - 1184px)/2)); right: max(20px,calc((100vw - 1184px)/2)); border: 1px solid var(--line); border-radius: 0 0 17px 17px; background: white; padding: 20px; box-shadow: 0 18px 38px #1718321f; max-height: calc(100dvh - 80px); overflow: auto}
.menu-all {justify-content: space-between; display: flex!important; color: var(--blue); padding: 0 4px 12px; border-bottom: 1px solid var(--line)}
.menu-groups {display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px}
.menu-group h2 {font-size: 14px; letter-spacing: 0; margin: 15px 0 4px}
.menu-group h2 a {background: var(--tone); color: var(--shade); padding: 8px; border-radius: 7px}
.menu-group > a {display: block; padding: 7px 8px; font-size: 13px; font-weight: 550; border-radius: 6px}
.menu-group > a:hover,.directory-tools a:hover {background: #f0efff; color: var(--blue)}
[data-group=organise] {--tone:#e7e6ff;--shade:#352aa1}
[data-group=to-pdf] {--tone:#ffeed6;--shade:#854000}
[data-group=convert] {--tone:#e1efff;--shade:#174885}
[data-group=edit] {--tone:#f5e4f9;--shade:#753479}
[data-group=optimise] {--tone:#dff5ee;--shade:#135a43}
.finish-hero {position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px,5vw,68px); align-items: center; padding: 44px 0 48px}
.finish-hero h1,.tool-intro h1,.account-aside h1 {font-size: clamp(44px,6.2vw,83px); line-height: .99; letter-spacing: -.06em; margin: 15px 0 19px}
.finish-hero h1 {color: var(--navy)}
.finish-hero p {max-width: 435px; font-size: 17px; margin: 0 0 23px}
.finish-hero .eyebrow {color: var(--blue)}
.finish-hero .eyebrow span {background: #fe8951}
.hero-secondary {font-weight: 700; color: var(--blue); padding: 12px; display: inline-block}
.finish-hero-image {position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: #2620ad}
.finish-hero-image img {display: block; width: 100%; height: auto; aspect-ratio: 1.48; object-fit: cover}
.finish-hero-image figcaption {position: absolute; left: 13px; bottom: 13px; padding: 7px 11px; border-radius: 9px; background: white; font-size: 12px; font-weight: 700}
.finish-hero-image strong {font-size: 18px; color: var(--blue); padding-right: 3px}
.tool-section {padding-bottom: 32px}
.cards {grid-template-columns: repeat(4,minmax(0,1fr))}
.card {display: block; min-height: 164px; padding: 17px}
.card .icon {margin-bottom: 13px}
.card .icon text {stroke: none; fill: currentColor; font: 700 14px system-ui,sans-serif}
.card .arrow {right: 13px; top: 17px}
.card .tool-free {margin-top: 10px}
.filters button {min-height: 40px}
.home-details {padding: 26px 0 35px}
.home-section-title h2,.trust-panel h2,.premium-strip h2 {font-size: clamp(26px,3.6vw,43px); margin: 8px 0 15px; line-height: 1.1}
.workflow-grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px}
.workflow-grid article {background: white; border: 1px solid var(--line); border-radius: 15px; padding: 20px}
.workflow-grid h3 {font-size: 18px; margin: 12px 0 0}
.workflow-icon {display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: #eeedff; color: var(--blue); font-weight: 750}
.workflow-grid a,.trust-panel a,.account-aside a,.account-box a {color: var(--blue); font-weight: 650; text-decoration: underline; text-underline-offset: 4px}
.trust-panel {background: var(--navy); color: white; padding: clamp(22px,4vw,48px); border-radius: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,4vw,48px); margin: 10px 0 18px}
.trust-panel p,.trust-panel li span {color: #d2d6ee}
.trust-panel a {color: #ddd8ff}
.trust-panel ul {padding: 0; margin: 0; list-style: none}
.trust-panel li {display: grid; padding: 11px 0; gap: 3px; border-bottom: 1px solid #ffffff30}
.trust-panel li:last-child {border: 0}
.trust-panel li span {font-size: 14px}
.quick-help .prose {margin-top: 12px}
.premium-strip {background: #ebe9ff; border: 1px solid #dad6ff; margin-top: 10px}
.site-footer {display: block; max-width: none; background: var(--navy); color: #fff; border: 0; margin: 42px 0 0; padding: 0}
.footer-inner {max-width: 1240px; margin: auto; padding: 30px 26px 18px}
.footer-grid {display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr; gap: 20px}
.footer-grid h2 {font-size: 14px; letter-spacing: 0; margin: 4px 0 9px; color: #fff}
.footer-grid section a {display: flex; width: fit-content; align-items: center; min-height: 32px; font-size: 14px; color: #d2d6ee}
.footer-grid a:hover {color: white; text-decoration: underline}
.site-footer .footer-brand .brand {color: #fff}
.footer-brand .brand-accent {color: #b7afff}
.footer-brand p,.footer-brand > a:last-child {color: #d2d6ee; font-size: 14px}
.footer-end {border-top: 1px solid #ffffff32; padding-top: 15px; margin-top: 21px; display: flex; justify-content: space-between; gap: 12px; color: #d2d6ee; font-size: 12px}
.category-pills,.directory-tools {display: flex; gap: 8px; flex-wrap: wrap}
.category-pills a,.directory-tools a {display: inline-flex; align-items: center; padding: 8px 12px; min-height: 40px; background: white; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; font-weight: 650}
.catalogue,.guide-list {display: grid; gap: 14px; margin-top: 20px}
.catalogue section {padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: #f1f3fc}
.catalogue h2 {margin: 0}
.catalogue p {margin: 5px 0 12px}
.breadcrumbs {display: flex; gap: 10px; font-size: 14px; color: var(--muted); margin-bottom: 14px}
.breadcrumbs a {text-decoration: underline; text-underline-offset: 4px}
.tool-intro {text-align: center; background: var(--tone); border-radius: 20px; padding: 30px 18px}
.tool-mark {display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #fff; color: var(--shade); font-size: 27px; margin-bottom: 12px}
.tool-intro .eyebrow {justify-content: center; color: var(--shade)}
.tool-intro h1 {font-size: clamp(39px,6vw,68px)}
.tool-intro .tool-facts {font-size: 14px; margin: 12px 0 0}
.tool-explainer li {margin-bottom: 5px}
.account-layout {display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,4vw,52px); align-items: start}
.account-aside {background: #ebe9ff; border-radius: 18px; padding: clamp(20px,4vw,50px)}
.account-aside h1 {font-size: clamp(37px,5vw,61px)}
.account-box {background: white; border: 1px solid var(--line); border-radius: 16px; padding: clamp(16px,3vw,28px)}
.account-notice {background: #f0efff; border-radius: 8px; padding: 11px; font-size: 14px; margin-top: 0}
.account-box form:not([hidden]) {display: grid; gap: 8px}
.account-box label {font-size: 14px; font-weight: 700; margin-top: 5px}
.account-box input,.account-box select {border: 1px solid #bfc6da; background: white; color: var(--ink); border-radius: 8px; min-height: 46px; width: 100%; padding: 9px 12px; font-size: 16px}
.password-wrap {position: relative}
.password-wrap input {padding-right: 52px}
.password-wrap button {display: grid; place-items: center; position: absolute; right: 2px; top: 2px; bottom: 2px; width: 44px; border: 0; border-radius: 7px; background: transparent; color: var(--blue)}
.password-wrap button[aria-pressed="true"] {background: #eeedff}
.account-box .primary {margin-top: 10px}
.account-status:empty {display: none}
.verification-preview {background: #eef8f4; padding: 14px; border-radius: 9px}
.verification-preview h2 {font-size: 19px; margin: 0}
.verification-preview p {margin: 6px 0 0}
@media(max-width:900px) {
  .site-header .main-navigation {gap: 12px}
  .cards {grid-template-columns: repeat(3,minmax(0,1fr))}
}
@media(max-width:760px) {
  html {scroll-padding-top: 80px}
  main {padding-left: 17px; padding-right: 17px}
  .site-header {min-height: 64px; height: 64px; padding: 0 17px; flex-wrap: nowrap}
  .mobile-menu {display: inline-flex; align-items: center; gap: 7px; min-height: 43px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); font-weight: 700; padding: 0 12px}
  .site-header .main-navigation {display: none; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; padding: 14px 17px; background: white; border-bottom: 1px solid var(--line); max-height: calc(100dvh - 64px); overflow: auto}
  .site-header .main-navigation.is-open {display: grid; gap: 5px}
  .main-navigation > a {padding: 0 10px}
  .tool-menu summary {min-height: 45px; justify-content: space-between}
  .menu-panel {position: static; max-height: none; padding: 10px 0; border: 0; box-shadow: none}
  .menu-groups {grid-template-columns: repeat(2,minmax(0,1fr))}
  .menu-group > a {min-height: 38px}
  .finish-hero,.trust-panel,.account-layout {grid-template-columns: 1fr}
  .finish-hero {padding: 27px 0 31px}
  .finish-hero h1 {font-size: clamp(43px,11vw,66px)}
  .finish-hero p {font-size: 16px}
  .finish-hero-image img {aspect-ratio: 1.9}
  .cards,.workflow-grid,.footer-grid {grid-template-columns: repeat(2,minmax(0,1fr))}
  .workflow-grid article {padding: 16px}
  .footer-brand {grid-column: 1/-1}
  .footer-inner {padding: 25px 19px 16px}
  .footer-end {font-size: 11px}
}
@media(max-width:385px) {
  .workflow-grid {grid-template-columns: 1fr}
  .card {padding: 12px}
}

.site-header {border-bottom: 1px solid #e6e5ef; box-shadow: 0 3px 18px #1a173308}
.site-header .brand {letter-spacing: -.045em}
.main-navigation .nav-signup {border-radius: 8px; background: #3730c8; color: white; padding: 9px 15px; font-weight: 700}
.main-navigation .nav-signup:hover {background: #28219f; color: white}
.mobile-menu {gap: .4rem; align-items: center}
.site-footer {background: #181830; border-top: 4px solid #6b61e6}
.footer-inner {padding: 38px 26px 21px}
.footer-intro {display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 25px; margin-bottom: 22px; border-bottom: 1px solid #ffffff32}
.site-footer .brand > span {color: white}
.site-footer .brand .brand-accent {color: #c5bdff}
.footer-brand p {margin: 8px 0 0}
.footer-cta {flex-shrink: 0; align-items: center; gap: 10px; color: #fff; font-weight: 700; border: 1px solid #aaa5e1; border-radius: 8px; padding: 10px 14px}
.footer-cta:hover {background: #312d55}
.footer-grid {grid-template-columns: repeat(4,minmax(0,1fr))}
.footer-grid h2 {color: #e9e6ff}
.plan .price small {font-size: .45em; font-weight: 600}
.plan .price-year {font-size: 1.5rem}
.plan-compare {margin-top: 34px}
.comparison-scroll {overflow-x: auto; border: 1px solid var(--line); border-radius: 12px}
.plan-compare table {border-collapse: collapse; width: 100%; text-align: left}
.plan-compare th,.plan-compare td {padding: 12px; border-bottom: 1px solid var(--line)}
.plan-compare thead {background: #eae8ff}
.plan-compare tr:last-child > * {border-bottom: none}
.plan-compare td:last-child {font-weight: 700; color: #342a96}
.plan-compare > p {margin-top: 12px}
.billing-actions:not([hidden]) {display: flex; gap: 8px; flex-wrap: wrap}
[data-promo] {background: #f3edff; border-radius: 8px; padding: 10px}
@media (max-width: 760px) {
  .site-header .mobile-menu {display: inline-flex}
  .footer-inner {padding: 27px 19px 18px}
  .footer-intro {align-items: flex-start; flex-direction: column}
  .footer-grid {grid-template-columns: repeat(2,minmax(0,1fr))}
  .plan-compare th,.plan-compare td {padding: 8px; font-size: .86rem}
}