/* Public pages of nautilib.com (home, privacy, account deletion, legal, support). */
:root {
  --navy: #06253C;
  --navy-2: #0B3A5B;
  --blue: #0B5E8F;
  --teal: #17B0A8;
  --text: #26414F;
  --muted: #5C7585;
  --bg: #F2F6F8;
  --surface: #FFFFFF;
  --border: #DDE6EB;
  --on-navy: #FFFFFF;
  --on-navy-muted: #9CB0BC;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text: #D5E2EA;
    --muted: #93A9B6;
    --bg: #071A27;
    --surface: #0C2536;
    --border: #1A3A50;
    --blue: #5CB8EA;
  }
}
:root[data-theme="dark"] {
  --text: #D5E2EA;
  --muted: #93A9B6;
  --bg: #071A27;
  --surface: #0C2536;
  --border: #1A3A50;
  --blue: #5CB8EA;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--blue); }
img { max-width: 100%; }

/* Top bar */
.bar {
  background: var(--navy);
  color: var(--on-navy);
}
.bar .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--on-navy);
  text-decoration: none;
  font-weight: 800;
  font-size: 19px;
  margin-right: auto;
}
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.bar nav { display: flex; gap: 14px; align-items: center; }
.bar nav a { color: var(--on-navy-muted); text-decoration: none; font-size: 15px; }
.bar nav a:hover { color: var(--on-navy); }
/* The sign-in button in the header: white text, on a deeper teal so the
   white stays readable (4.2:1). */
.bar nav a.btn { color: #FFFFFF; background: #0F8A84; }
.bar nav a.btn:hover { background: #0B7A75; color: #FFFFFF; }

.wrap { max-width: 1040px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.narrow { max-width: 760px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  font-size: 16px;
}
.btn-primary { background: var(--teal); color: #04212F; }
.btn-ghost { border: 1.5px solid rgba(255, 255, 255, .35); color: var(--on-navy); }
.btn-small { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 11px; }

/* Home: hero */
.hero {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--on-navy);
  padding: 56px 0 64px;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero h1 { font-size: 46px; line-height: 1.1; margin: 0 0 16px; letter-spacing: -.5px; }
.hero h1 span { color: var(--teal); }
.hero p.lead { font-size: 19px; color: #C4D3DC; margin: 0 0 28px; max-width: 520px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.stores-label { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--on-navy); }
/* Official store badges, shown at the same visible height. Google's PNG has
   transparent space around its artwork, so it is drawn taller and pulled
   back with negative margins rather than cropped: the French file has
   192 of 250 px of artwork in height, the English one 168 of 250 with
   41 px on each side. */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.badges a { display: inline-flex; border-radius: 9px; }
.badges a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.badge-apple { height: 48px; width: auto; }
.badge-google { height: 62px; width: auto; margin: -7px 0; }
.badge-google-en { height: 71px; margin: -12px -12px; }
.badges-center { justify-content: center; }
.web-link { margin: 18px 0 0; font-size: 14px; color: var(--on-navy-muted); }
.web-link a { color: var(--on-navy); font-weight: 600; }
.cta .web-link { margin-top: 16px; }
.hero-shot { justify-self: center; width: 100%; max-width: 330px; }
.hero-shot img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }

/* Home: features */
.section { padding: 56px 0; }
.section h2 { font-size: 30px; color: var(--text); margin: 0 0 8px; letter-spacing: -.3px; }
.section .sub { color: var(--muted); margin: 0 0 32px; font-size: 17px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
}
.feature .ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(23, 176, 168, .14);
  color: var(--teal);
  margin-bottom: 12px;
}
.feature .ico svg { width: 24px; height: 24px; }
.feature h3 { margin: 0 0 6px; font-size: 18px; }
.feature p { margin: 0; color: var(--muted); font-size: 15px; }

/* Home: screenshots */
.shots {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.shots img {
  flex: 0 0 auto;
  width: 230px;
  height: auto;
  border-radius: 18px;
  scroll-snap-align: start;
}

/* Home: closing call */
.cta {
  background: var(--navy);
  color: var(--on-navy);
  border-radius: 24px;
  padding: 36px 28px;
  text-align: center;
}
.cta h2 { color: var(--on-navy); }
.cta p { color: #C4D3DC; margin: 0 0 22px; }

/* Text pages */
.page-head { background: var(--navy); color: var(--on-navy); padding: 34px 0 30px; }
.page-head h1 { margin: 0; font-size: 30px; }
.page-head p { margin: 6px 0 0; color: var(--on-navy-muted); }
main.doc { padding: 24px 16px 48px; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.card h2 { font-size: 19px; margin: 0 0 8px; }
.card h3 { font-size: 16px; margin: 16px 0 4px; }
.card ul, .card ol { padding-left: 20px; margin: 8px 0; }
.card li { margin: 4px 0; }
.card p { margin: 8px 0; }
.muted { color: var(--muted); font-size: 14px; }
.big { font-size: 18px; font-weight: 700; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th, table.data td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--border); vertical-align: top; }
table.data th { font-weight: 700; }
.table-scroll { overflow-x: auto; }

/* Footer */
footer.site {
  border-top: 1px solid var(--border);
  padding: 26px 0 40px;
  font-size: 14px;
  color: var(--muted);
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
footer.site a { color: var(--muted); }
footer.site .copy { margin-right: auto; }

@media (max-width: 860px) {
  .hero { padding: 36px 0 44px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: 34px; }
  .hero p.lead { font-size: 17px; }
  .features { grid-template-columns: 1fr; }
  .section { padding: 40px 0; }
  .section h2 { font-size: 25px; }
  .bar nav a.hide-small { display: none; }
  .hero-shot { max-width: 260px; }
}