/* Dinlora site styles.
 *
 * One small sheet on top of /_swazor/swazor.css (which styles only the swz- classes and the connecting shell).
 * Every colour, radius and shadow is a token below, named after the roles of Swazor's token vocabulary
 * (docs/THEMING.md: background, foreground, card, muted, muted-foreground, primary, primary-foreground,
 * border, link, radius-*). Moving to Swazor's token sheet means pointing these at the matching --swz-* tokens. */

:root {
  --dl-background: #f6f7fb;
  --dl-foreground: #10153a;
  --dl-card: #ffffff;
  --dl-muted: #eceef7;
  --dl-muted-foreground: #4b5274;
  --dl-primary: #3a4ee8;
  --dl-primary-foreground: #ffffff;
  --dl-accent: #e7eaff;
  --dl-border: #dde0ee;
  --dl-link: #3343d6;
  --dl-link-hover: #1f2db0;
  --dl-shadow: 0 1px 2px rgba(16, 21, 58, 0.06), 0 8px 24px -12px rgba(16, 21, 58, 0.18);
  --dl-device-shadow: 0 0 0 1px rgba(16, 21, 58, 0.08), 0 28px 60px -28px rgba(16, 21, 58, 0.45);
  --dl-glow: rgba(58, 78, 232, 0.14);
  --dl-brand-gradient: linear-gradient(90deg, #00dcf2, #1888f8, #2f5ef4, #6b4df0);
  --dl-radius-sm: 8px;
  --dl-radius-md: 14px;
  --dl-radius-lg: 22px;
  --dl-radius-full: 9999px;
  --dl-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --dl-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --dl-container: 1120px;
  --dl-gutter: clamp(16px, 4vw, 32px);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --dl-background: #0a0f26;
    --dl-foreground: #e9ecfa;
    --dl-card: #121937;
    --dl-muted: #0e1430;
    --dl-muted-foreground: #a9b0cf;
    --dl-primary: #8ea2ff;
    --dl-primary-foreground: #0a0f26;
    --dl-accent: #1c2552;
    --dl-border: #242d57;
    --dl-link: #9db0ff;
    --dl-link-hover: #c3cfff;
    --dl-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px -14px rgba(0, 0, 0, 0.6);
    --dl-device-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 70px -30px rgba(0, 0, 0, 0.85);
    --dl-glow: rgba(92, 112, 255, 0.22);
  }
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--dl-background);
  color: var(--dl-foreground);
  font-family: var(--dl-font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.card p:last-child, .section-head p:last-child, .hero-copy p:last-child, .footer-brand p { margin-bottom: 0; }

a { color: var(--dl-link); text-underline-offset: 0.18em; text-decoration-thickness: from-font; }
a:hover { color: var(--dl-link-hover); }
:focus-visible { outline: 2px solid var(--dl-primary); outline-offset: 3px; border-radius: 4px; }

img { max-width: 100%; height: auto; display: block; }
code { font-family: var(--dl-font-mono); font-size: 0.9em; background: var(--dl-muted); border-radius: 6px; padding: 0.1em 0.35em; overflow-wrap: anywhere; }

.container { width: 100%; max-width: var(--dl-container); margin: 0 auto; padding: 0 var(--dl-gutter); }
.narrow { max-width: 760px; }
.center { text-align: center; }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 20;
  padding: 8px 14px; border-radius: var(--dl-radius-sm);
  background: var(--dl-primary); color: var(--dl-primary-foreground); text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Layout */

.site { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.site-main { flex: 1; outline: none; }

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--dl-background) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--dl-border) 70%, transparent);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--dl-foreground); text-decoration: none; font-weight: 650; font-size: 1.15rem; letter-spacing: -0.01em; }
.brand:hover { color: var(--dl-foreground); }
.brand img { width: 32px; height: 32px; border-radius: 8px; }

.site-nav { display: flex; gap: 4px; }
.site-nav a {
  color: var(--dl-muted-foreground); text-decoration: none; font-weight: 550; font-size: 0.97rem;
  padding: 8px 12px; border-radius: var(--dl-radius-full);
}
.site-nav a:hover { color: var(--dl-foreground); background: var(--dl-muted); }
.site-nav a.active { color: var(--dl-foreground); background: var(--dl-accent); }

.site-footer { border-top: 1px solid var(--dl-border); padding: 40px 0 48px; color: var(--dl-muted-foreground); font-size: 0.95rem; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px; }
.footer-brand { display: flex; gap: 12px; align-items: center; }
.footer-brand img { width: 36px; height: 36px; border-radius: 9px; }
.footer-brand strong { color: var(--dl-foreground); }
.footer-brand p { margin: 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-nav a { color: var(--dl-muted-foreground); text-decoration: none; }
.footer-nav a:hover, .footer-nav a.active { color: var(--dl-foreground); text-decoration: underline; }

/* Home */

.hero { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 7vw, 96px); }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70%; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, var(--dl-glow), transparent);
}
.hero-inner { position: relative; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.hero-icon { width: 88px; height: 88px; border-radius: 20px; margin-bottom: 24px; box-shadow: var(--dl-shadow); }
.eyebrow { font-size: 0.85rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dl-primary); margin-bottom: 12px; }
.lead { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); color: var(--dl-muted-foreground); max-width: 36em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: var(--dl-radius-full);
  background: var(--dl-accent); color: var(--dl-foreground); font-weight: 650; font-size: 0.95rem;
}
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dl-brand-gradient); }
.text-link { font-weight: 600; }

.device { border-radius: 2.2rem; overflow: hidden; box-shadow: var(--dl-device-shadow); background: var(--dl-card); }
.device img { width: 100%; }
.hero-device { width: min(300px, 78vw); margin: 0 auto; }
.device-ipad { border-radius: 1.6rem; }

.section { padding: clamp(48px, 7vw, 88px) 0; }
.section-alt { background: var(--dl-muted); }
.section-head { max-width: 760px; margin-bottom: 36px; }
.section-lead { color: var(--dl-muted-foreground); font-size: 1.1rem; }
.center .section-lead, .center p { margin-left: auto; margin-right: auto; }

.card { background: var(--dl-card); border: 1px solid var(--dl-border); border-radius: var(--dl-radius-md); padding: 24px; box-shadow: var(--dl-shadow); }
.card h3 { margin-bottom: 0.4em; }
.card p { color: var(--dl-muted-foreground); }

.feature-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
.feature-icon { position: relative; display: block; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 12px; background: var(--dl-accent); }
.feature-icon::after {
  content: ""; position: absolute; inset: 10px; background: var(--dl-primary);
  -webkit-mask: var(--dl-icon) center / contain no-repeat; mask: var(--dl-icon) center / contain no-repeat;
}
.icon-wave { --dl-icon: url("/img/icons/wave.svg"); }
.icon-people { --dl-icon: url("/img/icons/people.svg"); }
.icon-notes { --dl-icon: url("/img/icons/notes.svg"); }
.icon-summary { --dl-icon: url("/img/icons/summary.svg"); }
.icon-search { --dl-icon: url("/img/icons/search.svg"); }
.icon-group { --dl-icon: url("/img/icons/group.svg"); }

.gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; grid-template-columns: 1fr; justify-items: center; }
.gallery figure { margin: 0; width: min(260px, 72vw); }
.gallery .device { border-radius: 1.9rem; }
figcaption { margin-top: 14px; text-align: center; color: var(--dl-muted-foreground); font-size: 0.95rem; }

.privacy-grid, .platform-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.privacy-more { margin-top: 28px; color: var(--dl-muted-foreground); }
.privacy-more a { font-weight: 600; }

.ipad-figure { margin: 48px auto 0; max-width: 760px; }

.coming-soon h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); }
.center-actions { margin-top: 28px; display: flex; justify-content: center; }
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px;
  border-radius: var(--dl-radius-full); background: var(--dl-primary); color: var(--dl-primary-foreground);
  font-weight: 650; text-decoration: none;
}
.button:hover { color: var(--dl-primary-foreground); filter: brightness(1.08); }

/* Text pages */

.page { padding: clamp(36px, 6vw, 72px) 0 clamp(48px, 7vw, 88px); }
.prose { max-width: calc(46rem + 2 * var(--dl-gutter)); }
.prose h1 { margin-bottom: 0.3em; }
.prose > header { margin-bottom: 1.6em; }
.prose h2 { font-size: 1.4rem; margin-top: 2em; }
.prose section h2:first-child { margin-top: 1.8em; }
.prose ul { padding-left: 1.25em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.45em; }
.prose li::marker { color: var(--dl-muted-foreground); }
.prose .meta { color: var(--dl-muted-foreground); }
.prose .lead { margin-top: 0.6em; }
.prose address { font-style: normal; line-height: 1.7; }
.summary { background: var(--dl-card); border: 1px solid var(--dl-border); border-radius: var(--dl-radius-md); padding: 18px 22px 18px 40px !important; box-shadow: var(--dl-shadow); }

.faq { margin: 0; }
.faq-item { padding: 18px 0; border-top: 1px solid var(--dl-border); }
.faq-item:last-child { border-bottom: 1px solid var(--dl-border); }
.faq dt { font-weight: 650; margin-bottom: 6px; }
.faq dd { margin: 0; color: var(--dl-muted-foreground); }

/* Information that has to stand apart from the rest (the right to object, Art. 21(4) GDPR) */

.notice {
  background: var(--dl-card); border: 1px solid var(--dl-border); border-left: 4px solid var(--dl-primary);
  border-radius: var(--dl-radius-md); padding: 4px 22px; margin-top: 2em; box-shadow: var(--dl-shadow);
}
.notice h2 { margin-top: 0.9em !important; }

/* A long address must not push a phone-wide page sideways. */
.email { overflow-wrap: anywhere; }

/* The first paint until the server's page arrives, and the page without JavaScript */

.shell-main { display: flex; align-items: center; justify-content: center; }
.site .swz-connecting {
  min-height: calc(100dvh - 65px); width: 100%;
  background: transparent; color: var(--dl-muted-foreground); font-family: var(--dl-font-sans);
  --swz-primary: var(--dl-primary);
}
.noscript { padding: 48px var(--dl-gutter); }
.noscript ul { padding-left: 1.25em; }

/* Wider screens */

@media (min-width: 640px) {
  .feature-grid, .privacy-grid, .platform-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .gallery figure { width: 100%; max-width: 260px; }
}

@media (min-width: 960px) {
  .hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; }
  .hero-device { width: 300px; margin: 0 0 0 auto; }
  .feature-grid, .privacy-grid, .platform-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 639px) {
  .audience p { text-align: left; }
}

@media (max-width: 420px) {
  .site-nav a { padding: 8px 9px; }
  .brand { font-size: 1.05rem; }
}