/* ==========================================================================
   Neptune Navigation Software - site stylesheet
   Every colour, font and spacing value the site uses is defined once here.
   Change a value in :root and it updates on every page.
   ========================================================================== */

:root {
  /* Brand palette, taken from the original Xara site */
  --navy:        #2b3f78;  /* headings, body text, links */
  --navy-dark:   #233355;  /* header pattern, footer */
  --navy-mid:    #3a5490;
  --accent:      #b00058;  /* prices, offers, new flashes */
  --steel:       #5b7fb4;  /* compass blue, rules, quiet accents */
  --page-bg:     #e8f4ff;  /* page background */
  --card-bg:     #ffffff;
  --ink:         #22304f;  /* long form body copy */
  --ink-muted:   #5a6b8c;
  --line:        #cddff2;
  --ok:          #1c7a4a;

  /* Type */
  --font-body: "Open Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-head: "Trebuchet MS", "Open Sans", Arial, Helvetica, sans-serif;

  /* Layout */
  --wrap: 1200px;
  --gap: 1.5rem;
  --radius: 6px;
  --shadow: 0 2px 6px rgba(35, 51, 85, 0.12);
  --shadow-lift: 0 6px 18px rgba(35, 51, 85, 0.18);
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
a:hover, a:focus { color: var(--accent); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.25;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
h2 { font-size: clamp(1.35rem, 1rem + 1.4vw, 1.85rem); }
h3 { font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.3rem); }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------- header */
/* The header banner is the compass, the name and the phone number, with the
   navigation directly under it. The old Xara zigzag strip above it is not
   wanted. Its artwork is still in assets\img\header-pattern.png but nothing
   uses it. */
.masthead { background: #fff; border-bottom: 1px solid var(--line); }
.masthead .wrap {
  display: flex; align-items: center; gap: 0.9rem;
  padding-top: 0.7rem; padding-bottom: 0.7rem;
}
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand img { width: 46px; height: 46px; flex: none; }
.brand-name {
  font-family: var(--font-head); font-weight: 700; color: var(--navy);
  font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.5rem); line-height: 1.1;
}
.brand-name span { display: block; font-size: 0.62em; font-weight: 400; color: var(--steel); }
.masthead-tel {
  margin-left: auto; font-weight: 700; color: var(--navy);
  text-decoration: none; white-space: nowrap;
}

/* ---------------------------------------------------------- navigation */
.mainnav { background: var(--navy); }
.mainnav .wrap { display: flex; align-items: center; padding: 0 1.25rem; }
.navtoggle {
  display: none; margin: 0.45rem 0; padding: 0.5rem 0.8rem;
  font: inherit; font-weight: 700; color: #fff;
  background: transparent; border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--radius); cursor: pointer;
}
.navtoggle:hover { background: rgba(255,255,255,0.12); }
.navlist { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.navlist a {
  display: block; padding: 0.85rem 0.95rem;
  color: #fff; text-decoration: none; font-weight: 600; font-size: 0.95rem;
}
.navlist a:hover, .navlist a:focus { background: var(--navy-mid); color: #fff; }
.navlist a[aria-current="page"] { background: var(--steel); color: #fff; }

@media (max-width: 900px) {
  .mainnav .wrap { display: block; }
  .navtoggle { display: block; }
  .navlist { display: none; flex-direction: column; padding-bottom: 0.5rem; }
  .navlist.is-open { display: flex; }
  .navlist a { padding: 0.7rem 0.25rem; border-top: 1px solid rgba(255,255,255,0.15); }
}

/* --------------------------------------------------------------- hero */
.hero {
  position: relative; background: var(--navy-dark);
  border-bottom: 4px solid var(--steel);
}
.hero img { width: 100%; max-height: 320px; object-fit: cover; opacity: 0.55; }
.hero-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem;
}
.hero-text h1 { color: #fff; margin-bottom: 0.35em; text-shadow: 0 2px 8px rgba(0,0,0,0.55); }
.hero-text p {
  color: #eaf3ff; max-width: 40rem; margin: 0;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
@media (max-width: 600px) {
  .hero img { max-height: 200px; }
  .hero-text p { display: none; }
}

/* ------------------------------------------------------------ sections */
main { display: block; }
.section { padding: 2.5rem 0; }
.section--tint { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 46rem; margin-bottom: 1.75rem; }
.section-head p { color: var(--ink-muted); margin: 0; }

/* -------------------------------------------------------------- cards */
.grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
.card:hover { box-shadow: var(--shadow-lift); }
/* Screenshots are shown whole, never cropped, on a tinted mat. */
.card > img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: #f2f8ff; padding: 0.5rem;
  border-bottom: 1px solid var(--line);
}
.card-body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: 0.15em; }
.card-platform {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--steel); font-weight: 700; margin: 0 0 0.7em;
}
.card-body p { font-size: 0.95rem; }
.card-foot { margin-top: auto; padding-top: 0.9rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
/* Use on a card foot that carries more than one button, so the price sits on
   its own line and the buttons line up as a row underneath. */
.card-foot--stack .price { width: 100%; }
.price { font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; color: var(--accent); }
.price small { font-size: 0.62em; font-weight: 400; color: var(--ink-muted); display: block; }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-block; padding: 0.6rem 1.15rem;
  font: inherit; font-weight: 700; line-height: 1.2;
  text-decoration: none; text-align: center;
  border: 2px solid var(--navy); border-radius: var(--radius);
  background: var(--navy); color: #fff; cursor: pointer;
}
.btn:hover, .btn:focus { background: var(--navy-mid); border-color: var(--navy-mid); color: #fff; }
.btn--buy { background: var(--accent); border-color: var(--accent); }
.btn--buy:hover, .btn--buy:focus { background: #8d0046; border-color: #8d0046; }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover, .btn--ghost:focus { background: var(--navy); color: #fff; }
.btn--sm { padding: 0.4rem 0.85rem; font-size: 0.9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0; }

.flash {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  vertical-align: middle;
}
.flash--quiet { background: var(--steel); }

/* "Watch on YouTube" button. The artwork is a single SVG, so it stays sharp at
   any size. Use it anywhere a page has a video:
     <a class="btn-youtube" href="https://youtu.be/XXXX">
       <img src="assets/img/watch-on-youtube.svg" alt="Watch on YouTube">
     </a>                                                                    */
.btn-youtube { display: inline-block; line-height: 0; border-radius: 5px; }
.btn-youtube img { width: 178px; height: auto; }
.btn-youtube:hover, .btn-youtube:focus { box-shadow: 0 0 0 3px rgba(176, 0, 88, 0.35); }

/* The slot the YouTube button sits in, always directly under the picture of
   the product it belongs to. Works in three places:
     - straight after a card's screenshot   .card > .card-video
     - after the phone shots inside a card  .card-body .card-video
     - under a figure on a landing page     .figure .card-video            */
.card-video {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0 0 1rem;
}
.card > .card-video {
  margin: 0; padding: 0.75rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.figure .card-video { margin: 0.75rem 0 0; }

/* ------------------------------------------------------ content blocks */
.prose { max-width: 46rem; }
.prose h2 { margin-top: 1.8em; }
.split { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.figure { margin: 0; }
.figure img { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }
.figure figcaption { font-size: 0.85rem; color: var(--ink-muted); margin-top: 0.5rem; }

.panel {
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--steel);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; margin: 1.5rem 0;
}
.panel--note { border-left-color: var(--accent); }
.panel h3 { margin-top: 0; }
.panel :last-child { margin-bottom: 0; }

/* The italic note that sits under every "Download a Demo" button. Mastered in
   downloads.html between the DOWNLOADNOTE markers and pushed to the product
   pages by _tools\sync-parts.ps1, so all six copies stay identical. */
.dlnote {
  font-style: italic; font-size: 0.9rem; color: var(--ink-muted);
  max-width: 34rem; margin: -0.5rem 0 1.5rem;
  border-left: 3px solid var(--line); padding-left: 0.85rem;
}
.dlnote a { color: var(--navy); }

/* Numbered walkthrough on the download help page. */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 1.5rem 0; }
.steps > li {
  counter-increment: step; position: relative;
  padding: 0 0 1.75rem 3rem; margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}
.steps > li:last-child { border-bottom: none; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0.1rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: var(--font-head); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.steps h3 { margin-top: 0; }
.steps .figure img { max-width: 100%; }
@media (max-width: 560px) { .steps > li { padding-left: 2.5rem; } }

.featurelist { columns: 2; column-gap: 2rem; font-size: 0.95rem; }
.featurelist li { break-inside: avoid; margin-bottom: 0.3em; }
@media (max-width: 640px) { .featurelist { columns: 1; } }

.phones { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.phones img {
  height: auto; max-height: 170px; max-width: calc(50% - 0.5rem);
  object-fit: contain; border-radius: 8px; box-shadow: var(--shadow);
}

/* --------------------------------------------------------- price table */
.pricetable { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.95rem; }
.pricetable caption { text-align: left; font-weight: 700; color: var(--navy); padding-bottom: 0.5rem; }
.pricetable th, .pricetable td { padding: 0.65rem 0.7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pricetable thead th { background: var(--navy); color: #fff; border-bottom: none; }
.pricetable td.num { text-align: right; white-space: nowrap; font-weight: 700; color: var(--accent); }
.pricetable tbody tr:nth-child(even) { background: #f5faff; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Placeholder where a checkout link is not live yet. Replace the whole
   <span class="soon">...</span> with a .btn--buy link when you have the URL. */
.soon {
  display: inline-block; padding: 0.4rem 0.85rem;
  border: 2px dashed var(--steel); border-radius: var(--radius);
  color: var(--ink-muted); font-size: 0.9rem; font-weight: 700; white-space: nowrap;
}

/* -------------------------------------------------------------- footer */
.sitefoot { background: var(--navy-dark); color: #d7e4f7; margin-top: 3rem; }
.sitefoot a { color: #fff; text-decoration: none; }
.sitefoot a:hover, .sitefoot a:focus { color: #fff; text-decoration: underline; }
.sitefoot .wrap { padding-top: 2.25rem; padding-bottom: 1.5rem; }
.footgrid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footgrid h2 {
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: #9fb8dd; margin-bottom: 0.75em;
}
.footgrid ul { list-style: none; margin: 0; padding: 0; }
.footgrid li { margin-bottom: 0.35em; font-size: 0.92rem; }
.footgrid address { font-style: normal; font-size: 0.92rem; line-height: 1.7; }
.footbar {
  border-top: 1px solid rgba(255,255,255,0.15); margin-top: 1.75rem; padding-top: 1rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.85rem; color: #9fb8dd;
}
.footbar p { margin: 0; }

/* ---------------------------------------------------------- utilities */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.text-accent { color: var(--accent); }
.text-muted  { color: var(--ink-muted); }
.center { text-align: center; }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }

@media print {
  .mainnav, .navtoggle, .sitefoot, .btn { display: none !important; }
  body { background: #fff; }
}