/* Approved SyncMend identity. Native CSS, not Apple Liquid Glass.
   Variance 7 / motion 6 / density 4. Layers: content 0, header 10, skip link 20.
   Shape scale: panels 22px, fields 12px, controls pill; logos remain unmodified. */
:root {
  --background:#f3f6fc; --surface:#fafbff; --surface-strong:#e9eefb;
  --line:#ccd5e8; --text:#15223d; --muted:#52617c;
  --accent:#6240b4; --accent-text:#fafbff; --glass:rgb(243 246 252 / 94%);
  --blue:#187fba; --indigo:#435ac5; --purple:#6938b8;
  --brand-gradient:linear-gradient(110deg,#6938b8,#435ac5 55%,#1874ac);
  --lift-shadow:0 18px 50px rgb(49 70 134 / 13%);
}
@media(prefers-color-scheme:dark) {
  :root {
    --background:#0e1628; --surface:#172239; --surface-strong:#1b2944;
    --line:#364968; --text:#eef3ff; --muted:#b4c3dd;
    --accent:#b7baff; --accent-text:#15223d; --glass:rgb(14 22 40 / 94%);
    --lift-shadow:0 20px 65px rgb(4 12 32 / 40%);
  }
}
body { background:radial-gradient(ellipse at 92% 0, rgb(73 102 211 / 10%), transparent 38rem),var(--background); }
.site-header { box-shadow:0 1px 0 rgb(73 102 211 / 8%); }
.nav { min-height:76px; }
.wordmark { gap:9px; flex-shrink:0; padding:7px 10px; border-radius:12px; background:#eef2fc; }
.wordmark .brand-symbol { width:34px; height:auto; }
.wordmark .brand-wordmark { width:142px; height:auto; }
.nav-links { gap:24px; }
.nav-links a { position:relative; }
.nav-links a::after { content:""; position:absolute; bottom:-6px; left:0; right:0; height:2px; background:var(--brand-gradient); transform:scaleX(0); transform-origin:left; }
.nav-links a:hover::after,.nav-links a[aria-current=page]::after { transform:scaleX(1); }
.nav-action { border-color:var(--accent); }
.button-primary { background:var(--brand-gradient); color:#fafbff; border-color:#6b70c9; }
.button-secondary { background:var(--surface); }
.button,.nav-action { white-space:nowrap; }
.hero { min-height:620px; padding-block:76px; gap:42px; grid-template-columns:1fr 1.15fr; position:relative; isolation:isolate; }
.hero h1 { font-size:clamp(44px,4.5vw,64px); letter-spacing:-.055em; }
.hero-text { max-width:390px; }
.hero .eyebrow { color:var(--accent); }
.hero-media { padding:10px; border:1px solid var(--line); border-radius:28px; background:linear-gradient(135deg,rgb(105 56 184 / 13%),rgb(24 127 186 / 12%)); box-shadow:var(--lift-shadow); }
.hero-media img { border-radius:18px; box-shadow:none; }
.hero-media figcaption { margin:12px 0 4px; }
.hero::before { content:""; position:absolute; z-index:-1; inset:3% -1% 5% 36%; border-radius:50%; background:radial-gradient(ellipse at 35% 30%,rgb(105 56 184 / 19%),transparent 55%),radial-gradient(ellipse at 65% 68%,rgb(24 127 186 / 16%),transparent 55%); pointer-events:none; }
.trust-line { border-top:0; }
.trust-line strong { color:var(--accent); }
.workflow-note { background:linear-gradient(145deg,rgb(105 56 184 / 7%),rgb(24 127 186 / 9%)),var(--surface); box-shadow:inset 0 1px rgb(150 173 230 / 12%); }
.workflow-copy li { border-left:1px solid var(--line); margin-left:12px; padding-left:38px; }
.workflow-copy li::before { background:var(--background); left:-12px; padding:0 4px; }
.demo-section { background:var(--surface-strong); color:var(--text); border-block:1px solid var(--line); }
.demo-heading { display:block; }
.demo-heading>p { max-width:620px; margin-top:22px; }
.demo-grid video { border-color:var(--line); box-shadow:var(--lift-shadow); }
.demo-section p,.demo-section figcaption,.demo-label span:last-child { color:var(--muted); }
.demo-section .eyebrow { color:var(--accent); }
.privacy-facts p:first-child { border-color:var(--accent); }
.pricing-section { background:linear-gradient(135deg,rgb(105 56 184 / 6%),rgb(24 127 186 / 6%)),var(--surface-strong); }
.plan { box-shadow:inset 0 1px rgb(150 173 230 / 12%); }
.plan.featured { background:linear-gradient(150deg,rgb(105 56 184 / 10%),rgb(24 127 186 / 8%)),var(--surface); border-color:#777de0; box-shadow:var(--lift-shadow); }
.panel,.notice,.workflow-note { border-color:var(--line); }
.method-choice:has(input:checked) { background:linear-gradient(110deg,rgb(105 56 184 / 7%),rgb(24 127 186 / 6%)),var(--surface); }
.product-icon { width:96px; height:96px; padding:8px; border-radius:22px; background:#eef2fc; }
.blog-feature img,.article-card img,.article-cover img { border:1px solid var(--line); }
.closing { position:relative; isolation:isolate; }
.closing::before { content:""; position:absolute; inset:15% 22%; z-index:-1; pointer-events:none; background:radial-gradient(ellipse,rgb(73 102 211 / 12%),transparent 68%); }
.brand-signoff { width:92px; height:auto; margin:0 auto 28px; }
.home-reading { grid-template-columns:1.2fr 1fr; gap:28px 48px; }
.home-reading article:first-child { grid-row:span 2; }
.home-reading article:first-child img { width:100%; border-radius:16px; margin-bottom:24px; border:1px solid var(--line); }
.home-reading h3 { margin-bottom:14px; }
.footer .wordmark { width:max-content; }
.footer .wordmark .brand-wordmark { width:125px; }
.footer .wordmark .brand-symbol { width:30px; }
/* A brief blue/violet light sweep introduces the product; never loops indefinitely. */
@media(prefers-reduced-motion:no-preference) {
  .hero::before { animation:brand-light 4s ease-out both; }
  .hero-copy { animation:brand-enter .7s cubic-bezier(.16,1,.3,1) both; }
  .hero-media { animation:brand-enter .9s .12s cubic-bezier(.16,1,.3,1) both; }
  .motion-enter { animation:brand-enter .65s cubic-bezier(.16,1,.3,1) both; }
  .button,.nav-action,.plan,.article-card img,.nav-links a::after { transition:transform .22s ease,box-shadow .22s ease; }
  .button:hover:not(:disabled),.nav-action:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgb(73 102 211 / 22%); }
  .button:active:not(:disabled) { transform:translateY(0); }
  .plan:hover { transform:translateY(-4px); box-shadow:var(--lift-shadow); }
  .article-card:hover img { transform:translateY(-3px); }
}
@keyframes brand-enter { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes brand-light { from { opacity:.35; transform:translate(-24px,10px) scale(.9); } to { opacity:1; transform:none; } }
/* Focus is never hidden while an entry animation is running. */
.motion-enter:focus-within { animation:none; }
@media(min-width:761px) and (max-width:1100px) {
  .hero { grid-template-columns:1fr 1fr; text-align:left; gap:26px; min-height:530px; padding-block:58px; }
  .hero h1 { font-size:44px; }
  .hero-actions { justify-content:flex-start; }
  .hero-copy { margin:0; }
  .nav-links { gap:16px; }
  .nav { gap:16px; }
}
@media(max-width:760px) {
  .home-reading { grid-template-columns:1fr; }
  .hero { grid-template-columns:1fr; min-height:0; padding-block:44px; gap:34px; text-align:left; }
  .hero-copy { margin:0; }
  .hero h1 { font-size:clamp(40px,9vw,60px); }
  .hero-actions { justify-content:flex-start; }
  .hero-text { margin-inline:0; }
  .hero-media { border-radius:20px; padding:7px; }
  .hero-media img { border-radius:13px; }
  .hero::before { inset:30% 0 0; }
  .wordmark { padding:7px 8px; gap:6px; }
  .wordmark .brand-symbol { width:26px; }
  .wordmark .brand-wordmark { width:118px; }
  .nav-action { padding:8px 12px; }
  .nav { gap:10px; }
  .hero-actions .button { white-space:normal; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
@media(prefers-reduced-transparency:reduce) { .site-header { backdrop-filter:none; background:var(--background); } }