body {
  padding-bottom: 1rem;
}

.footer-heading {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .5rem;
}

.btn {
  margin: 0.7rem;
}

a {
    color: #285f8f;
    text-decoration: none;
}
a:hover {
    color: #23527c;
}

/* A link sitting inside a sentence cannot be distinguished by colour alone (WCAG 1.4.1),
   and #285f8f against the surrounding copy is only 2.42:1. The underline carries the
   distinction so the link colour does not have to. Scoped to running text — links that
   are really cards or buttons style themselves at higher specificity and keep their own
   decoration. text-decoration-line rather than the shorthand, so rules that set a softer
   underline colour (.home-content a) keep it. */
main p a:not(.btn):not(.nav-link),
main li a:not(.btn):not(.nav-link),
footer p a {
    text-decoration-line: underline;
    text-underline-offset: .15em;
}

img {
  margin: 0.7rem;
  max-width: 100%;
}
img.howto {
  height: auto;
}
img.lazy {
  content: "";
  background: #F1F1FA;
  max-width: 100%;
  display: block;
  margin: 0.7rem auto;
  border: 0;
}
img.lazydone {
  max-width: 100%;
  margin: 0.7rem auto;
  border: 0;
}

img[alt$=">"] {
  float: right;
}

img[alt$="<"] {
  float: left;
}
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 2rem; height: 0; overflow: hidden; } 
.video-container iframe, .video-container object, .video-container embed, .video-container .container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.navbar-brand {
  padding: 0;
}
.navbar-brand>img {
  height: 100%;
  padding: 0;
  margin: 0;
  width: auto;
}


.pricing {
  text-align: center;
  border: 0.07rem solid #f0f0f0;
  color: #000;
  font-size: 1rem;
  padding-left: 0;
  margin-bottom: 30px;
}
.pricing img {
  display: block;
  margin: auto;
  width: 2rem;
}
.pricing li:first-child,
.pricing li:last-child {
  padding: 1.5rem 1rem;
}
.pricing li {
  list-style: none;
  padding: 1rem;
}
.pricing li + li {
  border-top: 0.07rem solid #f0f0f0;
}
.pricing big {
  font-size: 1.5rem;
  font-weight: bold;
}
.pricing h3 {
  margin-bottom: 0;
  font-size: 1.2rem;
}
.pricing span {
  font-size: 0.9rem;
  color: #999;
  font-weight: normal;
}
.pricing li:nth-last-child(2) {
  padding: 2rem 1rem;
}
.pricing button {
  width: auto;
  margin: auto;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 3rem;
  color: #fff;
  padding: 0.7rem 1.6rem;
  background: #aaa;
  opacity: 1;
  transition: opacity .2s ease;
  border: none;
  outline: none;
}
.pricing button:hover {
  opacity: .9;
}
.pricing button:active {
  box-shadow: inset 0 0.14rem 0.14rem rgba(0, 0, 0, 0.1);
}
/* pricing color */
.p-green big,
.p-green h3, .p-green .footer {
  color: #4c7737;
}
.p-green button {
  background: #4c7737;
}
.p-yel big,
.p-yel h3,.p-yel .footer {
  color: #ffbb42;
}
.p-yel button {
  background: #ffbb42;
}
.p-red big,
.p-red h3, .p-red .footer {
  color: #e13c4c;
}
.p-red button {
  background: #e13c4c;
}
.p-blue big,
.p-blue h3, .p-blue .footer {
  color: #3f4bb8;
}
.p-blue button {
  background: #3f4bb8;
}
.borderzero {
  border:0;
}
.price-strike {
text-decoration: line-through;
font-weight: 300;
}

.wrapper {
  margin: 0 auto;
  padding: 0;
}

.youtube {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
}
.youtube img {
  width: 100%;
  left: 0; 
  top:-16.7%;
  margin: 0 auto;
  padding: 0;
  opacity: 1;
  overflow: hidden;
}
.youtube .play-button {
  width: 90px;
  height: 60px;
  background-color: #333;
  box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
  z-index: 1;
  opacity: 0.8;
  border-radius: 6px;
}
.youtube .play-button:before {
  content: "";
  border-style: solid;
  border-width: 15px 0 15px 26.0px;
  border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
  cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
  position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
  top: 50%;
  left: 50%;
  transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.testimonial-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
}

.testimonial-card {
    display: flex;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 10px;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.testimonial-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
}

.testimonial-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.testimonial-text {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

/* The attribution line, not a heading — it is the last thing in the card, so it carries
   no trailing margin of its own. Previously an <h3>, whose smaller default margin the
   paragraph would otherwise replace with a full 1rem gap. */
.testimonial-name {
    font-size: 14px;
    font-weight: normal;
    color: #666;
    margin-bottom: 0;
}

#load-more-button {
    padding: 10px 20px;
    font-size: 16px;
    margin-top: 20px;
    cursor: pointer;
}
#searchBox {
    width: 300px;
    padding: 8px;
    font-size: 16px;
}

#resultBox {
    position: absolute;
    width: 300px;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    display: none;
    z-index: 999;
}

.resultItem {
    padding: 8px;
    cursor: pointer;
}

.resultItem:hover {
    background-color: #f0f0f0;
}


/* ProperSoft floating support widget (r/js/support.js) */

#psSupportBtn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100000;
    padding: 12px 22px;
    min-width: 92px;
    background: #10241a;
    color: #fff;
    border: none;
    border-radius: 999px;
    font: 600 15px/1.2 Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
#psSupportBtn:hover {
    background: #1c3328;
}
#psSupportOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, .45);
}
#psSupportOverlay.ps-open {
    display: block;
}
#psSupportModal {
    position: absolute;
    right: 20px;
    bottom: 76px;
    width: 400px;
    max-width: calc(100vw - 40px);
    height: 560px;
    max-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
    font: 14px/1.45 Arial, sans-serif;
    color: #333;
}
#psSupportModal .ps-tabs {
    display: flex;
    gap: 18px;
    padding: 4px 18px 0;
    border-bottom: 1px solid #e5e5e5;
}
#psSupportModal .ps-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 2px 8px;
    font: 600 14px Arial, sans-serif;
    color: #526158;
    cursor: pointer;
}
#psSupportModal .ps-tab.ps-active {
    color: #10241a;
    border-bottom-color: #10241a;
    font-weight: 800;
}
#psSupportModal .ps-pane {
    display: none;
    flex: 1;
    min-height: 0;
}
#psSupportModal .ps-pane.ps-active {
    display: flex;
    flex-direction: column;
}
#psSupportModal .ps-answers-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 18px;
}
#psSupportModal .ps-article {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
#psSupportModal .ps-article:last-child {
    border-bottom: none;
}
#psSupportModal .ps-a-title {
    font-weight: 650;
    color: #10241a;
    text-decoration: none;
}
#psSupportModal .ps-a-title:hover {
    text-decoration: underline;
}
#psSupportModal .ps-a-sum {
    color: #666;
    font-size: 13px;
    margin-top: 2px;
}
#psSupportModal .ps-answers-note {
    color: #666;
    font-size: 13px;
    padding: 12px 0;
}
#psSupportModal .ps-answers-cta {
    padding: 14px 0 4px;
    font-size: 14px;
}
#psSupportModal .ps-answers-cta a {
    color: #10241a;
    font-weight: 600;
}
#psSupportModal .ps-answers-search {
    display: flex;
    align-items: center;
    margin: 5px;
    padding: 8px;
    border: 1px solid #d7d7d7;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    overflow: hidden;
}
#psSupportModal .ps-search-input {
    flex: 1;
    height: 26px;
    box-sizing: border-box;
    padding: 0 0 0 3px;
    margin: 0;
    border: none;
    outline: none;
    background: transparent;
    font: 14px Arial, sans-serif;
}
#psSupportModal .ps-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 26px;
    box-sizing: border-box;
    border: none;
    background: transparent;
    color: #10241a;
    cursor: pointer;
}
#psSupportModal .ps-search-btn:hover {
    color: #237a4b;
}
#psSupportModal form {
    padding: 16px 18px 18px;
    overflow-y: auto;
}
#psSupportModal label {
    display: block;
    margin: 0 0 4px;
    font-weight: 600;
}
#psSupportModal input[type=text]:not(.ps-search-input),
#psSupportModal input[type=email],
#psSupportModal textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    margin: 0 0 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font: 14px Arial, sans-serif;
}
#psSupportModal textarea {
    min-height: 110px;
    resize: vertical;
}
#psSupportModal input[type=file] {
    margin: 0 0 12px;
    font-size: 13px;
}
#psSupportModal .ps-hp {
    position: absolute;
    left: -5000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
#psSupportModal .ps-submit {
    width: 100%;
    padding: 11px;
    margin: 0 0 10px;
    background: #10241a;
    color: #fff;
    border: none;
    border-radius: 999px;
    font: 600 15px Arial, sans-serif;
    cursor: pointer;
}
#psSupportModal .ps-submit:hover {
    background: #1c3328;
}
#psSupportModal .ps-submit:disabled {
    background: #9bbdd9;
    cursor: default;
}
#psSupportModal .ps-status {
    margin: 0 0 12px;
    padding: 9px 12px;
    border-radius: 6px;
    display: none;
}
#psSupportModal .ps-status.ps-ok {
    display: block;
    background: #e5f5e9;
    color: #1d6b2f;
    border: 1px solid #bfe5c7;
}
#psSupportModal .ps-status.ps-err {
    display: block;
    background: #fdecea;
    color: #a12622;
    border: 1px solid #f5c6c2;
}

/* Modern shared pages */
:root {
  /* ProperConvert is a native Windows/Mac desktop app, so the marketing site uses the
     platform's own UI face. Windows gets Segoe UI Variable, macOS gets SF Pro, Android
     gets Roboto — each visitor sees the face their operating system draws, which keeps
     the site continuous with the product and costs zero bytes on the critical path.
     Avenir Next was the previous first choice, which meant Mac users saw it and everyone
     else silently fell through to Segoe UI. */
  --ps-font-sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ps-font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ps-ink: #10241a;
  --ps-copy: #34463b;
  --ps-muted: #5b6a61;
  --ps-line: #d6ded8;
  --ps-paper: #fbfcf9;
  --ps-wash: #f0f5ee;
  --ps-green: #237a4b;
  --ps-green-dark: #185b37;
  --ps-green-soft: #dff2e5;
  --ps-warn: #8a5a00;
  --ps-button-radius: 999px;
}

.ps-modern {
  background: var(--ps-paper);
  color: var(--ps-ink);
  font-family: var(--ps-font-sans);
  font-size: 1rem;
  line-height: 1.65;
}

body.ps-modern > div.container:first-of-type {
  max-width: 1200px;
}

.ps-modern .navbar {
  background: transparent !important;
  border-bottom: 1px solid var(--ps-line);
  padding: .7rem 0;
}

.ps-modern .navbar > .container-fluid {
  justify-content: center;
}

.ps-modern .navbar-collapse {
  flex-grow: 0;
}

.ps-modern .navbar-nav {
  margin-right: 0 !important;
}

.ps-modern .navbar .btn {
  border-radius: var(--ps-button-radius);
  font-size: .86rem;
  font-weight: 700;
  margin: .2rem .3rem;
  padding: .55rem 1rem;
}

.ps-modern .navbar .btn-outline-success {
  border-color: var(--ps-green);
  color: var(--ps-green);
}

.ps-modern .navbar .btn-outline-primary {
  background: var(--ps-ink);
  border-color: var(--ps-ink);
  color: #fff;
}

.ps-modern main.container {
  max-width: 1080px;
  padding: clamp(3.5rem, 7vw, 6rem) 1.25rem;
}

.ps-modern main > h1 {
  color: var(--ps-ink);
  font-family: var(--ps-font-sans);
  font-size: clamp(2.8rem, 5.8vw, 4.6rem);
  font-weight: 550;
  letter-spacing: -.05em;
  line-height: .98;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  max-width: 900px;
  text-align: center;
}

.ps-modern main h2,
.ps-modern main h3,
.ps-modern main h4,
.ps-modern main h5 {
  color: var(--ps-ink);
}

.ps-modern main h2,
.ps-modern main h3,
.ps-modern main h4 {
  font-family: var(--ps-font-sans);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.ps-modern main h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 3.75rem 0 1.15rem;
}

.ps-modern main h3 {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  margin: 2.4rem 0 .8rem;
}

.ps-modern main h4 {
  font-size: 1.45rem;
  margin: 2rem 0 .7rem;
}

.ps-modern main p,
.ps-modern main li {
  color: var(--ps-copy);
}

.ps-modern main a:not(.btn):not(.nav-link) {
  color: var(--ps-green-dark);
  text-decoration-color: #9ac8ab;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
}

.ps-modern main hr {
  border-color: var(--ps-line);
  margin: 3rem 0;
  opacity: 1;
}

.ps-modern main .btn,
.ps-modern main button:not(.navbar-toggler),
.ps-modern main input[type="submit"] {
  border-radius: var(--ps-button-radius);
  font-weight: 750;
  padding: .72rem 1.05rem;
}

.ps-modern main .btn-primary,
.ps-modern main input.btn-primary {
  background: var(--ps-ink);
  border-color: var(--ps-ink);
}

.ps-modern main .btn-primary:hover,
.ps-modern main input.btn-primary:hover {
  background: var(--ps-green-dark);
  border-color: var(--ps-green-dark);
}

.ps-modern footer .row {
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.ps-modern footer .row > div {
  max-width: 720px;
  width: 100%;
}

.ps-modern footer .nav {
  align-items: center;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  justify-content: center;
}

.ps-modern footer .nav-item {
  margin-bottom: 0 !important;
}

.ps-modern footer .row .btn {
  display: inline-flex;
}

.ps-modern footer .btn {
  border-radius: var(--ps-button-radius);
  font-size: .86rem;
  font-weight: 700;
  margin: .25rem;
  padding: .65rem 1rem;
}

.ps-modern footer .btn-success {
  background: transparent;
  border-color: var(--ps-green);
  color: var(--ps-green);
}

.ps-modern footer .btn-success:hover {
  background: var(--ps-green);
  color: #fff;
}

.ps-modern footer .btn-primary,
.ps-modern footer .btn-primary:hover {
  background: var(--ps-ink);
  border-color: var(--ps-ink);
  color: #fff;
}

.ps-modern footer .d-flex {
  align-items: center;
  justify-content: center !important;
  text-align: center;
}

/* Legal pages */

.ps-legal main.container {
  max-width: 860px;
}

.ps-legal .legal-content {
  font-size: 1.05rem;
}

.ps-legal .legal-content > p:first-child {
  margin: -1.5rem 0 2.5rem;
  text-align: center;
}

.ps-legal .legal-content > p:first-child strong {
  background: var(--ps-green-soft);
  border: 1px solid #b8dac3;
  border-radius: 999px;
  color: var(--ps-green-dark);
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .45rem .75rem;
  text-transform: uppercase;
}

.ps-legal .legal-content h2 {
  font-size: clamp(1.9rem, 4vw, 2.65rem);
  margin-top: 3rem;
}

.ps-legal .legal-content h3 {
  font-family: var(--ps-font-sans);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .01em;
  margin: 1.8rem 0 .45rem;
}

.ps-legal .legal-content ul {
  background: #fff;
  border: 1px solid var(--ps-line);
  border-radius: .75rem;
  padding: 1rem 1.25rem 1rem 2.5rem;
}

.ps-legal .legal-content li + li {
  margin-top: .45rem;
}

/* Purchase page */

.ps-purchase main.container {
  max-width: 1180px;
  padding-top: clamp(3rem, 5vw, 4.5rem);
}

.ps-purchase main > h1 {
  font-size: clamp(2.7rem, 4.8vw, 3.7rem);
  margin-bottom: 2rem;
}

.ps-purchase #nav-tab {
  border: 0;
  gap: .55rem;
  margin: 0 auto 2rem !important;
}

.ps-purchase #nav-tab .nav-link {
  background: #fff;
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-button-radius);
  color: var(--ps-muted);
  font-size: .88rem;
  font-weight: 750;
  min-width: 130px;
  padding: .65rem 1.1rem;
}

.ps-purchase #nav-tab .nav-link.active {
  background: var(--ps-ink);
  border-color: var(--ps-ink);
  color: #fff;
}

.ps-purchase #propersoft_price_table section.container {
  max-width: none;
  padding: 0;
}

.ps-purchase #propersoft_price_table .row.equal {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  margin: 0;
}

.ps-purchase #propersoft_price_table .row.equal > div {
  padding: 0;
  width: auto;
}

.ps-purchase #propersoft_price_table .card {
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--ps-line);
  border-radius: .9rem;
  box-shadow: 0 18px 45px rgba(16, 36, 26, .07);
  height: 100%;
  overflow: hidden;
}

.ps-purchase #propersoft_price_table .card-body {
  margin: 0 !important;
  padding: 1.4rem;
}

.ps-purchase #propersoft_price_table .card-title {
  color: var(--ps-ink) !important;
  font-size: 1.05rem;
  font-weight: 800;
}

.ps-purchase #propersoft_price_table .lead {
  color: var(--ps-green-dark);
  font-family: var(--ps-font-sans);
  font-size: 2.6rem;
  font-weight: 550;
}

.ps-purchase #propersoft_price_table .card-body > a,
.ps-purchase #propersoft_price_table .card-body form button,
.ps-purchase #propersoft_price_table .card-body form input[type="submit"] {
  background: var(--ps-ink);
  border: 1px solid var(--ps-ink);
  border-radius: var(--ps-button-radius);
  color: #fff;
  display: inline-flex;
  font-weight: 750;
  justify-content: center;
  margin: .35rem 0;
  padding: .65rem .9rem;
  text-decoration: none;
}

.ps-purchase #propersoft_price_table .card-body > a.btn,
.ps-purchase #propersoft_price_table .card-body > a.paddle_button {
  border-radius: var(--ps-button-radius);
  box-shadow: none;
  outline: 0;
}

.ps-purchase #propersoft_price_table .card-footer {
  background: var(--ps-wash);
  border-color: var(--ps-line);
  color: var(--ps-copy);
  padding: 1.2rem 1.4rem;
}

.ps-purchase #propersoft_price_table .card-footer ul {
  margin-bottom: 0;
  padding-left: 1.15rem;
}

/* Downloads page */

.ps-download main.container {
  max-width: 940px;
}

.ps-download main > .row.white {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: -1rem 0 2.5rem;
}

.ps-download main > .row.white > div {
  background: #fff;
  border: 1px solid var(--ps-line);
  border-radius: .9rem;
  box-shadow: 0 16px 40px rgba(16, 36, 26, .06);
  padding: 1.4rem;
  width: auto;
}

.ps-download main > .row.white .btn {
  background: var(--ps-ink);
  border-color: var(--ps-ink);
  color: #fff;
  margin: 0 0 .8rem;
  min-width: 190px;
}

.ps-download main > .row.white > div:last-child .btn {
  background: var(--ps-green);
  border-color: var(--ps-green);
}

.ps-download main > p,
.ps-download main > ul,
.ps-download main > h2,
.ps-download main > h3,
.ps-download main > h4 {
  margin-left: auto;
  margin-right: auto;
  max-width: 780px;
}

.ps-download main > ul {
  background: #fff;
  border: 1px solid var(--ps-line);
  border-radius: .75rem;
  padding: 1.1rem 1.3rem 1.1rem 2.6rem;
}

.ps-download main > ul li + li {
  margin-top: .45rem;
}

/* Customer area */

.ps-customer main.container {
  max-width: 900px;
}

.ps-customer main > .ps-page-summary {
  color: var(--ps-muted);
  display: block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  margin: -3rem auto 3.5rem;
  text-align: center;
}

.ps-customer main form.row {
  align-items: center;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--ps-line);
  border-radius: .85rem;
  box-shadow: 0 14px 35px rgba(16, 36, 26, .05);
  display: flex;
  gap: .75rem;
  margin: 0 0 1.5rem;
  padding: 1.15rem;
}

.ps-customer main form.row > div {
  flex: 1 1 280px;
  padding: 0;
  width: auto;
}

.ps-customer main form.row > .col-auto {
  flex: 0 1 auto;
}

.ps-customer main .form-control {
  border-color: #bfcac2;
  border-radius: .5rem;
  min-height: 46px;
  padding: .65rem .8rem;
}

.ps-customer main .form-control:focus {
  border-color: var(--ps-green);
  box-shadow: 0 0 0 .2rem rgba(35, 122, 75, .15);
}

.ps-customer main .alert {
  border-radius: .7rem;
}

.ps-customer main .alert-warning {
  background: #fff7df;
  border-color: #e7d199;
  color: #684600;
}

.ps-customer main .alert-success {
  background: var(--ps-green-soft);
  border-color: #b8dac3;
  color: var(--ps-green-dark);
}

.ps-customer main table {
  background: #fff;
  border: 1px solid var(--ps-line);
  border-radius: .65rem;
  max-width: 100%;
  width: 100%;
}

.ps-customer main th,
.ps-customer main td {
  border-bottom: 1px solid #e3e8e4;
  padding: .65rem .75rem;
}

.ps-customer main code,
.ps-customer main .copy-text {
  color: var(--ps-green-dark);
  overflow-wrap: anywhere;
}

.ps-customer main .billing-btn {
  background: var(--ps-ink);
  border: 1px solid var(--ps-ink);
  color: #fff;
  margin: .35rem 0;
}

/* About page */

.ps-about main.container {
  max-width: 920px;
}

.ps-about .about-content {
  font-size: 1.05rem;
}

.ps-about .about-intro {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 5vw, 3rem);
  grid-template-columns: 200px minmax(0, 1fr);
}

.ps-about .about-intro > img {
  border-radius: 50%;
  height: 200px;
  margin: 0;
  object-fit: cover;
  width: 200px;
}

.ps-about .about-kicker {
  color: var(--ps-green);
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .11em;
  margin-bottom: .5rem;
  text-transform: uppercase;
}

.ps-about .about-intro h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 1rem;
}

.ps-about .about-section {
  border-top: 1px solid var(--ps-line);
  margin-top: 3.5rem;
  padding-top: 2.5rem;
}

.ps-about .about-section h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  margin: 0 0 .75rem;
}

.ps-about .about-contact {
  background: var(--ps-ink);
  border-radius: 1rem;
  color: #fff;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 4rem;
  padding: clamp(1.5rem, 5vw, 2.5rem);
}

.ps-about .about-contact h2,
.ps-about .about-contact p,
.ps-about .about-contact a {
  color: #fff !important;
}

/* The kicker keeps the brand green on paper, but on the dark contact panel that green
   lands at 3.06:1 against #10241a, under the 4.5:1 minimum for text this size. The bright
   tint is the same hue read against a dark ground. */
.ps-about .about-contact .about-kicker {
  color: #70d99a;
}

.ps-about .about-contact h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin: 0;
}

.ps-about .about-contact__details p {
  margin: 0 0 1rem;
}

.ps-about .about-contact__details small {
  color: #b9c8bf;
  display: block;
}

/* How-to hub and articles */

.ps-howto main.container {
  max-width: 900px;
}

.ps-howto main > sup {
  color: var(--ps-muted);
  display: block;
  margin: -2.5rem auto 3rem;
  text-align: center;
}

.ps-howto main img {
  border-radius: .7rem;
  height: auto;
}

.ps-howto-hub main.container {
  max-width: 1060px;
  padding-top: clamp(3rem, 5vw, 4.5rem);
}

.ps-howto-hub main > h1 {
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  margin-bottom: 2.25rem;
}

.ps-howto-hub .hub-search-wrap {
  margin: 0 auto 3.5rem;
  max-width: 700px;
}

.ps-howto-hub .hub-search .input-group {
  background: #fff;
  border: 1px solid var(--ps-line);
  border-radius: .75rem;
  box-shadow: 0 14px 35px rgba(16, 36, 26, .07);
  overflow: hidden;
  padding: .35rem;
}

.ps-howto-hub .hub-search .form-control {
  border: 0;
  box-shadow: none;
  min-width: 0;
}

.ps-howto-hub .hub-search-results {
  border-color: var(--ps-line);
  border-radius: .65rem;
  box-shadow: 0 18px 45px rgba(16, 36, 26, .12);
  margin-top: .45rem;
}

.ps-howto-hub main > h2 {
  border-top: 1px solid var(--ps-line);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin: 3.5rem 0 1rem;
  padding-top: 2.25rem;
}

.ps-howto-hub main > ul {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.ps-howto-hub main > ul > li {
  margin: 0;
}

body.ps-modern.ps-howto-hub main > ul > li > a:not(.btn):not(.nav-link) {
  align-items: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--ps-line);
  border-radius: .65rem;
  color: var(--ps-ink);
  display: flex;
  font-size: .9rem;
  font-weight: 650;
  height: 100%;
  min-height: 58px;
  padding: .75rem 1rem;
  text-decoration: none;
}

.ps-howto-hub main > ul > li > a::after {
  color: var(--ps-green);
  content: "→";
  margin-left: auto;
  padding-left: .8rem;
}

.ps-howto-hub main > ul > li > a:hover {
  border-color: #9fc8ad;
  box-shadow: 0 8px 20px rgba(16, 36, 26, .06);
}

/* Match the shared support widget to the ProperSoft design system. */
#psSupportBtn {
  background: var(--ps-ink);
  border-radius: var(--ps-button-radius);
  font-family: var(--ps-font-sans);
}

#psSupportBtn:hover { background: #1c3328; }
#psSupportModal .ps-tab { color: var(--ps-muted); }
#psSupportModal .ps-tab.ps-active {
  border-bottom-color: var(--ps-ink);
  color: var(--ps-ink);
  font-weight: 800;
}
#psSupportModal .ps-a-title {
  color: var(--ps-ink);
  font-weight: 650;
}
#psSupportModal .ps-answers-cta a,
#psSupportModal .ps-search-btn { color: var(--ps-ink); }
#psSupportModal .ps-search-btn:hover { color: var(--ps-green); }
#psSupportModal .ps-submit {
  background: var(--ps-ink);
  border-radius: var(--ps-button-radius);
}
#psSupportModal .ps-submit:hover { background: #1c3328; }

@media (max-width: 760px) {
  .ps-modern main.container {
    padding-bottom: 3.5rem;
    padding-top: 3.5rem;
  }

  .ps-modern main > h1 {
    font-size: clamp(2.55rem, 12vw, 3.6rem);
  }

  .ps-modern .navbar > .container-fluid {
    row-gap: .35rem;
  }

  .ps-modern .navbar-collapse {
    flex-basis: 100%;
    text-align: center;
  }

  .ps-modern .navbar-nav {
    align-items: center;
  }

  .ps-download main > .row.white {
    grid-template-columns: 1fr;
  }

  .ps-customer main form.row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ps-customer main form.row > div,
  .ps-customer main form.row > .col-auto,
  .ps-customer main form.row input[type="submit"] {
    width: 100%;
  }

  .ps-howto-hub main > ul {
    grid-template-columns: 1fr;
  }

  .ps-about .about-intro,
  .ps-about .about-contact {
    grid-template-columns: 1fr;
  }

  .ps-about .about-intro {
    text-align: center;
  }

  .ps-about .about-intro > img {
    margin: 0 auto;
  }
}


/* ProperSoft homepage */
:root {
  --pc-ink: #10241a;
  --pc-muted: #526158;
  --pc-line: #d6ded8;
  --pc-paper: #fbfcf9;
  --pc-wash: #f0f5ee;
  --pc-green: #237a4b;
  --pc-green-bright: #70d99a;
  --pc-yellow: #e9b949;

  /* One type scale for the whole homepage. The page had grown 31 distinct font sizes,
     sixteen of them on the first screen alone — .59, .6, .61, .63, .65, .66, .67, .68,
     .7, .72 and .75rem were all in use, differences no reader can perceive but which
     together read as drift rather than as a system. Everything below now snaps to one of
     these nine steps, so a size is a decision instead of an accident. */
  --pc-text-display: clamp(2.1rem, 5vw, 3.4rem);
  --pc-text-xl: clamp(1.9rem, 2.6vw, 2.6rem);
  --pc-text-lg: clamp(1.5rem, 2.4vw, 1.95rem);
  --pc-text-md: 1.35rem;
  --pc-text-lead: clamp(1.05rem, 1.4vw, 1.25rem);
  --pc-text-base: 1rem;
  --pc-text-sm: .86rem;
  --pc-text-xs: .72rem;
  --pc-text-2xs: .64rem;

  /* Three corner radii, down from eleven. The pill stays for buttons and 50% stays for
     dots and avatars — those are shapes, not steps on a scale. */
  --pc-radius-sm: .5rem;
  --pc-radius-md: .85rem;
  --pc-radius-lg: 1rem;

  --pc-button-radius: 999px;
  --pc-gutter: 1.25rem;
  --pc-section-sm: 2rem;
  --pc-section-md: 4rem;
  --pc-section-lg: 6rem;
}

.ps-home {
  background: var(--pc-paper);
  color: var(--pc-ink);
  font-family: var(--ps-font-sans);
}

.ps-home > .container:first-of-type {
  max-width: 1200px;
}

.ps-home .navbar {
  background: transparent !important;
  border-bottom: 1px solid var(--pc-line);
  padding: .7rem 0;
}

.ps-home .navbar > .container-fluid {
  justify-content: center;
}

.ps-home .navbar-collapse {
  flex-grow: 0;
}

.ps-home .navbar-nav {
  margin-right: 0 !important;
}

/* Support and Customer inherited the template's 14pt body size, which made them 36%
   larger than the pill buttons sitting beside them in the same bar — the last off-scale
   type on the first screen. */
.ps-home .navbar .nav-link {
  font-size: var(--pc-text-sm);
  font-weight: 550;
}

.ps-home .navbar .btn {
  border-radius: var(--pc-button-radius);
  font-size: var(--pc-text-sm);
  font-weight: 650;
  margin: .2rem .3rem;
  padding: .55rem 1rem;
}

.ps-home .navbar .btn-outline-success {
  border-color: var(--pc-green);
  color: var(--pc-green);
}

.ps-home .navbar .btn-outline-primary {
  background: var(--pc-ink);
  border-color: var(--pc-ink);
  color: #fff;
}

/* The header is the first thing on every page and it was wrapping onto two rows on a
   phone, with a square-cornered Bootstrap hamburger sitting beside pill buttons — two
   corner systems inside one component. Below 760px the header becomes a single row and
   the toggler adopts the same pill geometry as the buttons it sits next to. Every
   control is held at 44px so it is a real tap target. */
@media (max-width: 760px) {
  .ps-home .navbar > .container-fluid,
  .ps-modern .navbar > .container-fluid {
    align-items: center;
    column-gap: .4rem;
    flex-wrap: nowrap;
    justify-content: space-between;
    row-gap: 0;
  }

  .ps-home .navbar-brand,
  .ps-modern .navbar-brand {
    flex: 0 1 auto;
    margin-right: auto;
    min-width: 0;
  }

  .ps-home .navbar-brand > img,
  .ps-modern .navbar-brand > img {
    height: 1.5em !important;
    max-width: 100%;
  }

  .ps-home .navbar .btn,
  .ps-modern .navbar .btn {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--pc-text-xs);
    justify-content: center;
    margin: 0;
    min-height: 44px;
    padding: .5rem .75rem;
    white-space: nowrap;
  }

  .ps-home .navbar-toggler,
  .ps-modern .navbar-toggler {
    align-items: center;
    border-color: var(--ps-line);
    border-radius: var(--ps-button-radius);
    display: inline-flex;
    flex: 0 0 auto;
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 44px;
  }

  .ps-home .navbar-toggler:focus,
  .ps-modern .navbar-toggler:focus {
    box-shadow: none;
    outline: 2px solid var(--ps-ink);
    outline-offset: 2px;
  }

  .ps-home .navbar-toggler-icon,
  .ps-modern .navbar-toggler-icon {
    height: 1.1em;
    width: 1.1em;
  }
}

/* No green wash behind the hero. Accounting-software green is where QuickBooks, Sage and
   Xero already live, so spending it on decoration reads as the category default rather
   than as a chosen accent. The green now only carries meaning — the "out" side of the
   ledger, the converted amount, the active step — against a neutral paper ground. */
.pc-hero {
  background: linear-gradient(180deg, #fbfcf9 0%, #f6f8f4 100%);
  border-bottom: 1px solid var(--pc-line);
  overflow: hidden;
  padding: var(--pc-section-md) var(--pc-gutter) 1.75rem;
}

.pc-hero__shell {
  align-items: center;
  column-gap: clamp(2rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: minmax(390px, .38fr) minmax(0, .62fr);
  margin: 0 auto;
  max-width: 1320px;
}

.pc-hero__intro {
  min-width: 0;
  position: relative;
  z-index: 1;
}

/* The first screen holds two objects, and only one of them may lead. The ledger is the
   torn sheet lying on the desk: it keeps a single soft ambient shadow so it reads as
   paper resting on a surface. The app window below carries the deep elevation, so
   importance is ranked by height off the page rather than by size. Giving both a big
   floating shadow made them read as co-equal and the eye had nowhere to land. */
.pc-ledger {
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 36, 26, .07);
  padding: 1.35rem 1.45rem 1.5rem 1.8rem;
}

.pc-ledger::before {
  background: #f8faf6;
  clip-path: polygon(0 0, 10px 0, 6px 3%, 12px 6%, 5px 10%, 11px 14%, 4px 18%, 10px 22%, 5px 26%, 12px 30%, 6px 34%, 11px 38%, 5px 42%, 12px 46%, 6px 50%, 11px 54%, 4px 58%, 10px 62%, 5px 66%, 12px 70%, 6px 74%, 11px 78%, 5px 82%, 12px 86%, 6px 90%, 11px 94%, 5px 97%, 10px 100%, 0 100%);
  content: "";
  inset: 0 auto 0 0;
  pointer-events: none;
  position: absolute;
  width: 13px;
}

.pc-ledger__heading,
.pc-ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.1rem 4.1rem;
}

.pc-ledger__heading {
  color: #53635a;
  font: 750 var(--pc-text-2xs)/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pc-ledger__heading > span {
  align-items: center;
  display: flex;
  min-height: 2.2rem;
}

.pc-ledger__heading > span:not(:first-child) {
  border-left: 1px solid #cbd4cd;
  justify-content: center;
}

.pc-visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.pc-hero h1 {
  color: var(--pc-ink);
  font-family: var(--ps-font-sans);
  font-size: var(--pc-text-xl);
  font-weight: 550;
  letter-spacing: -.045em;
  line-height: .98;
  margin: 0;
  max-width: none;
}

.pc-ledger__row {
  border-top: 1px solid #cbd4cd;
}

.pc-ledger__row:last-child {
  border-bottom: 1px solid #cbd4cd;
}

.pc-ledger__description {
  align-items: center;
  display: flex;
  min-height: 5.25rem;
  padding: .75rem .8rem .75rem 0;
}

.pc-ledger__row--output .pc-ledger__description {
  color: var(--pc-green);
  min-height: 6.2rem;
}

.pc-ledger__format {
  align-items: center;
  border-left: 1px solid #cbd4cd;
  color: #263b48;
  display: flex;
  font: 750 var(--pc-text-xs)/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  justify-content: center;
  letter-spacing: .07em;
}

.pc-ledger__format--in {
  color: #365f78;
  flex-direction: column;
  gap: .7rem;
}

.pc-ledger__format--out {
  color: var(--pc-green);
  flex-direction: column;
  gap: .7rem;
}

.pc-ledger__format--in b,
.pc-ledger__format--out b {
  font: inherit;
}

.pc-hero__intro > p {
  color: #314239;
  font-size: var(--pc-text-lead);
  line-height: 1.6;
  margin: 1.35rem 0 0;
  max-width: 35rem;
}

.pc-private-word {
  color: var(--pc-green);
  font-family: var(--ps-font-sans);
  font-weight: 800;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.pc-private-word span {
  color: #526158;
  font: 700 .58em/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .025em;
}

.pc-hero__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.8rem;
}

/* Price and stamp share one flow row. The stamp used to be absolutely positioned over the
   card corner, where it sat on top of the Pricing button by 58px at 1440 and covered the
   price line outright at 390 — a rotated element in a 480px column has nowhere to go that
   is not already occupied. In flow it can never collide, at any width or copy length. */
.pc-hero__assurance {
  align-items: center;
  column-gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  margin-top: .85rem;
  row-gap: .75rem;
}

.pc-hero__intro > .pc-hero__assurance > .pc-hero__price {
  color: #526158;
  font-size: var(--pc-text-xs);
  line-height: 1.4;
  margin: 0;
  max-width: none;
}

.pc-hero__price strong {
  color: var(--pc-ink);
  font-weight: 750;
}

/* The stamp was the only red on the page — a fourth colour family belonging to no other
   element, which reads as an imported badge rather than as part of the design. It is
   inked instead. What makes a stamp stand out is its form, not its hue: the rotation, the
   double rule, the monospace caps and the worn mask all survive, and near-black is the
   highest-contrast mark available on paper. Real accounting stamps are black anyway. */
.stamp {
  background-color: rgba(16, 36, 26, .035);
  border: 3px double var(--pc-ink);
  border-radius: var(--pc-radius-md);
  color: var(--pc-ink);
  display: inline-block;
  flex: 0 0 auto;
  font-family: "Courier New", Courier, monospace;
  font-weight: 900;
  letter-spacing: 1px;
  mask-image: radial-gradient(circle, #fff 85%, rgba(255, 255, 255, .6) 100%);
  margin-left: auto;
  padding: 6px 12px;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-4deg);
  -webkit-mask-image: radial-gradient(circle, #fff 85%, rgba(255, 255, 255, .6) 100%);
}

.stamp span,
.stamp .line-2 {
  display: block;
}

.stamp .line-1 {
  border-bottom: 2px solid var(--pc-ink);
  font-size: var(--pc-text-2xs);
  margin-bottom: 4px;
  padding-bottom: 4px;
}

.stamp .line-2 {
  color: var(--pc-ink);
  font-size: var(--pc-text-base);
}

.stamp .line-2:hover { color: var(--pc-green); }

.stamp .line-2 span {
  display: inline;
  letter-spacing: 0;
}

.pc-button {
  border: 1px solid var(--pc-ink);
  border-radius: var(--pc-button-radius);
  display: inline-flex;
  font-size: var(--pc-text-base);
  font-weight: 700;
  justify-content: center;
  min-width: 168px;
  padding: .85rem 1.2rem;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.pc-button:hover {
  transform: translateY(-2px);
}

.pc-button--primary,
.pc-button--primary:hover {
  background: var(--pc-ink);
  color: #fff;
}

.pc-button--secondary {
  background: transparent;
  color: var(--pc-ink);
}

.pc-button--secondary:hover {
  background: #e8eee8;
  color: var(--pc-ink);
}

.pc-workflow {
  background: #fdfefc;
  border: 1px solid #bdc9c0;
  border-radius: var(--pc-radius-lg);
  box-shadow:
    0 48px 96px -24px rgba(16, 36, 26, .22),
    0 16px 36px -12px rgba(16, 36, 26, .12),
    0 2px 6px rgba(16, 36, 26, .05);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  transform: translateX(clamp(0px, 2vw, 28px));
  width: 100%;
}

.pc-workflow__bar {
  align-items: center;
  background: #f0f3ef;
  border-bottom: 1px solid var(--pc-line);
  color: #526158;
  display: grid;
  font-size: var(--pc-text-xs);
  grid-template-columns: 1fr auto 1fr;
  min-height: 42px;
  padding: 0 1rem;
}

.pc-workflow__traffic {
  display: flex;
  gap: .38rem;
}

.pc-workflow__traffic i {
  background: #c6cec8;
  border-radius: 50%;
  display: block;
  height: .55rem;
  width: .55rem;
}

.pc-workflow__traffic i:first-child { background: #dd7a6c; }
.pc-workflow__traffic i:nth-child(2) { background: #e3bc59; }
.pc-workflow__traffic i:last-child { background: #75b685; }
.pc-workflow__title {
  grid-column: 2;
  justify-self: center;
}

/* The common/default treatment is Windows. The hero script switches this to macOS
   traffic lights for Apple devices; CSS has no reliable operating-system query. */
.pc-workflow:not([data-window-platform="mac"]) .pc-workflow__traffic {
  align-self: stretch;
  gap: 0;
  grid-column: 3;
  justify-self: end;
}

.pc-workflow:not([data-window-platform="mac"]) .pc-workflow__traffic i {
  align-items: center;
  background: transparent;
  border-radius: 0;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 2rem;
}

.pc-workflow:not([data-window-platform="mac"]) .pc-workflow__traffic i:first-child::before {
  background: #526158;
  content: "";
  height: 1px;
  width: 9px;
}

.pc-workflow:not([data-window-platform="mac"]) .pc-workflow__traffic i:nth-child(2)::before {
  border: 1px solid #526158;
  box-sizing: border-box;
  content: "";
  height: 8px;
  width: 8px;
}

.pc-workflow:not([data-window-platform="mac"]) .pc-workflow__traffic i:last-child::before {
  color: #526158;
  content: "\00d7";
  font: 400 var(--pc-text-base)/1 var(--ps-font-sans);
}

.pc-workflow:not([data-window-platform="mac"]) .pc-workflow__title {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.pc-workflow__tabs {
  background: #fff;
  border-bottom: 1px solid var(--pc-line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 1.4rem;
}

.pc-workflow__tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #526158;
  cursor: pointer;
  font: 650 var(--pc-text-base)/1.2 var(--ps-font-sans);
  margin: 0;
  padding: 1.2rem .75rem 1rem;
  position: relative;
}

.pc-workflow__tab span {
  color: #66736b;
  font-size: var(--pc-text-2xs);
  margin-right: .3rem;
}

.pc-workflow__tab.is-active {
  border-bottom-color: var(--pc-green);
  color: var(--pc-green);
}

.pc-workflow__tab.is-active span { color: var(--pc-green); }
.pc-workflow__tab:focus-visible { outline: 2px solid var(--pc-green); outline-offset: -4px; }

.pc-workflow__stage {
  background-color: var(--pc-wash);
  background-image:
    linear-gradient(rgba(35, 122, 75, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 122, 75, .045) 1px, transparent 1px);
  background-size: 32px 32px;
  height: 430px;
  padding: var(--pc-section-sm);
}

.pc-workflow__panel {
  min-height: 350px;
}

.pc-workflow__panel[hidden] { display: none; }

.pc-workflow__panel.is-active {
  animation: pc-panel-in .28s ease-out both;
}

@keyframes pc-panel-in {
  from { transform: translateY(5px); }
  to { transform: translateY(0); }
}

.pc-panel-heading {
  align-items: flex-start;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
}

.pc-kicker {
  color: var(--pc-green);
  display: block;
  font-size: var(--pc-text-xs);
  font-weight: 800;
  letter-spacing: .11em;
  margin-bottom: .35rem;
  text-transform: uppercase;
}

.pc-panel-heading h2 {
  color: var(--pc-ink);
  font-family: var(--ps-font-sans);
  font-size: var(--pc-text-lg);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 0;
}

.pc-panel-heading p {
  color: #526158;
  font-size: var(--pc-text-xs);
  margin: .45rem 0 0;
}

.pc-stage-meta {
  color: #34463b;
  flex: 0 0 auto;
  font-size: var(--pc-text-xs);
  font-weight: 700;
  padding-top: .25rem;
}

.pc-stage-meta i {
  background: var(--pc-green-bright);
  border-radius: 50%;
  display: inline-block;
  height: .45rem;
  margin-right: .3rem;
  width: .45rem;
}

.pc-stage-meta strong { color: var(--pc-green); }

.pc-file-list {
  display: grid;
  gap: .65rem;
  margin-top: 1.4rem;
}

.pc-file-row {
  align-items: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-md);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 72px;
  padding: .75rem .9rem;
}

/* Format colour lives on the icon chip only, not on the row border as well. Carrying the
   same hue twice per row put four extra colours into the hero for no added meaning. */
.pc-file-row--pdf,
.pc-file-row--csv,
.pc-file-row--qif { border-color: var(--pc-line); }

.pc-file-row.is-story-file {
  border-color: var(--pc-green);
  box-shadow: inset 3px 0 0 var(--pc-green);
  grid-template-columns: auto minmax(130px, .7fr) minmax(260px, 1.3fr);
  min-height: 112px;
}

.pc-file-icon {
  align-items: center;
  background: #eef2ef;
  border-radius: var(--pc-radius-sm);
  color: var(--pc-ink);
  display: flex;
  font-size: var(--pc-text-2xs);
  font-weight: 850;
  height: 2.9rem;
  justify-content: center;
  letter-spacing: .03em;
  margin-right: .9rem;
  width: 2.9rem;
}

.pc-file-row--pdf .pc-file-icon { background: #fff0ed; color: #9a392d; }
.pc-file-row--csv .pc-file-icon { background: #e9f7ec; color: #17643c; }
.pc-file-row--qif .pc-file-icon { background: #fff8df; color: #705900; }

.pc-file-details {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.pc-file-details strong {
  color: var(--pc-ink);
  font-size: var(--pc-text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-file-details small {
  color: #5e6c63;
  font-size: var(--pc-text-xs);
  margin-top: .15rem;
}

.pc-source-preview {
  background: #f2f4f1;
  border: 1px solid #d9e0da;
  border-radius: var(--pc-radius-sm);
  display: grid;
  gap: .22rem;
  min-width: 0;
  padding: .55rem .65rem;
}

.pc-source-preview code {
  color: #415149;
  display: block;
  font: 650 var(--pc-text-2xs)/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .015em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-file-type {
  color: #526158;
  font-size: var(--pc-text-xs);
  font-weight: 750;
  margin-left: 1rem;
}

.pc-table-wrap {
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-md);
  margin-top: 1.8rem;
  overflow: hidden;
}

.pc-table-wrap table { border-collapse: collapse; font-size: var(--pc-text-sm); width: 100%; }
.pc-table-wrap th { color: #526158; font-size: var(--pc-text-2xs); letter-spacing: .08em; text-transform: uppercase; }
.pc-table-wrap th,
.pc-table-wrap td { border-bottom: 1px solid #e0e6e1; padding: .8rem 1rem; text-align: left; }
.pc-table-wrap tr:last-child td { border-bottom: 0; }
.pc-table-wrap th:last-child,
.pc-table-wrap td:last-child { text-align: right; }
.pc-date { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-amount { font-variant-numeric: tabular-nums; font-weight: 700; }
.pc-amount--in { color: var(--pc-green); }

.pc-convert-path {
  align-items: center;
  display: grid;
  gap: clamp(1rem, 3vw, 2.2rem);
  grid-template-columns: 1fr auto 1.4fr;
  margin-top: 3rem;
}

.pc-ledger-card {
  background: var(--pc-ink);
  border-radius: var(--pc-radius-md);
  color: #fff;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  padding: 1.2rem;
}

.pc-ledger-card small { color: #aebdb4; }
.pc-ledger-card strong { font-family: var(--ps-font-sans); font-size: var(--pc-text-md); font-weight: 600; margin-top: auto; }
.pc-ledger-card span { color: var(--pc-green-bright); font-size: var(--pc-text-xs); }

.pc-convert-arrow { color: var(--pc-green); font-size: var(--pc-text-xs); font-weight: 800; text-align: center; }
.pc-convert-arrow i { background: var(--pc-green); display: block; height: 1px; margin-bottom: .35rem; position: relative; width: 50px; }
.pc-convert-arrow i::after { border-right: 1px solid var(--pc-green); border-top: 1px solid var(--pc-green); content: ""; height: 8px; position: absolute; right: 0; top: -4px; transform: rotate(45deg); width: 8px; }

.pc-output-grid { display: grid; gap: .65rem; grid-template-columns: repeat(2, 1fr); }
.pc-output-grid span {
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-md);
  display: flex;
  flex-direction: column;
  min-height: 76px;
  padding: .85rem;
}
.pc-output-grid b { color: var(--pc-green); font-size: var(--pc-text-base); }
.pc-output-grid small { color: #526158; font-size: var(--pc-text-2xs); margin-top: auto; }

.pc-import { position: relative; }

.pc-app-grid {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 2.6rem;
}

.pc-app-grid > div {
  align-items: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-md);
  display: flex;
  flex-direction: column;
  min-height: 155px;
  padding: 1rem .5rem;
  text-align: center;
}

.pc-app-icon {
  align-items: center;
  border-radius: var(--pc-radius-sm);
  color: #fff;
  display: flex;
  font-size: var(--pc-text-base);
  font-weight: 800;
  height: 2.75rem;
  justify-content: center;
  margin-bottom: auto;
  width: 2.75rem;
}

.pc-app-icon--excel { background: #217346; }
.pc-app-logo {
  display: block;
  height: 48px;
  margin: 0 0 auto;
  object-fit: contain;
  width: 120px;
}
.pc-app-grid strong { font-size: var(--pc-text-sm); margin-top: .75rem; }
.pc-app-grid small { color: #526158; font-size: var(--pc-text-2xs); margin-top: .15rem; }

.pc-import .pc-app-grid { opacity: .42; }

.pc-import-success {
  background: #fff;
  border: 1px solid #8ca198;
  border-radius: var(--pc-radius-sm);
  box-shadow: 0 18px 45px rgba(16, 36, 26, .2), 0 3px 10px rgba(16, 36, 26, .1);
  left: 50%;
  max-width: calc(100% - 2rem);
  overflow: hidden;
  padding-bottom: .75rem;
  position: absolute;
  top: 185px;
  transform: translateX(-50%);
  width: 350px;
  z-index: 2;
}

.pc-import-success__bar {
  background: #183b2c;
  color: #fff;
  font-size: var(--pc-text-2xs);
  font-weight: 700;
  letter-spacing: .025em;
  padding: .48rem .7rem;
}

.pc-import-success__body {
  align-items: center;
  display: flex;
  gap: .75rem;
  padding: 1rem 1rem .7rem;
}

.pc-import-success__body > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pc-import-success__body strong {
  color: var(--pc-ink);
  font-size: var(--pc-text-sm);
}

.pc-import-success__body small {
  color: #526158;
  font-size: var(--pc-text-2xs);
  margin-top: .2rem;
}

.pc-import-success__icon {
  align-items: center;
  background: var(--pc-green);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex: 0 0 auto;
  font-size: var(--pc-text-base);
  font-weight: 850;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.pc-import-success__ok {
  background: #edf4ee;
  border: 1px solid #9db1a3;
  border-radius: var(--pc-radius-sm);
  color: var(--pc-ink);
  display: block;
  font-size: var(--pc-text-2xs);
  font-weight: 800;
  margin: 0 auto;
  padding: .28rem .9rem;
  text-align: center;
  width: max-content;
}

.pc-conversion-finder {
  background: #fff;
  border-bottom: 1px solid var(--pc-line);
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--pc-gutter);
}

.pc-conversion-finder__shell {
  margin: 0 auto;
  max-width: 1180px;
}

.pc-conversion-finder__prompt {
  align-items: center;
  color: var(--pc-ink);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--ps-font-sans);
  font-size: var(--pc-text-lg);
  font-weight: 550;
  gap: .45em .3em;
  letter-spacing: -.035em;
  line-height: 1.2;
}

.pc-conversion-finder select {
  appearance: none;
  background-color: var(--pc-wash);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--pc-ink) 50%),
    linear-gradient(135deg, var(--pc-ink) 50%, transparent 50%);
  background-position:
    calc(100% - 1.05rem) calc(50% - .12rem),
    calc(100% - .72rem) calc(50% - .12rem);
  background-repeat: no-repeat;
  background-size: .36rem .36rem, .36rem .36rem;
  border: 1px solid #aebdb4;
  border-radius: var(--pc-button-radius);
  color: var(--pc-green);
  cursor: pointer;
  font: 700 var(--pc-text-lead)/1.2 var(--ps-font-sans);
  letter-spacing: -.015em;
  max-width: 100%;
  padding: .62em 2.2em .62em .85em;
}

.pc-conversion-finder select:hover {
  border-color: var(--pc-green);
}

.pc-conversion-finder select:focus-visible {
  border-color: var(--pc-green);
  box-shadow: 0 0 0 .22rem rgba(22, 107, 62, .16);
  outline: none;
}

.pc-conversion-finder__result {
  border-left: 3px solid var(--pc-green-bright);
  color: #526158;
  font-size: var(--pc-text-lead);
  line-height: 1.55;
  margin: 1.7rem 0 0;
  max-width: 62rem;
  padding: .2rem 0 .2rem 1rem;
}

.pc-conversion-finder__result strong {
  color: var(--pc-ink);
  font-weight: 750;
}

.home-content {
  color: #2c3d33;
  font-size: var(--pc-text-lead);
  line-height: 1.68;
  margin: 0 auto;
  max-width: 820px;
  padding: 3rem var(--pc-gutter) var(--pc-section-lg);
}

.home-content h2,
.home-content h3,
.home-content h4 {
  color: var(--pc-ink);
  font-family: var(--ps-font-sans);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.home-content h2 { font-size: var(--pc-text-display); margin: 5rem 0 1.25rem; }
.home-content h3 { font-size: var(--pc-text-lg); margin-top: 3rem; }
.home-content p,
.home-content li { max-width: 72ch; }
.home-content li { margin-bottom: .45rem; }
.home-content a { color: #17643c; text-decoration: underline; text-decoration-color: #9ac8ab; text-underline-offset: .15em; }
.home-content hr { border-color: var(--pc-line); margin: 4rem 0; opacity: 1; }

.home-guide-links {
  border-bottom: 1px solid var(--pc-line);
  border-top: 1px solid var(--pc-line);
  margin: 3rem 0 0;
  padding: .5rem 0 1.5rem;
}

.home-guide-links h3 {
  font-size: var(--pc-text-md);
  margin: 1rem 0;
}

.home-guide-links ul {
  display: grid;
  gap: .65rem 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-guide-links li {
  margin: 0;
}

.home-guide-links a {
  display: inline-block;
  font-size: var(--pc-text-base);
}

.home-about {
  align-items: center;
  background: var(--pc-wash);
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-lg);
  display: grid;
  gap: 1.4rem;
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: 5rem;
  padding: var(--pc-section-sm);
}

.home-about > img {
  border-radius: 50%;
  height: 128px;
  margin: 0;
  object-fit: cover;
  width: 128px;
}

.home-about h2 {
  font-size: var(--pc-text-lg);
  margin: .1rem 0 .55rem;
}

.home-about p {
  margin: 0 0 .75rem;
}

.home-about__link {
  color: var(--pc-ink) !important;
  font-size: var(--pc-text-sm);
  font-weight: 750;
}

.ps-home footer .row {
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.ps-home footer .row > div {
  max-width: 720px;
  width: 100%;
}

.ps-home footer .nav {
  align-items: center;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  justify-content: center;
}

.ps-home footer .nav-item {
  margin-bottom: 0 !important;
}

.ps-home footer .row .btn {
  display: inline-flex;
}

.ps-home footer .btn {
  border-radius: var(--pc-button-radius);
  font-size: var(--pc-text-sm);
  font-weight: 700;
  margin: .25rem;
  padding: .65rem 1rem;
}

.ps-home footer .btn-success {
  background: transparent;
  border-color: var(--pc-green);
  color: var(--pc-green);
}

.ps-home footer .btn-success:hover {
  background: var(--pc-green);
  color: #fff;
}

.ps-home footer .btn-primary,
.ps-home footer .btn-primary:hover {
  background: var(--pc-ink);
  border-color: var(--pc-ink);
  color: #fff;
}

/* Match the shared support widget to the ProperSoft design system. */
#psSupportBtn {
  background: var(--pc-ink);
  border-radius: var(--pc-button-radius);
  font-family: var(--ps-font-sans);
}

#psSupportBtn:hover { background: #1c3328; }
#psSupportModal .ps-tab { color: #526158; }
#psSupportModal .ps-tab.ps-active {
  border-bottom-color: var(--pc-ink);
  color: var(--pc-ink);
  font-weight: 800;
}
#psSupportModal .ps-a-title {
  color: var(--pc-ink);
  font-weight: 650;
}
#psSupportModal .ps-answers-cta a,
#psSupportModal .ps-search-btn { color: var(--pc-ink); }
#psSupportModal .ps-search-btn:hover { color: var(--pc-green); }
#psSupportModal .ps-submit {
  background: var(--pc-ink);
  border-radius: var(--pc-button-radius);
}
#psSupportModal .ps-submit:hover { background: #1c3328; }

.ps-home footer .d-flex {
  align-items: center;
  justify-content: center !important;
  text-align: center;
}

@media (max-width: 760px) {
  .pc-hero { padding-left: var(--pc-gutter); padding-right: var(--pc-gutter); }
  .pc-ledger { padding: 1.1rem 1rem 1.25rem 1.5rem; }
  .pc-ledger__heading,
  .pc-ledger__row { grid-template-columns: minmax(0, 1fr) 3.4rem 3.4rem; }
  .pc-ledger__description { min-height: 4.5rem; }
  .pc-ledger__row--output .pc-ledger__description { min-height: 5.3rem; }
  .pc-ledger__format { font-size: var(--pc-text-xs); }
  .pc-workflow__tabs { padding: 0 .25rem; }
  .pc-workflow__tab { font-size: var(--pc-text-xs); padding: .9rem .2rem .75rem; }
  .pc-workflow__tab span { display: block; margin: 0 0 .15rem; }
  .pc-workflow__stage { height: 550px; }
  .pc-workflow__panel { min-height: 495px; }
  .pc-panel-heading { display: block; }
  .pc-stage-meta { display: inline-block; margin-top: .7rem; }
  .pc-file-list { gap: .5rem; margin-top: 1rem; }
  .pc-file-row { min-height: 68px; padding: .65rem; }
  .pc-file-row.is-story-file { grid-template-columns: auto minmax(0, 1fr); min-height: 0; }
  .pc-source-preview { grid-column: 1 / -1; margin-top: .15rem; }
  .pc-file-type { display: none; }
  .pc-table-wrap { overflow-x: auto; }
  .pc-table-wrap table { min-width: 520px; }
  .pc-convert-path { grid-template-columns: 1fr; margin-top: 1.4rem; }
  .pc-ledger-card { min-height: 105px; }
  .pc-convert-arrow { display: none; }
  .pc-app-grid { grid-template-columns: repeat(2, 1fr); margin-top: 1.3rem; }
  .pc-app-grid > div { min-height: 112px; }
  .pc-app-grid > div:last-child { grid-column: 1 / -1; }
  .pc-import-success { top: 225px; }
  .home-about { grid-template-columns: 1fr; text-align: center; }
  .home-about > img { margin: 0 auto; }
}

@media (max-width: 1080px) {
  .pc-hero__shell {
    grid-template-columns: 1fr;
    max-width: 820px;
    row-gap: 2.5rem;
  }

  .pc-hero__intro {
    max-width: 720px;
  }

  .pc-hero h1 {
    max-width: none;
  }

  .pc-workflow {
    transform: none;
  }

}

@media (max-width: 600px) {
  .pc-conversion-finder__prompt {
    align-items: stretch;
    display: grid;
    font-size: var(--pc-text-md);
  }

  .pc-conversion-finder select {
    font-size: var(--pc-text-base);
    width: 100%;
  }

  .pc-conversion-finder__prompt > span:last-child {
    display: none;
  }

  .home-guide-links ul {
    grid-template-columns: 1fr;
  }

  /* Below 600px the price wraps to its own line, so the stamp sits under it rather than
     beside it — left-aligned, not pushed to the right edge by the auto margin. */
  .stamp {
    margin-left: 0;
    transform-origin: left center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-button,
  .pc-workflow__panel.is-active { animation: none; transition: none; }
  .pc-button:hover { transform: none; }
}