/* ==========================================================================
   Rosnil Technology — site stylesheet
   One cohesive sheet powering the marketing pages AND the policy pages.
   Backward-compatible: policy pages rely on .wrap, header.site, footer.site,
   .brand, .badge, h1/h2/h3, p, li, .lead, .updated, table, .card, .links,
   .note, .toc, .back, dl/dt/dd, code — all preserved below.
   New marketing classes (hero, app grid, store badges, device mockups, chips)
   are additive. No @import, no url() to external hosts (CSP: font-src 'self').
   ========================================================================== */

:root {
  /* Shell tokens */
  --brand: #E5322D;          /* legacy alias kept for policy-page accents */
  --ink: #15161B;
  --muted: #5B5F6B;
  --faint: #8A8F9C;
  --line: #E7E8ED;
  --bg: #FFFFFF;
  --panel: #FAF8F5;          /* soft warm panel */
  --soft: #FBEDEC;           /* legacy soft (red tint) used by .note/.toc */
  --card-bg: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(21,22,27,.04), 0 6px 18px rgba(21,22,27,.05);
  --shadow-md: 0 2px 6px rgba(21,22,27,.05), 0 14px 40px rgba(21,22,27,.08);
  --radius: 18px;
  --radius-sm: 12px;

  /* Default per-page accent; individual cards/pages override --accent. */
  --accent: #E5322D;
  --accent-soft: #FBEDEC;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }

/* --------------------------------------------------------------------------
   Layout containers
   Policy pages use plain .wrap (narrow reading measure).
   Marketing pages add .wrap--wide for the ~1040px showcase width.
   -------------------------------------------------------------------------- */
.wrap { max-width: 760px; margin: 0 auto; padding: 40px 22px 80px; }
.wrap--wide { max-width: 1040px; }

/* --------------------------------------------------------------------------
   Header / footer (shared shell)
   -------------------------------------------------------------------------- */
header.site {
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
header.site .wrap { padding-top: 16px; padding-bottom: 16px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.badge {
  width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(160deg, #23242C 0%, #101015 100%);
  color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center;
  font-size: 18px; letter-spacing: -0.5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 8px rgba(21,22,27,.18);
}
.brand b { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; display: block; line-height: 1.15; }
.brand span { display: block; font-size: 12px; color: var(--faint); font-weight: 500; }

footer.site { border-top: 1px solid var(--line); color: var(--faint); font-size: 14px; margin-top: 40px; }
footer.site .wrap { padding-top: 26px; padding-bottom: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
footer.site a { color: var(--faint); text-decoration: none; }
footer.site a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1 { font-size: 30px; line-height: 1.2; letter-spacing: -0.6px; margin: 8px 0 4px; }
h2 { font-size: 20px; margin: 34px 0 10px; letter-spacing: -0.3px; }
h3 { font-size: 16px; margin: 22px 0 6px; }
.updated { color: var(--faint); font-size: 14px; margin: 0 0 8px; }
p, li { color: var(--muted); font-size: 16px; }
a { color: var(--accent); }
.lead { font-size: 18px; color: var(--ink); }

/* Policy tables */
table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border: 1px solid var(--line); vertical-align: top; }
th { background: var(--panel); color: var(--ink); }

/* Definition lists (policy pages) */
dl { margin: 10px 0; }
dt { font-weight: 700; color: var(--ink); margin-top: 12px; font-size: 15px; }
dd { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
h2[id], h3[id] { scroll-margin-top: 80px; }
code { background: #F1F2F5; padding: 1px 6px; border-radius: 5px; font-size: 90%; }

/* Legacy simple card (still used by any un-migrated list) */
.card {
  display: block; text-decoration: none; border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; margin: 12px 0; color: var(--ink); transition: border-color .15s;
}
.card:hover { border-color: var(--accent); }
.card b { font-size: 17px; }
.card p { margin: 4px 0 0; font-size: 14px; }

/* Pill link rows (policy footers, universal-policy list) */
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.links a {
  font-size: 14px; text-decoration: none; border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 15px; color: var(--muted); background: var(--bg);
  transition: border-color .15s, color .15s, background .15s;
}
.links a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.back { display: inline-block; margin-bottom: 18px; font-size: 14px; text-decoration: none; color: var(--faint); }
.back:hover { color: var(--ink); }

.note {
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  background: var(--panel); border-radius: 10px; padding: 14px 18px; margin: 18px 0;
  font-size: 14px; color: var(--ink);
}
.note b { color: var(--ink); }

.toc { border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin: 18px 0 26px; background: var(--panel); }
.toc h2 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { font-size: 14px; margin: 3px 0; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--accent); }

/* ==========================================================================
   MARKETING COMPONENTS (additive)
   ========================================================================== */

/* Section rhythm helpers */
.section { margin: 64px 0 0; }
.section__eyebrow {
  text-transform: uppercase; letter-spacing: 1.4px; font-size: 12px; font-weight: 700;
  color: var(--faint); margin: 0 0 6px;
}
.section__title { font-size: 26px; letter-spacing: -0.5px; margin: 0 0 6px; }
.section__intro { font-size: 16px; color: var(--muted); max-width: 60ch; margin: 0 0 18px; }

/* --------------------------------------------------------------------------
   Hero (homepage)
   -------------------------------------------------------------------------- */
.hero { padding: 76px 0 20px; text-align: center; }
.hero__eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: 1.6px;
  font-size: 12px; font-weight: 700; color: var(--faint); margin: 0 0 18px;
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
}
.hero h1 {
  font-size: clamp(34px, 6vw, 56px); line-height: 1.06; letter-spacing: -1.6px;
  margin: 0 auto 18px; max-width: 16ch; font-weight: 800;
}
.hero__sub { font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); max-width: 54ch; margin: 0 auto; }
.hero__glow {
  position: relative;
}

/* --------------------------------------------------------------------------
   App grid + rich app cards
   -------------------------------------------------------------------------- */
.app-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 8px; }

.app-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 26px 24px; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.app-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent);
}
.app-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

.app-card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.app-icon {
  width: 68px; height: 68px; border-radius: 22%; flex: none; display: block;
  box-shadow: 0 2px 8px rgba(21,22,27,.14), inset 0 0 0 1px rgba(21,22,27,.06);
}
.app-card__title { margin: 0; font-size: 21px; letter-spacing: -0.4px; font-weight: 700; color: var(--ink); }
.app-card__tag { margin: 3px 0 0; font-size: 14px; color: var(--faint); font-weight: 500; }

.app-card__desc { font-size: 15px; color: var(--muted); margin: 2px 0 16px; }

/* Feature chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.chip {
  font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--accent) 72%, var(--ink));
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}

.app-card__footer { margin-top: auto; }
.learn {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 16px;
  font-size: 15px; font-weight: 600; text-decoration: none; color: var(--accent);
}
.learn:hover { gap: 9px; }

/* --------------------------------------------------------------------------
   Store badges
   -------------------------------------------------------------------------- */
.store-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 2px; }
.store {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: #101015; color: #fff; border-radius: 12px; padding: 9px 16px 9px 14px;
  border: 1px solid #101015; min-width: 150px; transition: transform .15s ease, opacity .15s ease;
}
.store:hover { transform: translateY(-1px); }
.store__glyph { flex: none; display: flex; align-items: center; justify-content: center; }
.store__glyph svg { display: block; width: 22px; height: 22px; fill: currentColor; }
.store__text { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.store__text small { font-size: 10px; letter-spacing: .3px; opacity: .82; font-weight: 500; text-transform: none; }
.store__text strong { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }

/* Disabled / coming-soon variant */
.store--soon {
  background: var(--panel); color: var(--faint); border-color: var(--line); cursor: default;
}
.store--soon:hover { transform: none; }
.store--soon .store__glyph svg { fill: var(--faint); opacity: .7; }
.store--soon .store__text small { opacity: .9; }
.store--soon .store__text strong { color: var(--muted); }

/* --------------------------------------------------------------------------
   App page hero (per-app landing)
   -------------------------------------------------------------------------- */
.app-hero {
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
  padding: 40px 0 8px;
}
.app-hero__icon {
  width: 128px; height: 128px; border-radius: 22%; flex: none;
  box-shadow: 0 4px 14px rgba(21,22,27,.16), inset 0 0 0 1px rgba(21,22,27,.06);
}
.app-hero__name { font-size: clamp(30px, 5vw, 44px); letter-spacing: -1px; margin: 0 0 4px; font-weight: 800; line-height: 1.05; }
.app-hero__sub { font-size: 17px; color: var(--faint); font-weight: 600; margin: 0 0 12px; }
.app-hero__lead { font-size: 17px; color: var(--muted); max-width: 52ch; margin: 0 0 20px; }

/* --------------------------------------------------------------------------
   Feature grid ("What's inside")
   -------------------------------------------------------------------------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 10px; }
.feature {
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.feature__ico {
  width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 12px;
}
.feature__ico svg { width: 22px; height: 22px; display: block; }
.feature h3 { margin: 0 0 4px; font-size: 15.5px; color: var(--ink); }
.feature p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }

/* --------------------------------------------------------------------------
   Callout panel (privacy stance)
   -------------------------------------------------------------------------- */
.callout {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 32px; margin-top: 14px;
}
.callout h2 { margin-top: 0; }
.callout p { font-size: 15.5px; }
.callout p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Pure-CSS phone mockups
   -------------------------------------------------------------------------- */
.screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 12px; justify-items: center; }

.device {
  width: 100%; max-width: 260px; aspect-ratio: 9 / 19.5; border-radius: 40px;
  background: #0c0d12; padding: 11px; box-shadow: var(--shadow-md), 0 0 0 1px rgba(21,22,27,.06);
}
.device__screen {
  width: 100%; height: 100%; border-radius: 30px; overflow: hidden; position: relative;
  background: #FAF8F5; display: flex; flex-direction: column;
}
.device__notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 42%; height: 20px; background: #0c0d12; border-radius: 0 0 12px 12px; z-index: 3;
}

/* Screen content — generic scaffolding, palette set per app via --sc-* vars */
.sc {
  --sc-bg: #FAF8F5; --sc-ink: #101B3A; --sc-accent: #B35F00; --sc-gold: #8A6B1E; --sc-line: #E9E2D6;
  padding: 30px 16px 18px; flex: 1; display: flex; flex-direction: column; gap: 10px;
  background: var(--sc-bg); color: var(--sc-ink);
}
/* Parvani mockup palette — Parvani Blue accents (not the default gold), so the
   screen previews match the app's brand. */
.sc--parvani { --sc-accent: #2547C7; --sc-gold: #17318F; }
.sc__top { font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--sc-accent); text-transform: uppercase; }
.sc__h { font-size: 18px; font-weight: 800; letter-spacing: -0.4px; color: var(--sc-ink); margin: 0; line-height: 1.15; }
.sc__hsub { font-size: 11px; color: color-mix(in srgb, var(--sc-ink) 55%, transparent); margin: -4px 0 4px; }

.sc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #fff; border: 1px solid var(--sc-line); border-radius: 12px; padding: 9px 11px;
}
.sc-row__k { font-size: 11px; color: color-mix(in srgb, var(--sc-ink) 60%, transparent); font-weight: 600; }
.sc-row__v { font-size: 12px; color: var(--sc-ink); font-weight: 700; }
.sc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-accent); flex: none; }

.sc-agenda { display: flex; gap: 9px; align-items: flex-start; }
.sc-agenda__time { font-size: 10px; font-weight: 700; color: var(--sc-gold); width: 34px; flex: none; padding-top: 2px; }
.sc-agenda__body { flex: 1; background: #fff; border: 1px solid var(--sc-line); border-radius: 10px; padding: 8px 10px; }
.sc-agenda__t { font-size: 12px; font-weight: 700; color: var(--sc-ink); }
.sc-agenda__d { font-size: 10px; color: color-mix(in srgb, var(--sc-ink) 55%, transparent); }

.sc-bubble {
  align-self: flex-end; max-width: 82%; background: var(--sc-accent); color: #fff;
  font-size: 11.5px; font-weight: 600; padding: 9px 12px; border-radius: 14px 14px 3px 14px; line-height: 1.4;
}
.sc-answer {
  background: var(--sc-ink); color: #fff; border-radius: 3px 14px 14px 14px; padding: 11px 13px;
  font-size: 11px; line-height: 1.55;
}
.sc-answer strong { color: #8FA8FF; font-weight: 700; }
.sc-cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.sc-cal-head span { font-size: 8px; text-align: center; color: color-mix(in srgb, var(--sc-ink) 50%, transparent); font-weight: 700; }
.sc-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.sc-cal i {
  font-style: normal; font-size: 9px; text-align: center; padding: 4px 0; border-radius: 6px;
  color: var(--sc-ink); background: #fff; border: 1px solid var(--sc-line);
}
.sc-cal i.on { background: var(--sc-accent); color: #fff; border-color: var(--sc-accent); font-weight: 700; }
.sc-cal i.mut { color: color-mix(in srgb, var(--sc-ink) 30%, transparent); background: transparent; border-color: transparent; }

.sc-caption { text-align: center; font-size: 13px; color: var(--faint); font-weight: 600; margin-top: 12px; }

/* Parvani palette (default of .sc already navy/saffron on ivory) */
.sc--parvani { --sc-bg: #FAF8F5; --sc-ink: #101B3A; --sc-accent: #B35F00; --sc-gold: #8A6B1E; --sc-line: #E9E2D6; }

/* PDF Maker palette — graphite doc on paper white with red accent */
.sc--pdf { --sc-bg: #F4F5F7; --sc-ink: #23262E; --sc-accent: #E5322D; --sc-gold: #6B7280; --sc-line: #E1E3E8; }
.sc-doc {
  flex: 1; background: #fff; border: 1px solid var(--sc-line); border-radius: 10px;
  padding: 14px 13px; display: flex; flex-direction: column; gap: 7px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.01);
}
.sc-doc__bar { height: 7px; border-radius: 4px; background: #E7E9ED; }
.sc-doc__bar.w1 { width: 62%; background: var(--sc-ink); height: 9px; }
.sc-doc__bar.w2 { width: 100%; }
.sc-doc__bar.w3 { width: 88%; }
.sc-doc__bar.w4 { width: 94%; }
.sc-doc__bar.w5 { width: 70%; }
.sc-badge {
  align-self: flex-start; font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  color: #fff; background: var(--sc-accent); border-radius: 5px; padding: 3px 7px; margin-top: 2px;
}
.sc-size {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; font-weight: 700; color: var(--sc-ink); margin-top: 4px;
}
.sc-size span:last-child { color: var(--sc-accent); }

/* --------------------------------------------------------------------------
   Accent contexts — set --accent + --accent-soft on an element to theme it.
   -------------------------------------------------------------------------- */
.accent-pdf { --accent: #E5322D; --accent-soft: #FBEDEC; }
.accent-parvani { --accent: #B35F00; --accent-soft: #FBF1E3; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .screens { grid-template-columns: 1fr; max-width: 300px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 680px) {
  .app-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .hero { padding: 52px 0 12px; }
  .app-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 18px; padding-top: 28px; }
  .app-hero__lead { margin-left: auto; margin-right: auto; }
  .store-row { justify-content: center; }
  .callout { padding: 24px 22px; }
}

/* --------------------------------------------------------------------------
   Dark mode — simple, correct shell inversion.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F3F4F7;
    --muted: #AEB2BE;
    --faint: #7E838F;
    --line: #2A2C34;
    --bg: #0D0E12;
    --panel: #16171D;
    --card-bg: #14151A;
    --soft: #241416;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
    --shadow-md: 0 2px 6px rgba(0,0,0,.45), 0 14px 40px rgba(0,0,0,.5);
    --accent-soft: #241416;
  }
  header.site { background: rgba(13,14,18,.82); }
  .badge { background: linear-gradient(160deg, #2C2E38 0%, #16171D 100%); }
  th { background: var(--panel); }
  code { background: #1C1D24; }
  .store { background: #E9EAEE; color: #0D0E12; border-color: #E9EAEE; }
  .store--soon { background: var(--panel); color: var(--faint); border-color: var(--line); }
  .store--soon .store__text strong { color: var(--muted); }
  .accent-pdf { --accent-soft: #2A1615; }
  .accent-parvani { --accent-soft: #241B10; }
  /* Device mockup interiors keep their real app palette (light ivory / paper)
     intentionally — the physical phone is dark, the screen shows the app. */
}