/* ==========================================================================
   COPTXT — coptxt.com
   Single stylesheet. Sections: tokens, base, layout, header, hero, sections,
   steps, features, screenshot, download, FAQ, footer, text pages, responsive.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Colour */
  --bg: #f6f6f5;
  --surface: #ffffff;
  --surface-alt: #f1f2f2;

  --text: #17191b;
  --text-muted: #5c6266;
  --text-faint: #666c70;

  --border: #dfe1e2;
  --border-strong: #c9cccd;

  /* Borders that are the only thing identifying an operable control, or the
     edge of the consent bar where it sits over the page. WCAG 1.4.11 asks for
     3:1 against the adjacent colour, which --border-strong does not reach
     (#c9cccd is 1.62:1 on white). #868c8f is 3.41:1 on --surface, 3.15:1 on
     --bg and 3.04:1 on --surface-alt. Decorative hairlines keep --border. */
  --border-control: #868c8f;

  /* COPTXT turquoise. --accent is the brand mark colour, --accent-ink the
     darker variant used wherever text or a filled button needs contrast. */
  --accent: #14a5b2;
  --accent-bright: #2ec4d1; /* inline logo mark in index.html */
  --accent-ink: #0a6f79;
  --accent-press: #085b64;
  --accent-wash: #e6f4f5;

  /* Type */
  --font: Inter, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

  /* Spacing */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;

  /* Shape */
  --radius-sm: 4px;
  --radius: 6px;

  /* Width of assets/coptxt-screenshot.png in CSS pixels: the capture is
     never enlarged past it. See assets/README.txt. */
  --shot-width: 501px;

  --wrap: 1140px;
  --gutter: 24px;
}

/* --- Base ----------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* Keeps the footer at the bottom of the window on short pages such as
     contact.html; taller pages are unaffected. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

h1, h2, h3 {
  margin: 0;
  font-weight: 680;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

h1 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
}
h2 { font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); }
h3 { font-size: 1rem; letter-spacing: -0.005em; }

p { margin: 0; }

a { color: var(--accent-ink); }

img {
  display: block;
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--accent-wash);
  color: var(--text);
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* --- Layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap.narrow > * { max-width: 760px; }

.section { padding-block: var(--space-8); }

.section-bordered { border-top: 1px solid var(--border); }

.section-title {
  margin-bottom: var(--space-6);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 60ch;
}

.meta {
  font-size: 0.8125rem;
  color: var(--text-faint);
}

/* --- Header --------------------------------------------------------------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 56px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-decoration: none;
}

/* The application icon, drawn at 20px from a 64px source. It is an opaque
   square, so it is trimmed to the same corner radius as the rest of the
   interface. */
.brand-mark {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
}

.brand-name {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  color: var(--text-muted);
  font-size: 0.875rem;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit; /* <button> does not inherit the page font on its own */
  font-size: 0.9375rem;
  font-weight: 620;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: #ffffff;
}

.btn-primary:hover { background: var(--accent-press); border-color: var(--accent-press); }
.btn-primary:active { background: #064c54; }

/* The outlined button sits on --surface and is filled with --surface, so its
   border is the only thing that identifies it as a control: it uses
   --border-control rather than the decorative --border-strong. */
.btn-secondary {
  background: var(--surface);
  border-color: var(--border-control);
  color: var(--text);
}

.btn-secondary:hover { background: var(--surface-alt); border-color: var(--text-faint); }

.btn-lg { padding: 13px 26px; font-size: 1rem; }

/* The Microsoft Store listing is not live yet, so the call to action keeps the
   button's shape but is a static label rather than a link. When the listing
   exists, swap the element for an <a class="btn btn-primary"> — see the
   comments in index.html. */
.btn-pending {
  background: var(--surface-alt);
  border-color: var(--border-strong);
  color: var(--text-muted);
  cursor: default;
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-9) var(--space-8);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: var(--space-8);
  align-items: center;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-4);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 1px;
}

.hero-text h1 { margin-bottom: var(--space-4); }
.hero-text .lead { max-width: 46ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-block: var(--space-6) var(--space-4);
}

/* The capture sits on the right edge of the page grid. */
.hero .shot { justify-self: end; }

/* --- Application screenshot ------------------------------------------------
   The capture already contains the application's own title bar, so the frame
   is only a hairline and a shadow to lift it off the white background.
   --shot-width is the capture's CSS width: the image is never enlarged past
   it, so a 2x capture of the same window drops in and simply renders sharper.
   -------------------------------------------------------------------------- */

.shot { margin: 0; }

.window {
  max-width: var(--shot-width);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 18px 32px -22px rgba(0, 0, 0, 0.4);
}

.window img { width: 100%; }

/* Placeholder shown by main.js while assets/coptxt-screenshot.png is missing. */
.shot.is-missing img { display: none; }

.shot.is-missing .window::after {
  content: "assets/coptxt-screenshot.png";
  display: grid;
  place-items: center;
  aspect-ratio: 501 / 377;
  margin: 12px;
  padding: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-align: center;
}

/* --- Problem statement ---------------------------------------------------- */

.section-problem {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.section-problem h2 { margin-bottom: var(--space-4); }

/* --- How it works --------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  padding-top: var(--space-4);
  border-top: 1px solid var(--text);
}

.step-num {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
}

.steps h3,
.features h3 { line-height: 1.35; }

.steps h3 { margin-bottom: 6px; }

.steps p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  max-width: 34ch;
}

/* --- Features ------------------------------------------------------------- */

.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.features li {
  position: relative;
  padding-left: 28px;
}

/* Check mark drawn with two borders — no icon font, no SVG sprite. */
.features li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 6px;
  height: 11px;
  border: 2px solid var(--accent-ink);
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
}

.features h3 { margin-bottom: 4px; }

.features p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  max-width: 42ch;
}

/* --- Screenshot section --------------------------------------------------- */

.section-shot {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.shot-intro { margin-bottom: var(--space-6); }
.shot-intro h2 { margin-bottom: var(--space-3); }

/* Wide screens: the capture sits on the left of the page grid with the
   statement beside it, so the section fills the width it is given. Below
   960px it stacks in document order — heading, then capture. */
@media (min-width: 961px) {
  .section-shot .wrap {
    display: grid;
    grid-template-columns: var(--shot-width) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
  }

  .section-shot .shot { grid-area: 1 / 1; }

  .section-shot .shot-intro {
    grid-area: 1 / 2;
    margin-bottom: 0;
  }
}

/* --- Download ------------------------------------------------------------- */

.download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-7);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
}

.download-text h2 { margin-bottom: 6px; }
.download-text p { color: var(--text-muted); }

.download-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.download-action .btn { margin-bottom: 4px; }

/* --- FAQ ------------------------------------------------------------------ */

.faq { border-top: 1px solid var(--border); }

.faq details { border-bottom: 1px solid var(--border); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
  font-size: 1rem;
  font-weight: 620;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

/* Plus / minus indicator built from two thin bars. */
.faq summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  background:
    linear-gradient(var(--text-muted), var(--text-muted)) center / 11px 1.5px no-repeat,
    linear-gradient(var(--text-muted), var(--text-muted)) center / 1.5px 11px no-repeat;
}

.faq details[open] summary::after {
  background: linear-gradient(var(--text-muted), var(--text-muted)) center / 11px 1.5px no-repeat;
}

.faq details p {
  padding-bottom: var(--space-5);
  color: var(--text-muted);
  max-width: 64ch;
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-block: var(--space-6) var(--space-7);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}

.footer-copy {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-by {
  flex-basis: 100%;
  padding-top: var(--space-4);
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* --- Cookie consent -------------------------------------------------------
   A plain bar across the bottom of the viewport, not a floating card. It is
   shown by js/main.js only while no analytics choice has been stored, and
   reopened from the "Cookie settings" button in the footer.
   -------------------------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  background: var(--surface);
  /* The bar and the footer are both --surface, so this edge is the only thing
     separating the consent controls from the page underneath: --border-control,
     not the decorative hairline. */
  border-top: 1px solid var(--border-control);
}

/* The bar is fixed over the bottom of the viewport, so without this the last
   thing on the page — the footer links — can never be scrolled out from under
   it, and a footer link that receives keyboard focus is left completely hidden
   (WCAG 2.4.11 Focus Not Obscured). js/main.js measures the bar and sets
   --cookie-banner-height while it is on screen. */
.cookie-banner-open body { padding-bottom: var(--cookie-banner-height, 0px); }

.cookie-banner-open {
  scroll-padding-bottom: calc(var(--cookie-banner-height, 0px) + var(--space-4));
}

.cookie-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-4);
}

.cookie-banner h2 {
  margin-bottom: 2px;
  font-size: 0.9375rem;
}

.cookie-banner p {
  max-width: 76ch;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cookie-banner .btn {
  padding: 9px 16px;
  font-size: 0.875rem;
}

/* Keep the bar's content clear of the AccessiYes launcher (48px plus a margin).
   js/main.js adds .has-a11y-widget only when the widget is actually loaded, so
   no space is reserved if the Widget ID is ever blanked out.
   The launcher sits in the bottom-right corner on both desktop and mobile. */
.has-a11y-widget .cookie-banner-inner { padding-right: 84px; }

/* Footer button styled as one of the footer links. */
.footer-nav button {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text-muted);
  cursor: pointer;
}

.footer-nav button:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Text pages (privacy.html, contact.html) ------------------------------ */

.page-head { margin-bottom: var(--space-6); }

.page-title {
  margin-bottom: var(--space-2);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
}

.prose h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  font-size: 1.0625rem;
}

.prose h3 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: 1rem;
}

.prose p {
  margin-bottom: var(--space-4);
  color: var(--text-muted);
  max-width: 68ch;
}

.prose > p:last-child { margin-bottom: 0; }

.prose ul,
.prose ol {
  margin: 0 0 var(--space-4);
  padding-left: 20px;
  max-width: 68ch;
  color: var(--text-muted);
}

.prose li { margin-bottom: 4px; }

.more-link {
  margin-top: var(--space-4);
  font-size: 0.875rem;
}

.about-shot { margin-block: var(--space-6); }

.about-shot figcaption {
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: var(--text-faint);
}

.prose code {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface-alt);
  font-family: var(--font-mono);
  font-size: 0.875em;
  overflow-wrap: break-word;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 960px) {
  .hero {
    padding-block: var(--space-8) var(--space-7);
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

  .hero-text .lead { max-width: 56ch; }

  .hero .shot { justify-self: start; }

  .features { gap: var(--space-5) var(--space-7); }

  .steps { gap: var(--space-6); }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }

  .section { padding-block: var(--space-7); }

  .steps,
  .features {
    grid-template-columns: minmax(0, 1fr);
  }

  .steps li { padding-top: var(--space-3); }

  .steps p,
  .features p { max-width: none; }

  .download {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-5);
  }

  .download-action { align-items: stretch; }

  /* Keep the download call to action easy to hit on a phone. */
  .download-action .btn,
  .hero-actions .btn {
    display: block;
    text-align: center;
  }

  /* Button labels have to be allowed to wrap once the viewport is this narrow.
     "Coming soon to Microsoft Store" is wider than a 320px viewport on its own,
     and the WCAG 1.4.12 letter- and word-spacing overrides widen every label
     further; with white-space: nowrap that pushed the page 26px (94px with the
     spacing overrides) into horizontal scrolling. */
  .btn { white-space: normal; }

  .hero-actions {
    align-items: stretch;
    gap: var(--space-4);
  }

  .hero-actions .btn { width: 100%; }

  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .cookie-banner-actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }

  /* The bar stacks here and its buttons run the full width, so the clearance
     goes underneath the content instead of beside it. */
  .has-a11y-widget .cookie-banner-inner {
    padding-right: 0;
    padding-bottom: 84px;
  }
}

@media (max-width: 480px) {
  .header-inner {
    flex-wrap: wrap;
    padding-block: var(--space-3);
    gap: var(--space-2) var(--space-4);
  }

  .site-nav ul { gap: var(--space-4); }

  .shot-intro { margin-bottom: var(--space-5); }
}

/* --- Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}