/* DayFlo public pages — shared stylesheet (oklch tokens, semantic HTML). */
@layer reset, tokens, base, layout;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, picture, svg { display: block; max-inline-size: 100%; }
  input, button { font: inherit; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --primary: oklch(55% 0.21 263);          /* #2563eb */
    --primary-strong: oklch(50% 0.21 263);
    --ink: oklch(13% 0.02 265);              /* slate-950 */
    --text: oklch(18% 0.02 265);
    --muted: oklch(42% 0.03 255);            /* #475569 */
    --muted-soft: oklch(56% 0.025 255);
    --emerald: oklch(52% 0.12 165);          /* emerald-700 */
    --border: oklch(90% 0.01 250);           /* slate-200 */
    --surface: oklch(97.7% 0.004 250);
    --gradient: linear-gradient(180deg, #fbfcff 0%, #f6f8fb 62%, #eef3ff 100%);
    --radius: 8px;
    --font: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
}

@layer base {
  html { font-family: var(--font); scroll-behavior: smooth; }
  body { background: var(--gradient); background-color: var(--surface); color: var(--ink); line-height: 1.5; min-block-size: 100dvh; -webkit-font-smoothing: antialiased; }
  h1, h2, h3 { text-wrap: balance; line-height: 1.15; }
  p { text-wrap: pretty; }
  a { color: var(--primary); }
  :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }
}

@layer layout {
  /* Header */
  .site-header {
    position: sticky; inset-block-start: 0; z-index: 10;
    background: oklch(99% 0.004 255 / 0.94);
    border-block-end: 1px solid oklch(88% 0.02 250 / 0.9);
    backdrop-filter: blur(14px);
  }
  .site-header .bar {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 14px clamp(18px, 5vw, 64px);
  }
  .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
  .brand img { inline-size: 44px; block-size: 44px; border-radius: 50%; border: 1px solid oklch(from var(--ink) l c h / 0.1); background: #fff; }
  .brand strong { font-size: 1.25rem; font-weight: 800; }
  .site-nav { display: flex; align-items: center; gap: 16px; }
  .site-nav a { color: var(--muted-soft); font-size: 14px; font-weight: 700; text-decoration: none; min-block-size: 44px; display: inline-flex; align-items: center; }
  .site-nav a:hover { color: var(--ink); }
  .site-nav .signin {
    color: var(--ink); background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); padding: 10px 16px;
  }
  .site-nav .signin:hover { background: oklch(98.4% 0.003 240); }
  @media (max-width: 767px) { .site-nav a:not(.signin) { display: none; } }

  /* Hero */
  .hero { border-block-end: 1px solid #dfe8f4; }
  @media (min-width: 1024px) { .hero { background: linear-gradient(135deg, #ecf7f2 0%, #f7fbff 48%, #fff6df 100%); } }
  .hero .grid {
    inline-size: min(1180px, 100% - 36px); margin-inline: auto;
    display: grid; gap: 24px; align-items: center; padding-block: 32px;
    grid-template-columns: 1fr;
  }
  @media (min-width: 1024px) { .hero .grid { grid-template-columns: minmax(0, 0.88fr) minmax(400px, 0.96fr); gap: 48px; padding-block: 80px; } }
  .eyebrow { font-size: 13px; font-weight: 900; text-transform: uppercase; color: var(--emerald); }
  .hero h1 { margin-block-start: 14px; max-inline-size: 730px; font-size: clamp(48px, 4vw + 24px, 82px); font-weight: 900; line-height: 0.98; }
  .lede { margin-block-start: 20px; max-inline-size: 620px; font-size: 18px; line-height: 1.7; color: oklch(35% 0.03 255); }
  .lede2 { margin-block-start: 12px; max-inline-size: 576px; font-size: 16px; line-height: 1.7; color: var(--muted); }
  .cta {
    margin-block-start: 24px; display: inline-flex; align-items: center; gap: 8px;
    min-block-size: 44px; border-radius: var(--radius); border: 1px solid var(--ink);
    background: var(--ink); color: #fff; padding: 12px 16px; font-size: 14px; font-weight: 700;
    text-decoration: none; transition: background 0.15s ease;
  }
  .cta:hover { background: oklch(25% 0.03 265); }
  .trust { margin-block-start: 16px; font-size: 14px; font-weight: 600; color: var(--muted); }
  .hero-art { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; border: 1px solid var(--border); background: #eef3f1; box-shadow: 0 18px 50px rgb(28 42 38 / 10%), 0 2px 8px rgb(28 42 38 / 6%); }
  .hero-art img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 30% center; }

  /* Sections */
  .band { border-block: 1px solid var(--border); background: #fff; padding: clamp(40px, 6vw, 72px) clamp(16px, 5vw, 64px); }
  .band .inner { max-inline-size: 1180px; margin-inline: auto; }
  .marker { display: flex; align-items: center; gap: 10px; }
  .marker::before { content: ""; inline-size: 40px; block-size: 11px; border-radius: 999px; background: oklch(48% 0.19 262); box-shadow: 14px 0 0 #def4ef; }
  .marker span { font-size: 13px; font-weight: 900; text-transform: uppercase; color: var(--emerald); }
  .band h2 { margin-block-start: 12px; font-size: clamp(30px, 3vw + 12px, 48px); font-weight: 900; }
  .band .sub { margin-block-start: 16px; max-inline-size: 640px; font-size: 16px; line-height: 1.75; color: var(--muted); }
  .cards { margin-block-start: 28px; display: grid; gap: 16px; grid-template-columns: 1fr; }
  @media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .card { border-radius: var(--radius); border: 1px solid var(--border); background: #fff; padding: 20px; box-shadow: 0 12px 30px rgb(28 42 38 / 7%); }
  .card .num { inline-size: 32px; block-size: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; }
  .num.blue { background: #eff6ff; color: #1d4ed8; }
  .num.green { background: #ecfdf5; color: #047857; }
  .num.amber { background: #fffbeb; color: #b45309; }
  .card h3 { margin-block-start: 16px; font-size: 20px; font-weight: 900; }
  .card p { margin-block-start: 10px; font-size: 14px; line-height: 1.7; color: var(--muted); }

  /* Dark CTA band + footer */
  .cta-band { background: var(--ink); color: #fff; padding: clamp(40px, 5vw, 64px) clamp(16px, 5vw, 64px); }
  .cta-band .inner { max-inline-size: 1180px; margin-inline: auto; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
  @media (min-width: 1024px) { .cta-band .inner { flex-direction: row; justify-content: space-between; align-items: center; } }
  .cta-band .eyebrow { color: #93c5fd; }
  .cta-band h2 { margin-block-start: 12px; font-size: clamp(30px, 3vw, 36px); font-weight: 900; }
  .cta-band p { margin-block-start: 12px; max-inline-size: 672px; font-size: 14px; line-height: 1.7; color: rgb(255 255 255 / 0.7); }
  .cta-band .cta { border-color: #fff; background: #fff; color: var(--ink); }
  .cta-band .cta:hover { background: #eff6ff; }
  .site-footer { background: var(--ink); color: #e2e8f0; border-block-start: 1px solid oklch(30% 0.02 265); }
  .site-footer .inner { max-inline-size: 1152px; margin-inline: auto; display: flex; flex-direction: column; gap: 24px; padding: 32px 16px; }
  @media (min-width: 640px) { .site-footer .inner { flex-direction: row; align-items: center; justify-content: space-between; } }
  .site-footer strong { font-size: 18px; color: #fff; }
  .site-footer .tag { margin-block-start: 4px; max-inline-size: 448px; font-size: 14px; color: #94a3b8; }
  .site-footer .legal { margin-block-start: 12px; font-size: 12px; color: #64748b; }
  .site-footer nav { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 8px; }
  .site-footer nav a { font-size: 14px; font-weight: 500; color: #cbd5e1; text-decoration: none; }
  .site-footer nav a:hover { color: #fff; }

  /* Prose pages (privacy / terms / guide) */
  .prose { background: #fff; }
  .prose .inner { max-inline-size: 768px; margin-inline: auto; padding: 64px 16px; color: oklch(25% 0.02 260); }
  .prose h1 { font-size: 30px; font-weight: 700; margin-block-end: 24px; }
  .prose h2 { font-size: 20px; font-weight: 600; margin-block: 32px 8px; }
  .prose p { margin-block-end: 16px; line-height: 1.7; }
  .prose ul, .prose ol { padding-inline-start: 24px; margin-block-end: 16px; line-height: 1.7; }
  .prose ol { list-style: decimal; }
  .prose ol > li { margin-block-end: 16px; }
  .prose .tip { margin-block: 32px; border-inline-start: 4px solid #3b82f6; background: #eff6ff; padding: 16px; color: #1e3a8a; font-size: 14px; border-radius: 4px; }
  .prose figure { margin-block: 16px; }
  .prose figure img { inline-size: 100%; max-inline-size: 576px; margin-inline: auto; border-radius: var(--radius); box-shadow: 0 1px 4px rgb(0 0 0 / 0.15); }
  .prose figcaption { font-size: 14px; color: oklch(45% 0.02 255); margin-block-start: 8px; text-align: center; }
  .prose kbd { padding: 2px 8px; background: oklch(92% 0.005 250); border-radius: 4px; font-family: inherit; }
  .steps { margin-block-start: 32px; display: grid; gap: 12px; grid-template-columns: 1fr; }
  @media (min-width: 640px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .steps article { border-radius: var(--radius); border: 1px solid var(--border); background: #fff; padding: 16px; box-shadow: 0 1px 2px rgb(0 0 0 / 5%); }
  .steps h2 { margin-block: 12px 0; font-size: 16px; font-weight: 900; }
  .steps p { margin-block: 8px 0; font-size: 14px; line-height: 1.7; color: var(--muted); }

  /* Start page */
  .start .grid { inline-size: min(1180px, 100% - 32px); margin-inline: auto; display: grid; gap: 24px; align-items: start; grid-template-columns: 1fr; padding-block: 40px; }
  @media (min-width: 900px) { .start .grid { grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.58fr); gap: 40px; padding-block: 64px; } }
  .start h1 { margin-block-start: 12px; max-inline-size: 760px; font-size: clamp(42px, 4vw + 18px, 68px); font-weight: 900; line-height: 0.98; }
  .assure { margin-block-start: 32px; max-inline-size: 700px; display: grid; gap: 10px; padding: 0; list-style: none; }
  .assure li { display: flex; gap: 10px; color: var(--muted); line-height: 1.55; }
  .assure li::before { content: "✓"; color: oklch(48% 0.1 180); font-weight: 900; }
  .panel { padding: 24px; border: 1px solid oklch(from var(--primary) l c h / 0.18); border-radius: var(--radius); background: #fff; box-shadow: 0 18px 48px rgb(15 23 42 / 8%); }
  .panel h2 { font-size: 20px; font-weight: 900; }
  .panel ol { list-style: none; padding: 0; margin-block-start: 20px; display: grid; gap: 16px; }
  .panel li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid oklch(93% 0.008 250 / 0.96); border-radius: var(--radius); }
  .panel li:first-child { background: oklch(from var(--primary) l c h / 0.06); }
  .panel .n { inline-size: 34px; block-size: 34px; border-radius: 999px; display: grid; place-items: center; color: #0b4fc4; background: rgb(20 107 255 / 10%); font-weight: 900; }
  .panel strong { font-weight: 900; }
  .panel li p { margin-block-start: 3px; color: var(--muted-soft); font-size: 14px; line-height: 1.5; }
  .back { display: inline-block; margin-block-start: 24px; font-size: 14px; }
}