/* Donara: soft pastel, centred, blossom motif */
body { font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; color: #2b1d4a; background: linear-gradient(180deg, #f4efff 0%, #fbf9ff 45%, #fff 100%); }
a { color: var(--c2); }
.logo svg { height: 40px; width: auto; display: block; }

.top { padding: 18px 20px 0; position: relative; z-index: 5; }
.pill { max-width: 860px; margin: 0 auto; background: rgba(255, 255, 255, .8); backdrop-filter: blur(8px); border: 1px solid #e6dcff;
  border-radius: 99px; display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 22px; gap: 16px; }
.pill nav { display: flex; gap: 24px; font-size: 15px; }
.pill nav a { text-decoration: none; color: #4a3a73; }
.pill-cta { background: var(--c1-soft); color: var(--c2); text-decoration: none; padding: 9px 18px; border-radius: 99px; font-weight: 700; font-size: 14px; }

.btn { display: inline-block; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; padding: 15px 34px; border-radius: 99px;
  text-decoration: none; font-weight: 700; border: 0; font-size: 16px; box-shadow: 0 12px 28px -12px var(--c2); }
.btn:hover { filter: brightness(1.07); }

.hero { position: relative; overflow: hidden; text-align: center; padding: 110px 0 120px; }
.blossom { position: absolute; width: 640px; height: 640px; left: 50%; top: 50%; transform: translate(-50%, -48%) rotate(12deg); opacity: .09; pointer-events: none; }
.hero-in { position: relative; }
.kicker { text-transform: uppercase; letter-spacing: .18em; font-size: 12.5px; font-weight: 700; color: var(--c2); margin: 0 0 18px; }
.hero h1 { font-size: clamp(36px, 5.6vw, 64px); line-height: 1.08; margin: 0 0 22px; font-weight: 800; letter-spacing: -.02em; }
.sub { max-width: 560px; margin: 0 auto 34px; font-size: 18px; line-height: 1.65; color: #5a4b80; }
.notice { max-width: 520px; margin: 40px auto 0; font-size: 14px; line-height: 1.6; color: #5a4b80; background: #fff; border: 1px dashed var(--c1); border-radius: 18px; padding: 14px 20px; }

section h2 { text-align: center; font-size: clamp(28px, 3.6vw, 38px); margin: 0 0 46px; }
.steps { padding: 70px 0; }
.steps ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.steps li { background: #fff; border-radius: 28px; padding: 34px 28px; text-align: center; box-shadow: 0 18px 40px -26px rgba(76, 29, 149, .45); }
.steps li span { display: inline-block; font-size: 13px; font-weight: 800; color: var(--c2); background: var(--c1-soft); border-radius: 99px; padding: 6px 14px; }
.steps h3 { margin: 16px 0 8px; font-size: 20px; }
.steps p { margin: 0; color: #5a4b80; line-height: 1.6; }

.why { padding: 40px 0 100px; }
.why-in { max-width: 760px; }
.why-row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid #ebe3ff; }
.why-row h3 { margin: 0; font-size: 19px; color: var(--c2); }
.why-row p { margin: 0; line-height: 1.7; color: #4a3a73; }

.foot { text-align: center; padding: 50px 0 40px; background: #f4efff; }
.foot .logo { display: inline-block; }
.foot-note, .imprint-line { max-width: 640px; margin: 18px auto 0; font-size: 13px; color: #6f6290; line-height: 1.65; }
.imprint-line { margin-top: 8px; }
.foot-links { margin: 18px 0 6px; font-size: 14px; }
.foot-links a { text-decoration: none; }
.foot-copy { font-size: 12.5px; color: #9285b3; margin: 0; }

.page-auth { background: radial-gradient(circle at 50% 0%, #e9ddff, #fbf9ff 60%); }
.auth h1 { font-size: 24px; margin: 20px 0 28px; }
.auth .logo svg { height: 52px; }
.auth-card { background: #fff; padding: 30px; border-radius: 26px; box-shadow: 0 20px 50px -30px rgba(76, 29, 149, .5); }
.auth-card input { border: 1px solid #ddd0fb; border-radius: 99px; padding-left: 18px; }
.auth-card button { padding: 13px; }
.auth-msg { background: #fff1f2; color: #9f1239; border-radius: 16px; }
.auth-foot { color: #6f6290; }
.page-doc .top { padding-bottom: 10px; }

@media (max-width: 780px) {
  .pill nav { display: none; }
  .steps ol { grid-template-columns: 1fr; }
  .why-row { grid-template-columns: 1fr; gap: 6px; }
  .hero { padding: 70px 0 80px; }
}