/* Shared styles for every page on jotivo.app, linked from
   src/layouts/Layout.astro, which also holds the header and footer markup. */

/* A color that differs between the themes is light-dark(light, dark), and
   color-scheme picks the side: the system setting, unless the header's
   theme switch has saved a choice, which sets data-theme on <html> (see
   Layout.astro). Browsers without light-dark() (Safari before 17.5, Chrome
   before 123) drop those colors and show the browser's defaults. */
:root {
  --bg: light-dark(#ffffff, #151718);
  --surface: light-dark(#f6f3ec, #1c1f21);
  --card: light-dark(#ffffff, #202427);
  --fg: light-dark(#11181c, #ecedee);
  --text-2: light-dark(#4f575c, #b4bbc0);
  --muted: light-dark(#7a8287, #8d959a);
  --rule: light-dark(#e6e2d8, #2c3033);
  --accent: light-dark(#5f7d4e, #7fa36b);
  --accent-soft: light-dark(#e8eee3, #26301f);
  --on-accent: light-dark(#ffffff, #10140d);
  /* Dark screens sit in a light phone, so the frame stands out from the
     dark page instead of disappearing into it (jotivo#756). */
  --phone: light-dark(#1b1f23, #f1efea);
  /* Behind a screenshot until it loads: the app's background in each mode. */
  --screen: light-dark(#ffffff, #151718);
  /* A light frame between the dark page and a dark screen looks thicker
     than the dark frame does in light mode, though both are as wide. In
     dark mode an edge in the screen's color narrows the light band. */
  --bezel: light-dark(transparent, #151718);
  /* An edge around the app icon in the header. Its navy stands out on the
     light page but melts into the dark one, like the navy band's icon. */
  --icon-edge: light-dark(transparent, rgba(243, 234, 219, 0.3));
  --danger: light-dark(#b3261e, #f2b8b5);
  --radius: 1rem;
  --wrap: 68rem;
  /* The app icon's and OG image's navy (mockups/og.html), for the hero and
     closing band in both modes, and the colors that sit on it. */
  --navy: #1e2a44;
  --on-navy: #f3eadb;
  --on-navy-2: #c8c4bd;
  --on-navy-muted: #a2a1a2;
  --on-navy-accent: #a9c98f;
  --on-navy-coral: #f7a58f;
  --on-navy-coral-soft: rgba(240, 132, 106, 0.18);
  --on-navy-edge: rgba(243, 234, 219, 0.38);
  --on-navy-phone: light-dark(#0d1117, #f1efea);
  /* The icon's tab colors. Each tone is a strong color for icons and a
     soft one for the fill behind them, at least 3:1 apart in both modes. */
  --coral: light-dark(#c4553b, #f4a08a);
  --coral-soft: light-dark(#fde4dc, #3b2722);
  --blue: light-dark(#3f6b8a, #95bddb);
  --blue-soft: light-dark(#e1ebf3, #1e2c38);
  --amber: light-dark(#94660f, #e8b862);
  --amber-soft: light-dark(#fbefd6, #362b16);
  --teal: light-dark(#2f7a68, #82c9b6);
  --teal-soft: light-dark(#dcefe9, #1a322c);
  --ink: light-dark(#2a3851, #aebbd8);
  --ink-soft: light-dark(#e4e8f1, #262f44);
  color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Navy areas take their own text, muted and accent colors, so links, focus
   rings and the "Free to download" line stay readable on them. --on-accent
   follows, so a button on the light accent keeps a navy label (7.8:1). */
.on-navy {
  --fg: var(--on-navy);
  --text-2: var(--on-navy-2);
  --muted: var(--on-navy-muted);
  --accent: var(--on-navy-accent);
  --on-accent: var(--navy);
  --phone: var(--on-navy-phone);
  background: var(--navy);
  color: var(--fg);
}
/* The icon's own navy background would melt into the band, so it gets a
   cream edge and a drop shadow that lifts it off. */
.on-navy .app-icon {
  box-shadow: 0 0 0 1.5px var(--on-navy-edge), 0 10px 24px rgba(0, 0, 0, 0.45);
}
/* The icon's coral, light enough for the navy hero (5.5:1). */
.on-navy .pill {
  background: var(--on-navy-coral-soft);
  color: var(--on-navy-coral);
}

/* Pick a tone on an element, and the icons and fills inside it follow. */
.tone-coral { --tone: var(--coral); --tone-soft: var(--coral-soft); }
.tone-blue { --tone: var(--blue); --tone-soft: var(--blue-soft); }
.tone-green { --tone: var(--accent); --tone-soft: var(--accent-soft); }
.tone-amber { --tone: var(--amber); --tone-soft: var(--amber-soft); }
.tone-teal { --tone: var(--teal); --tone-soft: var(--teal-soft); }
.tone-ink { --tone: var(--ink); --tone-soft: var(--ink-soft); }

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps room for the scrollbar on short pages too, so the header and
     content don't shift sideways between a page that scrolls and one that
     doesn't. Overlay scrollbars (phones, macOS) take no room either way. */
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  /* Keeps the footer at the bottom of the window on short pages. svh, not
     dvh, so the layout doesn't jump when a phone's address bar hides. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }

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

a { color: var(--accent); }
a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* balance: evens out the lines so a heading never ends on one lone word */
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0 0 1rem; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 40rem) {
  .wrap { padding: 0 1.5rem; }
}

.skip {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  background: var(--card);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  z-index: 10;
}
.skip:focus { left: 0.5rem; }
.hidden { display: none; }

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

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.brand img { width: 2.25rem; height: 2.25rem; border-radius: 0.55rem; box-shadow: 0 0 0 1px var(--icon-edge); }
.site-nav { display: flex; gap: 1.25rem; font-size: 0.95rem; }
.site-nav a { color: var(--text-2); text-decoration: none; padding: 0.6rem 0; }
.site-nav a:hover { color: var(--fg); text-decoration: underline; }
.site-nav .optional { display: none; }
@media (min-width: 36rem) {
  .site-nav .optional { display: inline; }
}

/* Theme switch, left of the links with a divider between: a sun knob on
   the left in light mode, a moon on the right in dark. The script in
   Layout.astro sets aria-checked and shows it. The right margin plus the
   header's gap matches the links' gap on the divider's other side. */
.theme-switch {
  position: relative;
  flex: none;
  margin: 0 0.25rem 0 auto;
  width: 2.75rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--muted);
  cursor: pointer;
}
.theme-switch[hidden] { display: none; }
.theme-switch:not([hidden]) + .site-nav::before {
  content: "";
  align-self: center;
  width: 1px;
  height: 1.5rem;
  background: var(--rule);
}
.theme-switch .knob {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #ffffff;
  color: #11181c;
  transition: transform 0.2s ease;
}
.theme-switch svg { width: 0.75rem; height: 0.75rem; }
.theme-switch .moon,
.theme-switch[aria-checked="true"] .sun { display: none; }
.theme-switch[aria-checked="true"] .moon { display: block; }
.theme-switch[aria-checked="true"] .knob { transform: translateX(1.25rem); }
@media (prefers-reduced-motion: reduce) {
  .theme-switch .knob { transition: none; }
}

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

.hero {
  overflow: hidden;
  /* The wrap below sets the hero's top spacing; the section padding on
     top of it left too much air above the copy and phones. The bottom
     padding is what the phones' negative margins hang into, so it stays
     at 4rem whatever the other sections use. */
  padding: 0 0 4rem;
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding-top: 3rem;
  padding-bottom: 0;
}
.hero-copy { max-width: 34rem; }
.pill {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.hero h1 {
  font-size: clamp(2.1rem, 7vw, 3.4rem);
  margin-bottom: 1rem;
}
.lead {
  font-size: 1.15rem;
  color: var(--text-2);
  margin-bottom: 1.75rem;
}
.store-badge {
  display: inline-block;
  border-radius: 0.6rem;
}
.store-badge img { width: 11.5rem; }
.fine {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0.75rem 0 0;
}
.hero-art {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  padding-top: 0.5rem;
}
.hero-art .phone { position: relative; z-index: 1; width: min(16rem, 62vw); margin-bottom: -4rem; }
.hero-art .phone.back {
  z-index: 0;
  width: min(14rem, 52vw);
  margin-right: -3.5rem;
  margin-bottom: -6rem;
  transform: rotate(-6deg);
  opacity: 0.97;
}
.hero + section { padding-top: 4.5rem; }

@media (min-width: 56rem) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    padding-top: 4.5rem;
  }
  .hero-copy { padding-bottom: 4.5rem; }
  .hero-art { align-self: end; }
  .hero-art .phone { width: 17.5rem; }
  .hero-art .phone.back { width: 15rem; }
}

/* ---------- Phone frame ---------- */
/* Screenshots are 9:20 (e.g. 1080×2400). The frame is pure CSS so a new
   screenshot can replace an old one without touching the markup. Each one is
   a <picture> with a -dark.webp source for dark mode, so a visitor only
   downloads the set for the page's theme (the system setting, or the
   header's theme switch, see Layout.astro). */

.phone {
  background: var(--phone);
  padding: 0.55rem;
  border-radius: 2.1rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 24px 48px -16px rgba(17, 24, 28, 0.35),
    0 8px 16px -8px rgba(17, 24, 28, 0.25);
}
.phone img {
  width: 100%;
  aspect-ratio: 9 / 20;
  border-radius: 1.6rem;
  background: var(--screen);
  box-shadow: 0 0 0 2px var(--bezel);
}

/* ---------- Sections ---------- */

section { padding: 3rem 0; }
.section-head { max-width: 40rem; margin-bottom: 2.5rem; }
.section-head h2 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); margin-bottom: 0.75rem; }
.section-head p { color: var(--text-2); margin: 0; text-wrap: pretty; }

.features {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 36rem) {
  .features { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 56rem) {
  .features { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.feature {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.2rem;
}
.feature svg {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
  background: var(--tone-soft, var(--accent-soft));
  color: var(--tone, var(--accent));
  margin-bottom: 0.9rem;
}
.feature h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.feature p { color: var(--text-2); margin: 0; font-size: 1rem; text-wrap: pretty; }
/* One card per row: the icon sits to the left of the title, with the
   text below both. */
@media (max-width: 35.99rem) {
  .feature {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.85rem;
    align-items: center;
  }
  .feature svg, .feature h3 { margin-bottom: 0; }
  .feature p { grid-column: 1 / -1; margin-top: 0.6rem; }
}

/* Alternating image + text rows */
.showcase { display: grid; gap: 4.5rem; }
.show {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.show .phone { width: min(15.5rem, 70vw); margin: 0 auto; }
.show h3 { font-size: clamp(1.45rem, 4vw, 1.9rem); margin-bottom: 0.75rem; }
.show p { color: var(--text-2); }
.show ul {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: 0.6rem;
}
.show li {
  position: relative;
  padding-left: 1.9rem;
}
/* A tinted circle with the check drawn on top. The check is a mask, so it
   takes the article's tone in both modes. */
.show li::before,
.show li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 1.15rem;
  height: 1.15rem;
}
.show li::before {
  border-radius: 50%;
  background: var(--tone-soft, var(--accent-soft));
}
.show li::after {
  background: var(--tone, var(--accent));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}
@media (min-width: 56rem) {
  .show { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .show .phone { width: 16.5rem; }
  .show:nth-child(even) .show-art { order: 2; }
  .show-copy { max-width: 30rem; }
}

/* Premium (hidden until purchases are live) */
.plans {
  display: grid;
  gap: 1rem;
}
@media (min-width: 48rem) {
  .plans { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
.plan {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.plan.premium { border-color: var(--accent); }
.plan h3 { font-size: 1.25rem; margin-bottom: 0.25rem; }
.plan > p { color: var(--text-2); }
.plan ul { margin: 0; padding-left: 1.2rem; }
.plan li { margin-bottom: 0.35rem; }

/* FAQ */
.faq { max-width: 46rem; }
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq details:first-of-type { border-top: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  padding: 1.1rem 2.25rem 1.1rem 0;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
/* The plus sign is two bars, so the upright one can turn down into a minus
   sign when the answer opens. Borders, not backgrounds, so the bars stay
   visible in Windows' high contrast mode. They sit a hair below the middle,
   level with the question's lowercase letters, like the old glyph did. */
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.3125rem;
  top: 50%;
  width: 0.8125rem;
  margin-top: 1px;
  border-top: 2px solid var(--accent);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { color: var(--text-2); padding-right: 1rem; }
/* Padding, not margin, under the answer: a margin only counts once the slide
   ends, when it collapses out of the answer, so the row would jump by it. */
.faq details > :last-child { margin-bottom: 0; padding-bottom: 1rem; }

/* The answer slides open and shut. Only Chromium can animate to a height of
   auto (interpolate-size), so other browsers skip the slide and open the
   answer at once, as before. */
@media (prefers-reduced-motion: no-preference) {
  .faq summary::after { transition: transform 250ms ease; }

  @supports (interpolate-size: allow-keywords) {
    .faq { interpolate-size: allow-keywords; }
    /* The answer is clipped only while it slides or is shut. Once it is open
       the clip lets go, so a focus ring on its first line isn't cut off. */
    .faq details::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size 250ms ease, content-visibility 250ms allow-discrete,
        overflow-y 0s allow-discrete;
    }
    .faq details[open]::details-content {
      block-size: auto;
      overflow-y: visible;
      transition-delay: 0s, 0s, 250ms;
    }
  }
}

/* Closing call to action */
.cta {
  text-align: center;
  /* The colored band keeps the roomier padding. */
  padding: 4rem 0;
}
.cta h2 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); margin-bottom: 0.75rem; }
.cta p { color: var(--text-2); margin-bottom: 1.75rem; }
.cta .icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.1rem;
  margin: 0 auto 1.5rem;
}

/* ---------- Text pages (support, legal, data deletion, 404) ---------- */

.page { padding: 3rem 0 4rem; }
.page .wrap { max-width: 44rem; }
.page h1 { font-size: clamp(1.9rem, 5vw, 2.5rem); margin-bottom: 1rem; color: var(--fg); }
.page h2 { font-size: 1.25rem; margin: 2.25rem 0 0.6rem; }
.page h3 { font-size: 1.05rem; margin: 1.5rem 0 0.3rem; }
.page .muted { color: var(--muted); font-size: 0.9rem; }
.page p, .page li { color: var(--text-2); }
.page ol, .page ul { padding-left: 1.3rem; margin: 0 0 1rem; }
.page li { margin-bottom: 0.4rem; }
.contact-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.5rem 0 0.5rem;
}
.contact-card fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.contact-card legend { font-weight: 600; padding: 0; margin-bottom: 0.35rem; }
.choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.choice:last-of-type { border-bottom: 0; }
.choice input {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
}
.button {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-weight: 600;
  padding: 0.7rem 1.2rem;
  border-radius: 0.6rem;
  margin-top: 0.75rem;
}

/* ---------- Pages opened from auth emails (confirm, reset, account-exists) ---------- */

.auth {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth .wrap { max-width: 28rem; width: 100%; text-align: center; }
.auth .actions { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }
.btn {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.85rem 1.25rem;
  border-radius: 0.6rem;
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn:disabled { opacity: 0.6; cursor: default; }
.auth form { text-align: left; }
.auth input[type="email"] {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.6rem;
  border: 1.5px solid var(--muted);
  background: var(--bg);
  color: var(--fg);
  margin-bottom: 0.75rem;
}
.auth hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
.status:not(.visible) { display: none; }
.page .status.error { color: var(--danger); }

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

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.site-footer .wrap {
  display: grid;
  gap: 1.75rem;
}
/* One link per line on a phone, with more room above the copyright line so
   it doesn't read as a fifth link. The four don't fit on one line there, and
   wrapping them left "Data deletion" alone on the second. */
.site-footer nav {
  display: grid;
  justify-items: start;
  gap: 0 1.5rem;
}
.site-footer nav a { color: var(--text-2); padding: 0.45rem 0; }
.site-footer p { margin: 0; }
@media (min-width: 30rem) {
  .site-footer { padding-top: 2.5rem; }
  .site-footer .wrap { gap: 1.25rem; }
  .site-footer nav {
    display: flex;
    flex-wrap: wrap;
  }
}
@media (min-width: 48rem) {
  .site-footer .wrap {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}