/* Quorly landing page — self-hosted fonts, no third-party requests.
   Dark is the default, to match the editor; the OS preference is deliberately not followed. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/lora.woff2') format('woff2');
}

:root {
  --bg: #0e0e0e;
  --panel: #151517;
  --border: rgba(255, 255, 255, 0.10);
  --text: #f5f6f7;
  --muted: #a1a3a8;
  --accent: #6ee7b7;
  --accent-ink: #06110c;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.35);
  --maxw: 1040px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .6em; }

h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.05rem; margin-bottom: .4em; }

p { margin: 0 0 1em; }

kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82em;
  padding: .15em .45em;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--panel);
}

/* ---------- nav ---------- */

.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
  font-size: 1.05rem;
}

.brand img { border-radius: 8px; display: block; }

.nav .brand img { border-radius: 10px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: .92rem;
}

.nav-links a { text-decoration: none; color: var(--muted); }
.nav-links a:hover { color: var(--text); }

.nav-cta {
  color: var(--accent-ink) !important;
  background: var(--accent);
  padding: .5em 1em;
  border-radius: 999px;
  font-weight: 600;
}

/* ---------- hero ---------- */

.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 64px 24px 40px;
}

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(2.1rem, 6.4vw, 4rem);
  margin-bottom: .4em;
}

.hero h1 em {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 500;
}

.lede {
  max-width: 58ch;
  font-size: clamp(1rem, 2vw, 1.18rem);
  color: var(--muted);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 26px 0 14px;
}

.cta-row.center { justify-content: center; }

.btn-primary, .btn-ghost {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  padding: .78em 1.5em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .12s ease, opacity .12s ease;
}

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

.btn-primary:hover, .btn-ghost:hover { transform: translateY(-1px); opacity: .92; }

.micro { font-size: .85rem; color: var(--muted); margin: 0; }

/* ---------- sections ---------- */

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 72px 24px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.card {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow);
}

.card p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---------- checklist (privacy policy page) ---------- */

.checklist { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.checklist li {
  position: relative;
  padding-left: 30px;
  font-size: .95rem;
  color: var(--muted);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.checklist strong { color: var(--text); }

/* ---------- faq ---------- */

.faq details {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  padding: 16px 0;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: " +"; color: var(--muted); }
.faq details[open] summary::after { content: " –"; }
.faq details p { color: var(--muted); margin: 0 0 20px; font-size: .95rem; max-width: 62ch; }

/* ---------- final + footer ---------- */

.final { text-align: center; }

.footer { border-top: 1px solid var(--border); margin-top: 24px; }

.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .9rem;
  color: var(--muted);
}

.brand.small { font-size: .95rem; color: var(--text); }

.footer-inner nav { display: flex; gap: 18px; }
.footer-inner nav a { text-decoration: none; }
.footer-inner nav a:hover { color: var(--text); }
.copy { margin: 0; }

/* ---------- long-form prose (privacy page) ---------- */

.prose { max-width: 760px; }
.prose h2 { margin-top: 1.6em; font-size: 1.25rem; }
.prose p, .prose li { color: var(--muted); }
.prose a { color: var(--accent); }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .1em .35em;
}

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  .nav-links { gap: 14px; }
  .nav-links a:not(.nav-cta) { display: none; }
  .section { padding: 52px 24px; }
}

/* ---------- comparison table ---------- */

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  margin: 24px 0;
}
.compare-table th,
.compare-table td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.compare-table thead th {
  background: var(--panel);
  font-weight: 600;
  color: var(--text);
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.compare-table tbody th[scope="row"] {
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  width: 26%;
  white-space: normal;
}
.compare-table tbody td {
  color: var(--muted);
}

/* ---------- table scroll wrapper ---------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ---------- landing refresh ---------- */

body {
  background: #06090a;
  background-image: radial-gradient(ellipse 62% 37% at 52% 13%, rgba(20, 163, 150, .23), transparent 66%),
    radial-gradient(ellipse 25% 21% at 93% 33%, rgba(0, 124, 109, .19), transparent 70%);
  /* The hero photograph is wider than the page; clip instead of scrolling. */
  overflow-x: clip;
}

body::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 720px;
  background: linear-gradient(90deg, transparent 48%, rgba(86, 234, 207, .1) 55%, transparent 65%);
  filter: blur(18px);
  pointer-events: none;
}

:root { --maxw: 1408px; --panel: #0a0d0e; --border: rgba(179, 213, 211, .14); --accent: #62e9c7; }

.nav { padding: 17px 36px; max-width: 1408px; }
.brand { font-size: 1.3rem; gap: 9px; }
.brand img { width: 38px; height: 38px; object-fit: contain; }
.nav-links { gap: 40px; font-size: .95rem; }
.nav-links a { color: #d9dddd; }
.nav-cta { padding: .78em 1.45em; border-radius: 12px; }
.nav-cta::after { content: "→"; display: inline-block; margin-left: 12px; font-size: 1.1em; }
.btn-primary b { display: inline-block; margin-left: 2px; font-size: 1.05em; }

.hero {
  max-width: 1408px;
  min-height: 0;
  padding: 30px 36px 18px;
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: center;
  position: relative;
}
.hero-copy { position: relative; z-index: 1; padding-top: 1px; }
.eyebrow { font-size: .7rem; letter-spacing: .31em; margin-bottom: 17px; }
.hero h1 { font-family: 'Lora', Georgia, serif; font-size: clamp(2.1rem, 3.5vw, 3rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.08; margin-bottom: .37em; text-wrap: balance; }
.hero h1 em { color: #76d5bb; }
.hero-subheadline {
  margin: 24px 0 16px;
  color: #aeb8b9;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(.98rem, 1.4vw, 1.13rem);
  font-weight: 500;
  letter-spacing: .01em;
}
.lede { max-width: 480px; color: #c2c7c8; font-size: 1rem; line-height: 1.5; }
.cta-row { margin: 25px 0 13px; gap: 18px; }
.btn-primary, .btn-ghost { display: inline-flex; align-items: center; gap: 10px; border-radius: 11px; padding: .95em 1.6em; font-size: 1rem; }
.btn-primary svg, .btn-ghost svg { width: 18px; height: 18px; flex: 0 0 18px; }
.btn-ghost { background: rgba(7, 10, 11, .62); border-color: rgba(255,255,255,.13); }
.micro { color: #b7bdbe; font-size: .79rem; }

.editor-preview { position: relative; width: min(100%, 810px); justify-self: end; }

/* The room the mock sits in: one self-hosted WebP, no third-party request. It is anchored to the
   mock rather than to the viewport, so the photographed laptop's screen lines up with the mock's
   screen at every width. 225.7% wide and shifted left by 47.25% of that, which lands the photo's
   screen edge exactly on the mock's; the vertical shift is 14.35% of the photo's own height. */
.editor-preview::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -106.65%;
  top: 0;
  width: 225.7%;
  aspect-ratio: 1672 / 941;
  transform: translateY(-14.35%);
  background: url('/landing-bg.webp') 0 0 / 100% 100% no-repeat;
  /* Fade the desk out before the image ends, so there is no hard edge down the page. */
  mask-image: linear-gradient(to bottom, #000 0 60%, transparent 88%);
  pointer-events: none;
}
.screen { filter: drop-shadow(0 24px 18px rgba(0, 0, 0, .5)); }
.screen { border: 2px solid #76c6c4; border-radius: 20px 20px 7px 7px; background: #030506; padding: 16px 12px 12px; box-shadow: inset 0 0 0 3px #071417, 0 0 24px rgba(82, 230, 214, .18); }
.laptop-top { position: absolute; top: 5px; left: 50%; width: 44%; transform: translateX(-50%); height: 8px; border-radius: 0 0 8px 8px; background: #122b2e; z-index: 1; }
.laptop-top span { display: block; width: 4px; height: 4px; margin: 2px auto; border-radius: 50%; background: #1c7474; }
.window-bar { height: 20px; border: 1px solid #1b3638; border-bottom: 0; border-radius: 10px 10px 0 0; background: #070b0d; padding: 7px 8px; }
.window-bar i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #fb5c50; }
.window-bar i:nth-child(2) { background: #f4b83c; }.window-bar i:nth-child(3) { background: #38c66e; }
.preview-page { min-height: 392px; border: 1px solid #172123; border-radius: 0 0 8px 8px; overflow: hidden; background: #060809; }
.preview-document { position: relative; padding: 42px 56px 30px; font-size: 11.2px; color: #eef1f1; }
.preview-document h2 { font-size: 26px; margin: 0 0 11px; }.preview-document h3 { font-size: 17px; margin: 19px 0 5px; }
.preview-document small, .preview-document p, .preview-document ol { color: #c4cbcc; }.preview-document p { line-height: 1.48; margin: 17px 0; }.preview-document hr { margin-top: 16px; border: 0; border-top: 1px solid #152021; }.preview-document ol { padding-left: 18px; margin: 0; }
.mobile-preview-more { display: block; }
.word-count { position: absolute; right: auto; bottom: 12px; left: 50%; transform: translateX(-50%); padding: 5px 13px; border: 1px solid #243235; border-radius: 13px; color: #a7b0b1; font-size: 9px; white-space: nowrap; }
.preview-tools { display: none; }
/* The photograph supplies the laptop's lid, rim and base, so the drawn shell stands down. */
.laptop-top, .laptop-base { display: none; }

.features-section { max-width: 1408px; padding: 20px 36px 55px; }
.feature-highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 0 0 34px; }.feature-highlight { display: flex; gap: 21px; }.feature-highlight h3 { margin: 9px 0 6px; font-size: 1rem; }.feature-highlight p { color: #b5bdbe; font-size: .86rem; line-height: 1.45; margin: 0; }.feature-icon { flex: 0 0 57px; width: 57px; height: 57px; display: grid; place-items: center; border: 1px solid; border-radius: 14px; font-size: 30px; opacity: .5; }.privacy-icon { color: #54f5ce; background: rgba(0, 109, 85, .23); border-color: rgba(66, 225, 188, .2); }.focus-icon { color: #51bcff; background: rgba(0, 91, 149, .24); border-color: rgba(74, 179, 237, .2); }.edit-icon { color: #ffda61; background: rgba(123, 88, 0, .22); border-color: rgba(241, 191, 71, .2); }.offline-icon { color: #d281ff; background: rgba(100, 35, 145, .25); border-color: rgba(201, 98, 255, .2); }
.showcase { display: grid; grid-template-columns: 42% 58%; gap: 25px; border: 1px solid var(--border); border-radius: 16px; padding: 25px 40px; background: linear-gradient(105deg, rgba(10,15,16,.94), rgba(5,8,9,.7)); }.showcase-copy h2 { font-family: 'Lora', Georgia, serif; font-size: 2.2rem; font-weight: 500; letter-spacing: -.04em; }.showcase-copy p:last-child { max-width: 460px; color: #c1c7c8; font-size: 1rem; line-height: 1.62; }.showcase-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }.showcase-modes > article > h3 { margin: 9px 0 0; font-size: .9rem; }.showcase-modes > article > p { margin: 0; color: #aeb7b8; font-size: .82rem; }.mode-preview { height: 191px; position: relative; overflow: hidden; border: 1px solid #243033; border-radius: 9px; padding: 32px 29px 12px; background: #020405; color: #eef1f1; font-size: 7px; }.dots { position: absolute; top: 8px; left: 13px; color: #f25553; font-size: 7px; word-spacing: 2px; }.mode-preview h3 { font-size: 14px; margin: 0 0 7px; }.mode-preview small, .mode-preview p, .mode-preview ol { color: #c4caca; }.mode-preview hr { border: 0; border-top: 1px solid #172021; margin: 12px 0; }.mode-preview p { line-height: 1.35; }.mode-preview ol { padding-left: 12px; line-height: 1.5; }.focused-preview { padding-left: 43px; }.narrow-copy { width: 73%; }.mini-tools { position: absolute; right: 0; top: 0; width: 20%; height: 100%; border-left: 1px solid #263032; background: repeating-linear-gradient(#0a0e0f 0 16px, #131b1d 17px 18px); }
/* Distraction-free mock: 75% more side padding than the shared 29px, so the paragraphs
   sit as a narrower column and the mock reads as a focus view rather than a full-width page. */
.mode-preview.centered-preview { padding-left: 50.75px; padding-right: 50.75px; }
/* The light reader sits where it always did. A dark reader is laid over it, starting 30% in
   from the top and left, so the light screen shows through as an L down its top and left. */
.personalize-preview {
  padding: 14px 20px;
  border-color: #243033;
  background: #020405;
}
.reader-stack { position: absolute; inset: 14px 20px; }
.light-reader {
  position: absolute;
  inset: 0;
  padding: 21px 24px 24px;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  color: #18202a;
  box-shadow: 0 5px 14px rgba(18, 26, 33, .13), 0 1px 3px rgba(18, 26, 33, .08);
}
.dark-reader {
  position: absolute;
  top: 30%;
  left: 30%;
  right: 0;
  bottom: 0;
  padding: 13px 15px;
  overflow: hidden;
  border: 1px solid #263336;
  border-radius: 10px;
  background: linear-gradient(160deg, #0c1416, #05090a 62%, #020405);
  color: #eef1f1;
  font-size: 6px;
  box-shadow: 0 16px 30px rgba(6, 10, 12, .55), 0 -1px 0 rgba(255, 255, 255, .06);
}
.dark-reader h3 { color: #fff; font-size: 10px; margin: 0 0 4px; }
.dark-reader h4 { margin: 8px 0 3px; color: #e8eded; font-size: 7px; }
.dark-reader small, .dark-reader p, .dark-reader ol { color: #b9c1c2; }
.dark-reader hr { margin: 8px 0; border: 0; border-top: 1px solid #172021; }
.dark-reader p { margin: 0; line-height: 1.42; }
.dark-reader ol { margin: 0; padding-left: 11px; line-height: 1.45; }
.light-reader h3 { color: #16202a; font-size: 13px; margin: 0 0 6px; }
.light-reader h4 { margin: 11px 0 4px; color: #16202a; font-size: 9px; }
.light-reader small, .light-reader p, .light-reader ol { color: #475564; }
.light-reader hr { margin: 10px 0; border-color: #dde1e4; }
.light-reader p { margin: 0; line-height: 1.42; }
.light-reader ol { margin: 0; padding-left: 13px; line-height: 1.5; }
.legacy-features { display: none; }

@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-top: 44px; }.editor-preview { justify-self: center; margin-top: 42px; }.feature-highlights { grid-template-columns: repeat(2, 1fr); }.showcase { grid-template-columns: 1fr; }.nav { padding-inline: 24px; } }
@media (max-width: 620px) {
  .nav { padding: 15px 18px; }
  .nav-links { gap: 10px; }
  .nav-cta { padding: .58em .75em; }
  .hero, .features-section { padding-left: 20px; padding-right: 20px; }
  .hero h1 { font-size: 2.7rem; }

  /* On a phone, present the writing surface as an iPhone rather than a tiny laptop. */
  .editor-preview {
    width: min(100%, 320px);
    aspect-ratio: 9 / 19.5;
    justify-self: center;
    padding: 0;
  }
  /* The photographed laptop belongs to the desktop composition only. */
  .editor-preview::before { display: none; }
  .screen {
    position: relative;
    padding: 5px;
    border: 2px solid #79bcbd;
    border-radius: 31px;
    background: linear-gradient(135deg, #a0d0cf 0%, #385d61 13%, #17282b 48%, #77b3b3 100%);
    box-shadow: 0 18px 35px rgba(0, 0, 0, .56), 0 0 18px rgba(103, 225, 216, .18), inset 0 0 0 1px rgba(255, 255, 255, .43);
    height: 100%;
  }
  .screen::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 4px;
    left: 50%;
    width: 39%;
    height: 14px;
    transform: translateX(-50%);
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, #1b2a2c, #0c1112);
  }
  .screen::after {
    content: "";
    position: absolute;
    z-index: 2;
    bottom: 5px;
    left: 50%;
    width: 31%;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
  }
  .laptop-top, .laptop-base, .window-bar { display: none; }
  .preview-page { display: block; min-height: 0; height: 100%; border-radius: 25px; }
  .preview-document { min-height: 100%; height: 100%; padding: 44px 22px 68px; font-size: 14px; }
  .preview-document h2 { font-size: 26px; }
  .preview-document h3 { font-size: 19px; }
  .mobile-preview-more { display: block; }
  .preview-tools { display: none; }
  .word-count { display: block; right: auto; bottom: 22px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

  .feature-highlights, .showcase-modes { grid-template-columns: 1fr; gap: 18px; }
  .showcase { padding: 24px 20px; }
  .showcase-copy h2 { font-size: 1.9rem; }
}