/* One stylesheet for the whole site, styled after the apps themselves:
   the dark camera-screen background, SF Rounded headings, capsule pills,
   corner-bracket scan frames and one accent colour per app. No framework,
   no build step, no web fonts -- on Apple devices the system stack is the
   same font the apps use. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* The apps' accents, taken from their Swift code. */
  --orange:  #ff7a21;   /* Multiscan */
  --blue:    #2f6bff;   /* ScanToPC */
  --red:     #e53935;   /* Barcode Reader QR Code Scanner */
  --teal:    #38d4b8;   /* Tidyfy */
  --cyan:    #5ccbdb;   /* Word for Word */
  --white:   #f5f5f5;   /* Winders, which is monochrome all through */
  --green:   #34c759;   /* the "scanned" tick */

  --accent:  var(--blue);

  --bg:      #14171c;   /* Multiscan's background, also the App Store screenshots' */
  --surface: #1e2229;
  --raised:  #272c34;
  --ink:     #ffffff;
  --ink-2:   rgba(255,255,255,.72);
  --ink-3:   rgba(255,255,255,.48);
  --line:    rgba(255,255,255,.09);

  --radius:  20px;
  --page:    720px;
  color-scheme: dark;
}

/* Each app page sets its own accent, like each app does. */
.app-multiscan { --accent: var(--orange); }
.app-scantopc  { --accent: var(--blue); }
.app-barcode   { --accent: var(--red); }
.app-tidyfy    { --accent: var(--teal); }
.app-nfctool   { --accent: var(--blue); }   /* NFC Tool shares ScanToPC's blue */
.app-winders   { --accent: var(--white); }
.app-wordforword { --accent: var(--cyan); }
/* Teal, cyan and white are light: dark text keeps accent buttons readable. */
.app-tidyfy .pill.accent, .app-tidyfy.pill.accent { color: #04201b; }
.app-winders .pill.accent, .app-winders.pill.accent { color: #14171c; }
.app-wordforword .pill.accent, .app-wordforword.pill.accent { color: #0a1c20; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 20px; }

h1, h2, h3, .brand { font-family: var(--rounded); }

/* ---- header: a translucent bar, like the apps' material overlays ------ */
header.site {
  position: sticky; top: 0; z-index: 10;
  background: rgba(20,23,28,.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
header.site .wrap {
  display: flex; align-items: center; gap: 12px;
  padding-top: 12px; padding-bottom: 12px;
}
.brand {
  font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
header.site nav { margin-left: auto; display: flex; gap: 8px; }

/* Capsule buttons: the apps' pills. */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.1); color: var(--ink);
  font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .15s ease;
}
.pill:hover { background: rgba(255,255,255,.18); }
main a.pill { color: var(--ink); }
main a.pill:hover { text-decoration: none; }
.pill.accent { background: var(--accent); }
.pill.accent:hover { filter: brightness(1.08); }

/* ---- hero ------------------------------------------------------------ */
.hero { padding: 56px 0 8px; text-align: center; }
.hero h1 {
  font-size: 46px; line-height: 1.08; letter-spacing: -.5px; font-weight: 800;
  margin: 0 0 14px;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { font-size: 19px; color: var(--ink-2); margin: 0 auto; max-width: 30em; }
.hero .app-name {
  font-family: var(--rounded); font-weight: 700; font-size: 15px;
  color: var(--accent); margin: 0 0 6px;
}
@media (max-width: 640px) {
  .hero { padding-top: 36px; }
  .hero h1 { font-size: 34px; }
  .hero .lede { font-size: 17px; }
}

/* The app icon, framed by scan brackets in the app's accent -- what the
   apps draw around a code they have just read. */
.scan-frame {
  position: relative; width: 136px; height: 136px; margin: 0 auto 26px;
  display: grid; place-items: center;
}
/* The span only carries the two lower corners. Out of the grid flow, so
   the icon is the grid's only item and sits in the middle. */
.scan-frame span { position: absolute; inset: 0; }
.scan-frame img {
  width: 96px; height: 96px; border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.scan-frame::before, .scan-frame::after,
.scan-frame span::before, .scan-frame span::after {
  content: ""; position: absolute; width: 30px; height: 30px;
  border: 5px solid var(--accent);
}
.scan-frame::before { top: 0; left: 0;  border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.scan-frame::after  { top: 0; right: 0; border-left: 0;  border-bottom: 0; border-top-right-radius: 14px; }
.scan-frame span::before { bottom: 0; left: 0;  border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.scan-frame span::after  { bottom: 0; right: 0; border-left: 0;  border-top: 0; border-bottom-right-radius: 14px; }

/* The "no …" promises as pills, each with the green scanned tick. */
.promises {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  list-style: none; padding: 0; margin: 26px 0 0;
}
.promises li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.promises li::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}

/* ---- content --------------------------------------------------------- */
main { padding: 8px 0 72px; }
p  { margin: 0 0 14px; color: var(--ink-2); }
p:last-child { margin-bottom: 0; }
main a { color: var(--accent); text-decoration: none; font-weight: 600; }
main a:hover { text-decoration: underline; }
strong { color: var(--ink); }
code {
  font-family: var(--mono); font-size: .86em;
  background: var(--raised); padding: 2px 7px; border-radius: 6px; color: var(--ink);
  word-break: break-word;
}

/* Sections as rounded cards, like the apps' sheets. */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px; margin: 14px 0;
}
.panel h2 {
  font-size: 20px; font-weight: 700; letter-spacing: -.2px; margin: 0 0 8px;
  display: flex; align-items: center; gap: 10px;
}
.panel h2::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.panel ul { color: var(--ink-2); padding-left: 20px; margin: 0 0 14px; }
.panel ul:last-child { margin-bottom: 0; }
.panel li { margin: 6px 0; }
.panel li::marker { color: var(--accent); }
@media (max-width: 640px) { .panel { padding: 18px; } }

.updated { text-align: center; color: var(--ink-3); font-size: 14px; margin: 18px 0 30px; }

/* ---- home page app list ---------------------------------------------- */
.apps { display: grid; gap: 14px; margin-top: 40px; }
.app {
  display: flex; align-items: center; gap: 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
}
.app img { width: 72px; height: 72px; border-radius: 17px; flex: none; }
.app h3 { font-size: 19px; margin: 0 0 2px; color: var(--ink); }
.app p { font-size: 15px; margin: 0 0 10px; }
.app .pill { font-size: 14px; padding: 6px 13px; }
@media (max-width: 480px) {
  .app { align-items: flex-start; }
  .app img { width: 56px; height: 56px; border-radius: 13px; }
}

/* ---- info page --------------------------------------------------------- */
.app-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.app-head img { width: 64px; height: 64px; border-radius: 15px; flex: none; }
.app-head h2 { margin: 0; }
.app-head h2::before { display: none; }
.app-tag { margin: 2px 0 0; font-size: 15px; color: var(--accent); font-weight: 600; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.panel h3 { font-size: 17px; margin: 22px 0 6px; color: var(--ink); }
.panel ol { color: var(--ink-2); padding-left: 22px; margin: 0 0 14px; }
.panel ol li { margin: 6px 0; }
.panel ol li::marker { color: var(--accent); font-weight: 700; }
.small { font-size: 15px; }

/* Download buttons: big accent tiles, one per platform. */
.downloads {
  display: grid; gap: 10px; margin: 18px 0 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
main a.download {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 18px; border-radius: 16px;
  background: var(--accent); color: #fff; text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}
main a.download:hover { filter: brightness(1.08); transform: translateY(-1px); }
.download strong { color: #fff; font-family: var(--rounded); font-size: 18px; }
.download span { font-size: 14px; font-weight: 500; opacity: .85; }

/* ---- footer ---------------------------------------------------------- */
footer.site {
  border-top: 1px solid var(--line); padding: 26px 0 44px;
  color: var(--ink-3); font-size: 14.5px;
}
footer.site a { color: var(--ink-2); text-decoration: none; }
footer.site a:hover { color: var(--ink); }
footer.site .wrap { display: flex; gap: 16px; flex-wrap: wrap; }
footer.site .spacer { margin-left: auto; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Two app icons side by side, for the apps that share one computer program. */
.icon-pair { display: flex; flex: none; }
.icon-pair img + img { margin-left: -18px; box-shadow: -3px 0 0 var(--surface); }

/* A download tile that is not live yet. */
.download.coming-soon {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 18px; border-radius: 16px;
  background: var(--raised); border: 1px dashed var(--line);
  cursor: not-allowed;
}
.download.coming-soon strong { color: var(--ink-2); }
.download.coming-soon span { color: var(--ink-3); opacity: 1; }