@font-face {
  font-family: "Maison Neue";
  src: url("https://updraft.com/wp-content/uploads/2024/07/MaisonNeue-Bold.woff");
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("https://updraft.com/wp-content/uploads/2024/07/Gilroy-Bold.woff");
  font-display: swap;
}

/* --------------------------------------------------------------------
   Tokens taken from updraft.com's own article stylesheet, so the mirror
   uses the same ink, body colour, link colour, type scale, measure and
   spacing ramp as the real pages.
   -------------------------------------------------------------------- */
:root {
  --ud-ink: #210a4d;          /* headings */
  --ud-body: #1f3550;         /* body copy */
  --ud-blurple: #5d1cd3;      /* links */
  --ud-blurple-deep: #4a15a8; /* hover / visited */
  --ud-lilac: #dfd1f6;
  --ud-lilac-tint: #f7f3fe;
  --ud-rule: #e4daf9;
  --ud-table-head: #6133e4;
  --ud-table-rule: #e8e8e8;
  --ud-surface: #ffffff;

  /* Type scale, ratio 1.25 at desktop. 20 / 22.5 / 28 / 35.2 / 44. */
  --ud-fs-body: clamp(1rem, 0.912rem + 0.3756vw, 1.25rem);
  --ud-fs-h4: clamp(1.15625rem, 1.0682rem + 0.3756vw, 1.40625rem);
  --ud-fs-h3: clamp(1.34375rem, 1.2007rem + 0.6103vw, 1.75rem);
  --ud-fs-h2: clamp(1.625rem, 1.4225rem + 0.8638vw, 2.2rem);
  --ud-fs-h1: clamp(2rem, 1.7359rem + 1.1268vw, 2.75rem);
  --ud-fs-stand: clamp(1.25rem, 1.0739rem + 0.7512vw, 1.75rem);
  --ud-fs-small: 0.9375rem;

  /* Measure cap: 36 characters-per-line constant, 720px at 20px body. */
  --ud-measure: calc(36 * var(--ud-fs-body));

  /* Spacing ramp */
  --ud-space-1: 0.5rem;
  --ud-space-2: 0.75rem;
  --ud-space-3: clamp(1.25rem, 1.0739rem + 0.7512vw, 1.75rem);
  --ud-space-4: clamp(1.75rem, 1.4859rem + 1.1268vw, 2.5rem);
  --ud-space-5: clamp(2.25rem, 1.8099rem + 1.8779vw, 3.5rem);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--ud-surface);
}

body {
  font-family: "Maison Neue", system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: var(--ud-fs-body);
  line-height: 1.6;
  color: var(--ud-body);
  background: var(--ud-surface);
  overflow-wrap: break-word;
  text-wrap: pretty;
  max-width: calc(var(--ud-measure) + 2 * var(--ud-space-3));
  margin: 0 auto;
  padding: var(--ud-space-5) var(--ud-space-3);
}

/* --------------------------------------------------------------------
   Defensive: the capture keeps inline positioning, transform and
   opacity from the live page's sticky header and Swiper carousels.
   Left alone they overlap the top of the document, shift the Trustpilot
   strip off the left edge and render two of the three app screenshots
   fully transparent.
   -------------------------------------------------------------------- */
[style*="position: fixed"],
[style*="position:fixed"],
[style*="position: absolute"],
[style*="position:absolute"] {
  position: static !important;
  width: auto !important;
  inset: auto !important;
}

[style*="transform"] {
  transform: none !important;
}

[style*="opacity"] {
  opacity: 1 !important;
}

[style*="filter"] {
  filter: none !important;
}

/* --------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Gilroy, "Maison Neue", system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  color: var(--ud-ink);
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: var(--ud-fs-h1);
  line-height: 1.15;
  margin-block: 0 0.5em;
}

h2 {
  font-size: var(--ud-fs-h2);
  line-height: 1.2;
  margin-block: var(--ud-space-5) 0.4em;
}

h3 {
  font-size: var(--ud-fs-h3);
  line-height: 1.25;
  margin-block: var(--ud-space-4) 0.4em;
}

h4 {
  font-size: var(--ud-fs-h4);
  line-height: 1.3;
  margin-block: var(--ud-space-3) 0.35em;
}

h5,
h6 {
  font-size: 1rem;
  line-height: 1.4;
  margin-block: var(--ud-space-3) 0.35em;
}

/* The article standfirst sits between the h1 and the body copy. */
.ud-standfirst {
  font-size: var(--ud-fs-stand);
  line-height: 1.35;
  font-weight: 400;
  color: var(--ud-body);
}

:is(h1, h2, h3, h4, h5, h6):empty {
  display: none;
}

/* --------------------------------------------------------------------
   Body copy and lists
   -------------------------------------------------------------------- */
p {
  margin-block: 0 1.2em;
}

ul,
ol {
  margin-block: 0 1.2em;
  padding-inline-start: 1.5em;
}

li {
  margin-block-end: 0.5em;
}

li:last-child {
  margin-block-end: 0;
}

li > ul,
li > ol {
  margin-block: 0.5em 0;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

/* --------------------------------------------------------------------
   Links. updraft.com underlines body links and steps the weight to 600
   so colour is not the only cue.
   -------------------------------------------------------------------- */
a {
  color: var(--ud-blurple);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
}

a:visited {
  color: var(--ud-blurple-deep);
}

a:hover {
  color: var(--ud-blurple-deep);
  text-decoration-thickness: 0.14em;
  background-color: var(--ud-lilac-tint);
}

/* --------------------------------------------------------------------
   Images. The mirror is a single column, so logos and badges are capped
   to roughly the size they occupy on the real pages instead of running
   to the full measure.
   -------------------------------------------------------------------- */
img {
  max-width: min(100%, 320px);
  height: auto;
  display: block;
  margin-block: var(--ud-space-3);
}

/* Awards and recognition logo grid. */
.xpro-logo-grid-img {
  max-width: min(100%, 220px);
}

/* Trustpilot star strips sit tight to the review they belong to. */
.trustpilot-stars {
  max-width: 112px;
  margin-block: 0.25rem;
}

.trustpilot-trustscore {
  font-size: var(--ud-fs-small);
}

/* App screenshots from the home-page carousel. */
.swiper-slide-image {
  max-width: min(100%, 300px);
}

/* --------------------------------------------------------------------
   Trustpilot reviews. Each review carries two h3s; at full h3 size the
   strip swamps the page, so they are set at the size the real carousel
   cards use.
   -------------------------------------------------------------------- */
h3.name,
h3.review-title {
  font-size: 1.0625rem;
  line-height: 1.35;
  margin-block: 0 0.15em;
}

h3.name {
  margin-block-start: var(--ud-space-3);
}

h3.review-title {
  font-weight: 600;
}

/* Post cards and post meta. */
.uael-post__date,
.uael-post__terms-meta,
.elementor-post-info__item {
  font-size: var(--ud-fs-small);
}

/* --------------------------------------------------------------------
   Tables. Matches the deadline table on updraft.com: blurple header
   band, white rows, hairline rules, blurple first column.
   -------------------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--ud-space-4);
  font-size: var(--ud-fs-small);
}

thead tr {
  background: var(--ud-table-head);
  color: #ffffff;
}

th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-weight: 700;
}

td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ud-table-rule);
  line-height: 1.5;
}

tbody td:first-child {
  font-weight: 600;
  color: var(--ud-table-head);
}

/* --------------------------------------------------------------------
   Remaining block elements
   -------------------------------------------------------------------- */
blockquote {
  margin-block: var(--ud-space-3);
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--ud-lilac);
  color: var(--ud-body);
}

code {
  background: var(--ud-lilac-tint);
  padding: 0.1rem 0.35rem;
  font-family: "JetBrains Mono", Consolas, Monaco, monospace;
  font-size: 0.9em;
}

pre {
  background: var(--ud-lilac-tint);
  border: 1px solid var(--ud-rule);
  padding: 1rem;
  overflow-x: auto;
  margin-block: var(--ud-space-3);
}

pre code {
  background: none;
  padding: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--ud-rule);
  margin-block: var(--ud-space-4);
}

figure {
  margin-block: var(--ud-space-3);
}

::selection {
  background: var(--ud-blurple);
  color: #ffffff;
}

@media print {
  body {
    margin: 0;
    padding: 1rem;
    max-width: none;
  }

  a {
    color: #000000;
  }
}