/* sivio.ai — the app's own look (Direction B): one soft canvas, surfaces pressed out of it and into it,
   Sivio purple, New York headlines with SF Pro. Light and dark follow the visitor's setting.
   No web fonts: ui-serif is New York on Apple devices; other systems fall back to Georgia. */

:root {
  --bg: #e9e8f0;
  --raise: #eeedf4;
  --ink: #211e29;
  --ink2: #514d63;
  --ink3: #67637a;
  --accent: #6a3baf;
  --brand: #7e4fcb;
  --brand-deep: #5b2f9e;
  --soft: rgba(139, 92, 198, .12);
  --hi: rgba(255, 255, 255, .92);
  --lo: rgba(103, 90, 140, .26);
  --edge: rgba(255, 255, 255, .6);
  --tick: #157a41;
  --warn: #8f4c00;
  --led: #5e3399; --led-soft: rgba(139, 92, 198, .14);
  --did: #0b6e7c; --did-soft: rgba(11, 110, 124, .10);
  --helped: #8e4c00; --helped-soft: rgba(196, 110, 0, .12);
  --mark: rgba(139, 92, 198, .22);
  --frame: #1b1820;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --raised: -8px -8px 18px var(--hi), 9px 11px 22px var(--lo);
  --raised-sm: -4px -4px 10px var(--hi), 5px 6px 12px var(--lo);
  --inset: inset 4px 4px 9px var(--lo), inset -4px -4px 9px var(--hi);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2c3036;
    --raise: #31363c;
    --ink: #eeecf3;
    --ink2: #b1aebc;
    --ink3: #8f8c9b;
    --accent: #c3a6f6;
    --brand: #8656d3;
    --brand-deep: #6a3bb5;
    --soft: rgba(164, 123, 234, .15);
    --hi: rgba(255, 255, 255, .055);
    --lo: rgba(0, 0, 0, .5);
    --edge: rgba(255, 255, 255, .04);
    --tick: #5fe0a0;
    --warn: #f4b562;
    --led: #c9aef5; --led-soft: rgba(164, 123, 234, .16);
    --did: #6fd6e0; --did-soft: rgba(111, 214, 224, .13);
    --helped: #f4b562; --helped-soft: rgba(244, 181, 98, .13);
    --mark: rgba(164, 123, 234, .32);
    --frame: #121316;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block }
a { color: var(--accent); text-underline-offset: .18em }
a:hover { text-decoration-thickness: 2px }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -.005em }
p { margin: 0 }
ul, ol { margin: 0 }

.container { width: 100%; max-width: 1140px; margin: 0 auto; padding-inline: 20px }
.narrow { max-width: 760px; margin: 0 auto; padding-inline: 20px }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 12px; background: var(--raise); box-shadow: var(--raised-sm); font-weight: 600 }
.skip-link:focus { top: 12px }

.eyebrow { display: inline-block; font: 600 .78rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent) }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px) }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; flex-wrap: wrap }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 1.3rem/1 var(--serif); color: var(--ink); text-decoration: none }
.brand img, .brand-mark { width: 34px; height: 34px; border-radius: 9px; box-shadow: var(--raised-sm) }
.brand-mark { display: inline-grid; place-items: center; background: var(--brand); color: #fff; font: 700 1rem/1 var(--sans) }
.site-nav ul { list-style: none; padding: 0; display: flex; gap: 6px 20px; flex-wrap: wrap }
.site-nav a { color: var(--ink2); text-decoration: none; font-size: .95rem; font-weight: 500 }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent) }

/* ---------- buttons and pills ---------- */
.soon { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 24px; border-radius: 18px; color: #fff;
        background: linear-gradient(135deg, var(--brand), var(--brand-deep)); font: 700 .85rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
        box-shadow: 0 10px 26px rgba(116, 67, 184, .38), -5px -5px 12px var(--hi) }
.soon svg { width: 20px; height: 20px; flex: none }
.facts { color: var(--ink3); font-size: .92rem }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px }

/* ---------- hero ---------- */
.hero { padding-block: 40px 70px }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center }
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.1rem); margin-top: 16px }
.hero h1 em { color: var(--accent); font-style: italic }
.lead { font-size: 1.18rem; color: var(--ink2); margin-top: 22px; max-width: 34em }
.hero-art { position: relative; display: grid; place-items: center; min-height: 520px }
.disc { position: absolute; width: min(340px, 78%); aspect-ratio: 1; border-radius: 50%; background: var(--bg); box-shadow: var(--raised); left: 0; top: 30px }
.disc::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; box-shadow: var(--inset) }
.hero-art .mascot { position: absolute; width: min(250px, 58%); left: 4%; top: 6px; z-index: 2; filter: drop-shadow(0 18px 24px rgba(60, 30, 110, .18)) }
.hero-art .phone { position: relative; z-index: 3; width: min(270px, 62%); margin-left: auto; margin-top: 110px }

/* ---------- phones ---------- */
.phone { border-radius: 38px; padding: 7px; background: var(--frame); box-shadow: 0 24px 50px rgba(30, 15, 60, .28), -8px -8px 18px var(--hi) }
.phone img { width: 100%; border-radius: 31px; aspect-ratio: 402 / 874; object-fit: cover }

/* ---------- sections ---------- */
.section { padding-block: 72px }
.section-head { max-width: 46em; margin-bottom: 40px }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-top: 10px }
.section-head p { color: var(--ink2); font-size: 1.1rem; margin-top: 14px }
.card { background: var(--bg); border-radius: 24px; box-shadow: var(--raised); border: 1px solid var(--edge); padding: 24px }

.h2-big { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-top: 10px }
.lead-sm { font-size: 1.05rem }
.ticks.flush { margin-top: 0 }
.section-head.flush { margin-bottom: 0 }

/* how it works */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; counter-reset: step }
.steps li { display: grid; gap: 18px; align-content: start; counter-increment: step }
.steps .phone { width: min(230px, 100%); margin-inline: auto }
.steps h3 { font-size: 1.3rem; display: flex; align-items: baseline; gap: 10px }
.steps h3::before { content: counter(step); flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
                    font: 700 .95rem/1 var(--sans); color: var(--accent); background: var(--bg); box-shadow: var(--raised-sm); transform: translateY(-3px) }
.steps p { color: var(--ink2) }

/* truth lock */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start }
.example { display: grid; gap: 18px }
.example .label { font: 600 .78rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3) }
.example .card { padding: 20px 22px }
.role-line { font-size: .88rem; color: var(--ink3); margin-bottom: 10px }
.fact { display: flex; gap: 12px; align-items: flex-start }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 13px; font: 700 .78rem/1 var(--sans); letter-spacing: .04em; flex: none }
.tag-led { background: var(--led-soft); color: var(--led) }
.tag-did { background: var(--did-soft); color: var(--did) }
.tag-helped { background: var(--helped-soft); color: var(--helped) }
mark { background: var(--mark); color: var(--ink); border-radius: 4px; padding: 0 2px }
.checks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; color: var(--tick); font-size: .9rem; font-weight: 600 }
.checks li::before { content: "✓ " }
.rejected { box-shadow: var(--inset) !important; border: none !important }
.rejected .verdict { color: var(--warn); font-weight: 700; font-size: .92rem }
.rejected .struck { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink3); margin-top: 6px }
.source { font-size: .88rem; color: var(--ink3); margin-top: 10px }
.rules { padding-left: 1.2em; display: grid; gap: 8px; margin-top: 16px; color: var(--ink2) }
.levels { display: grid; gap: 12px; margin: 22px 0 0 }
.levels div { display: flex; gap: 14px; align-items: center }
.levels dd { margin: 0; color: var(--ink2) }
.note { margin-top: 22px; padding: 18px 20px; border-radius: 18px; box-shadow: var(--inset); color: var(--ink2); font-size: .95rem; display: grid; gap: 8px }

/* designs */
.designs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px }
.designs figure { margin: 0; display: grid; gap: 12px }
.designs .page { border-radius: 10px; background: #fff; padding: 6px; box-shadow: var(--raised) }
.designs .page img { border-radius: 6px; aspect-ratio: 367 / 520; object-fit: cover; object-position: top }
.designs figcaption { display: flex; justify-content: space-between; gap: 8px; font-weight: 600 }
.designs figcaption span { color: var(--accent); font-weight: 600; font-size: .85rem }
.design-notes { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; color: var(--ink2) }

/* feature rows (track, data) */
.feature { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center }
.feature .phone { width: min(280px, 100%); margin-inline: auto }
.ticks { list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 24px }
.ticks li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink2) }
.ticks li::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px; background: var(--bg) no-repeat center / 14px;
                    box-shadow: var(--raised-sm);
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e4fcb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") }

/* plans */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px }
.plan { display: grid; gap: 10px; align-content: start }
.plan h3 { font-size: 1.35rem }
.plan .price { font: 700 2rem/1 var(--serif) }
.plan .price small { font: 500 .9rem/1 var(--sans); color: var(--ink3) }
.plan .sub { color: var(--ink3); font-size: .9rem }
.plan ul { padding-left: 1.1em; display: grid; gap: 6px; color: var(--ink2); font-size: .95rem; margin-top: 6px }
.plan.free { box-shadow: var(--inset); border: none }
.fine { margin-top: 26px; color: var(--ink3); font-size: .88rem; max-width: 60em }

/* invite strip */
.invite-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center }
.invite-strip img { width: 120px }
.invite-strip h2 { font-size: clamp(1.6rem, 3vw, 2.2rem) }
.invite-strip p { color: var(--ink2); margin-top: 10px }

/* faq (home and support) */
.faq { display: grid; gap: 14px }
.faq details { background: var(--bg); border-radius: 18px; box-shadow: var(--raised-sm); border: 1px solid var(--edge) }
.faq summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 22px; font-weight: 600; position: relative }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font: 400 1.5rem/1 var(--sans); color: var(--accent) }
.faq details[open] summary::after { content: "–" }
.faq .answer { padding: 0 22px 20px; color: var(--ink2); display: grid; gap: 10px }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start }

/* ---------- legal pages (privacy, terms, support) ---------- */
.doc { padding-block: 32px 72px }
.page-head { margin-bottom: 28px }
.page-head h1 { font-size: clamp(2.1rem, 5vw, 3rem) }
.meta { color: var(--ink3); font-size: .92rem; margin-top: 10px }
.summary, .contact-card { background: var(--bg); border-radius: 24px; box-shadow: var(--raised); border: 1px solid var(--edge); padding: 24px 26px; margin-bottom: 28px }
.summary h2, .contact-card h2 { font-size: 1.35rem; margin-bottom: 12px }
.summary ul { padding-left: 1.2em; display: grid; gap: 8px; color: var(--ink2) }
.toc { border-radius: 20px; box-shadow: var(--inset); padding: 20px 24px; margin-bottom: 36px }
.toc h2 { font: 600 .8rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin-bottom: 10px }
.toc ol { padding-left: 1.3em; display: grid; gap: 4px }
.doc section { margin-top: 40px; display: grid; gap: 14px; scroll-margin-top: 90px }
.doc section > h2 { font-size: 1.6rem }
.doc h3 { font-size: 1.2rem; margin-top: 8px }
.doc p, .doc li, .doc dd { color: var(--ink2) }
.doc ul, .doc ol { padding-left: 1.2em; display: grid; gap: 6px }
.doc blockquote { margin: 0; padding: 16px 20px; border-radius: 16px; box-shadow: var(--inset) }
.doc blockquote p { color: var(--ink) }
.doc blockquote cite { display: block; margin-top: 8px; color: var(--ink3); font-size: .9rem; font-style: normal }
.data-list { display: grid; gap: 12px; margin: 0 }
.data-list > div { border-radius: 16px; box-shadow: var(--raised-sm); padding: 14px 18px; border: 1px solid var(--edge) }
.data-list dt { font-weight: 700; color: var(--ink) }
.data-list dd { margin: 6px 0 0 }
.path { font-weight: 600; color: var(--ink); white-space: nowrap }
.contact-card .email { font: 700 1.4rem/1.3 var(--serif); margin-bottom: 10px }
.contact-card p + p { margin-top: 10px }

/* invite page (/i/CODE, made by worker.js) */
.invite .invite-code { font-size: 2.2rem; letter-spacing: .18em; font-weight: 700; margin: .4em 0 .6em }
.invite ol { padding-left: 1.2em; display: grid; gap: .4em }
.invite .button { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 16px; color: #fff; font-weight: 700; text-decoration: none;
                  background: linear-gradient(135deg, var(--brand), var(--brand-deep)); box-shadow: 0 10px 24px rgba(116, 67, 184, .35) }

/* ---------- footer ---------- */
.site-footer { padding-block: 40px 56px; margin-top: 30px; color: var(--ink3); font-size: .9rem }
.site-footer .container { display: grid; gap: 8px; padding-top: 28px; background: linear-gradient(var(--lo), var(--lo)) no-repeat center top / calc(100% - 40px) 1px }
.site-footer ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 8px }
.site-footer a { color: var(--ink2) }

/* ---------- narrow screens ---------- */
@media (max-width: 960px) {
  .hero-grid, .split, .feature, .faq-grid { grid-template-columns: minmax(0, 1fr) }
  .hero-art { min-height: 0; padding-top: 20px }
  .hero-art .phone { margin-top: 140px; margin-right: 4%; width: min(250px, 60%) }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 22px }
  .designs { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .feature .phone { order: 2 }
}
@media (max-width: 560px) {
  body { font-size: 16px }
  .hero { padding-block: 20px 40px }
  .section { padding-block: 48px }
  .steps, .plans { grid-template-columns: minmax(0, 1fr) }
  .steps .phone { width: min(240px, 80%) }
  .designs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px }
  .invite-strip { grid-template-columns: minmax(0, 1fr) }
  .invite-strip img { width: 96px }
  .site-nav ul { gap: 4px 14px }
  .card { padding: 20px }
  .soon { width: 100%; justify-content: center; letter-spacing: .08em; font-size: .8rem; padding: 0 16px }
}