/* Landing page (design: "Landing Page.dc.html"). Fixed 1440px canvas.
   Page rules are scoped under .onay-landing, dialog rules under .onay-dialog,
   so page-level styles can't leak in. Loaded only by index.html. */

html, body { margin: 0; background: #ffffff; }
body.landing-login-open { overflow: hidden; }

.onay-landing {
  min-width: 1440px;
  margin: 0;
  padding: 0;
  background: #ffffff;
  font-family: "Inter", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color: #1f2a33;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.onay-landing *,
.onay-landing *::before,
.onay-landing *::after { box-sizing: border-box; }
.onay-landing a { color: inherit; text-decoration: none; }
.onay-landing p,
.onay-landing h1,
.onay-landing h2,
.onay-landing h3 { margin: 0; padding: 0; }
.onay-landing svg { display: inline; max-width: none; }

.onay-landing .ol-canvas { position: relative; width: 1440px; margin: 0 auto; }
.onay-landing .ol-tight { font-family: "Inter Tight", sans-serif; }
.onay-landing .ol-accent { color: #4688ff; font-weight: 500; }
.onay-landing .ol-eyebrow { position: absolute; margin: 0; font-size: 10.5px; letter-spacing: 0.32em; color: #6f7b86; }
.onay-landing .ol-center { left: 0; right: 0; text-align: center; }

/* ---------- Hero ---------- */
.onay-landing .ol-hero {
  background: linear-gradient(to bottom, rgba(226,241,254,0) calc(100% - 20px), #e2f1fe 100%), #c9def0 url("assets/landing/hero.jpg") center bottom / cover no-repeat;
}
.onay-landing .ol-hero .ol-canvas { height: 930px; }

.onay-landing .ol-nav { position: absolute; left: 76px; right: 118px; top: 22px; height: 34px; display: flex; align-items: center; }
.onay-landing .ol-logo { display: inline-flex; align-items: center; gap: 9px; font-family: "Inter Tight", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #111111; }
.onay-landing .ol-logo img { display: block; width: 34px; height: auto; }
.onay-landing .ol-nav-links { position: absolute; left: 493px; display: flex; gap: 30px; font-size: 10.5px; color: #222b33; }
.onay-landing .ol-nav-links a:hover { color: #2d78ff; }
.onay-landing .ol-nav-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.onay-landing .ol-login { font-size: 10.5px; color: #222b33; padding-bottom: 2px; border-bottom: 1px solid #222b33; }
.onay-landing .ol-signup { display: grid; place-items: center; width: 80px; height: 34px; border-radius: 999px; background: #262626; color: #ffffff; font-size: 10.5px; font-weight: 500; }

.onay-landing .ol-hero-title { position: absolute; left: 105px; top: 148px; margin: 0; font-family: "Inter Tight", sans-serif; font-size: 61px; font-weight: 400; line-height: 62px; letter-spacing: -0.06em; color: #1a303f; }
.onay-landing .ol-sparkle { display: inline-block; position: relative; top: -6px; margin-left: 8px; font-size: 26px; line-height: 0; vertical-align: middle; color: #a9bfd4; letter-spacing: 0; }
.onay-landing .ol-hero-lede { position: absolute; left: 105px; top: 292px; width: 420px; margin: 0; font-family: "Inter Tight", sans-serif; font-size: 15.5px; line-height: 23px; letter-spacing: -0.02em; color: #4a5a68; }
.onay-landing .ol-hero-lede strong { font-weight: 500; color: #2a3a48; }

.onay-landing .ol-cta { position: absolute; left: 105px; top: 392px; display: flex; gap: 12px; }
.onay-landing .ol-btn-primary { display: inline-flex; align-items: center; gap: 9px; height: 55px; padding: 0 45px 0 45px; border-radius: 999px; background: #2d78ff; color: #ffffff; font-family: "Inter Tight", sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -0.02em; }
.onay-landing .ol-btn-primary:hover { background: #1f66e6; color: #ffffff; }
.onay-landing .ol-btn-primary .ol-arrow { background: #ffffff; color: #2d78ff; }
.onay-landing .ol-btn-ghost { display: grid; place-items: center; width: 122px; height: 57px; border-radius: 999px; border: 1px solid #3a3f44; color: #2a3036; font-family: "Inter Tight", sans-serif; font-size: 15px; letter-spacing: -0.02em; }
.onay-landing .ol-btn-ghost:hover { background: rgba(255,255,255,0.4); color: #111; }
.onay-landing .ol-arrow { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; background: #2d78ff; color: #ffffff; }

.onay-landing .ol-progress { position: absolute; left: 1167px; top: 672px; width: 210px; height: 87px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px 0 23px; border-radius: 16px; background: rgba(255,255,255,0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.onay-landing .ol-progress p { margin: 0; font-size: 11.5px; line-height: 16px; color: #1f2a33; }
.onay-landing .ol-ring { position: relative; display: grid; place-items: center; width: 56px; height: 56px; }
.onay-landing .ol-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.onay-landing .ol-ring span { font-size: 14.5px; color: #1f2a33; }

/* ---------- Advantages ---------- */
.onay-landing .ol-adv {
  background: linear-gradient(to bottom, #e2f1fe 0, rgba(226,241,254,0) 140px), #e2f1fe url("assets/landing/bg-adv.jpg") center top / max(1440px, 100%) auto no-repeat;
}
.onay-landing .ol-adv .ol-canvas { height: 860px; }
.onay-landing .ol-adv .ol-eyebrow { left: 90px; top: 110px; }
.onay-landing .ol-adv-title { position: absolute; left: 0; right: 0; top: 101px; margin: 0; text-align: center; font-family: "Inter Tight", sans-serif; font-size: 51px; font-weight: 400; line-height: 55px; letter-spacing: -0.06em; color: #3a3d40; }
.onay-landing .ol-adv-title .ol-dark { color: #222222; }

.onay-landing .ol-compare { position: absolute; top: 286px; width: 499px; height: 488px; padding: 44px 45px 0; border-radius: 18px; }
.onay-landing .ol-compare h3 { margin: 0 0 21px; font-family: "Inter Tight", sans-serif; font-size: 22px; font-weight: 400; letter-spacing: -0.03em; color: #2a2e33; }
.onay-landing .ol-compare-row { display: flex; align-items: center; height: 73px; }
.onay-landing .ol-compare-row .ol-mark { display: grid; place-items: center; flex: 0 0 auto; border-radius: 999px; }
.onay-landing .ol-compare-row .ol-text { font-size: 14px; line-height: 22px; }

.onay-landing .ol-without { left: 213px; background: rgba(236,245,253,0.82); }
.onay-landing .ol-without .ol-compare-row { gap: 15px; border-top: 1px solid #dde6ef; }
.onay-landing .ol-without .ol-mark { width: 22px; height: 22px; background: #e6e6eb; color: #9a9aa3; }
.onay-landing .ol-without .ol-text { color: #7c838a; white-space: nowrap; }

.onay-landing .ol-with { left: 728px; background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.onay-landing .ol-with .ol-compare-row { gap: 13px; border-top: 1px solid #e2e8ee; }
.onay-landing .ol-with .ol-mark { width: 24px; height: 24px; background: #2d78ff; color: #ffffff; }
.onay-landing .ol-with .ol-text { color: #1f2a33; }

/* ---------- How it works ---------- */
.onay-landing .ol-how {
  background: #e2f3ff url("assets/landing/bg-how.jpg") center top / max(1440px, 100%) auto no-repeat;
}
.onay-landing .ol-how .ol-canvas { height: 720px; }
.onay-landing .ol-how .ol-eyebrow { left: 90px; top: 57px; }
.onay-landing .ol-how-title { position: absolute; left: 90px; top: 101px; margin: 0; font-family: "Inter Tight", sans-serif; font-size: 51px; font-weight: 400; line-height: 60px; letter-spacing: -0.06em; color: #222222; }

.onay-landing .ol-step { position: absolute; top: 250px; width: 217px; height: 318px; padding: 32px 30px 31px; display: flex; flex-direction: column; border-radius: 16px; background: #ffffff; }
.onay-landing .ol-step-n { font-family: "Inter Tight", sans-serif; font-size: 24px; font-weight: 300; letter-spacing: -0.03em; color: #5b6168; }
.onay-landing .ol-step-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: #eef0f3; color: #6b7178; }
.onay-landing .ol-step .ol-step-icon { margin-top: auto; }
.onay-landing .ol-step h3 { margin: 34px 0 0; font-family: "Inter Tight", sans-serif; font-size: 19.5px; font-weight: 500; line-height: 21px; letter-spacing: -0.03em; color: #111111; }

.onay-landing .ol-step-ai { position: absolute; left: 323px; top: 228px; width: 330px; height: 437px; padding: 10px 10px 30px; border-radius: 16px; background: #ffffff; box-shadow: 0 0 0 1px rgba(255,255,255,0.6); }
.onay-landing .ol-step-ai img { display: block; width: 309px; height: 228px; max-width: none; border-radius: 10px; object-fit: cover; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.onay-landing .ol-step-ai-body { padding: 32px 20px 0; }
.onay-landing .ol-step-ai .ol-step-icon { font-size: 11px; }
.onay-landing .ol-step-ai h3 { margin: 15px 0 0; font-family: "Inter Tight", sans-serif; font-size: 23px; font-weight: 500; line-height: 24px; letter-spacing: -0.03em; color: #111111; }
.onay-landing .ol-step-ai p { margin: 14px 0 0; font-size: 13.5px; line-height: 19.5px; color: #5b6168; }

/* ---------- AI Roadmap ---------- */
.onay-landing .ol-roadmap {
  background: linear-gradient(to bottom, rgba(255,255,255,0) calc(100% - 120px), #ffffff 100%), #e6f3fe url("assets/landing/bg-roadmap.jpg") center top / max(1440px, 100%) auto no-repeat;
}
.onay-landing .ol-roadmap .ol-canvas { height: 845px; }
.onay-landing .ol-roadmap .ol-eyebrow { top: 91px; }
.onay-landing .ol-section-title { position: absolute; left: 0; right: 0; margin: 0; text-align: center; font-family: "Inter Tight", sans-serif; font-size: 53px; font-weight: 400; line-height: 64px; letter-spacing: -0.06em; color: #222222; }
.onay-landing .ol-roadmap .ol-section-title { top: 131px; }
.onay-landing .ol-roadmap-lede { position: absolute; left: 0; right: 0; top: 223px; margin: 0; text-align: center; font-size: 18px; line-height: 27px; letter-spacing: -0.01em; color: #2e3338; }

/* Scaled with the viewport above 1440px (see inline script in index.html). */
.onay-landing .ol-pill-layer { position: absolute; inset: 0; transform-origin: 720px 0; transform: scale(1); }
.onay-landing .ol-pill { position: absolute; display: inline-flex; align-items: center; justify-content: center; gap: 16px; border-radius: 999px; background: #f5fbff; box-shadow: 0 6px 18px 8px rgba(245,251,255,0.92); font-size: 17px; letter-spacing: -0.015em; color: #2e3338; white-space: nowrap; }
.onay-landing .ol-pill:hover { background: #ffffff; color: #111; }

/* ---------- Features ---------- */
.onay-landing .ol-features { background: #ffffff; }
.onay-landing .ol-features .ol-canvas { height: 1045px; }
.onay-landing .ol-features .ol-eyebrow { top: 74px; }
.onay-landing .ol-features .ol-section-title { top: 114px; }

.onay-landing .ol-feature { position: absolute; width: 409px; height: 315px; border-radius: 14px; background: #f6f6f6; overflow: hidden; }
.onay-landing .ol-feature-img { position: absolute; background-position: center; background-size: contain; background-repeat: no-repeat; }
.onay-landing .ol-feature h3 { position: absolute; left: 30px; top: 178px; margin: 0; font-family: "Inter Tight", sans-serif; font-size: 18.5px; font-weight: 500; letter-spacing: -0.03em; color: #111111; }
.onay-landing .ol-feature p { position: absolute; left: 30px; top: 212px; margin: 0; font-size: 17.5px; line-height: 25px; letter-spacing: -0.015em; color: #3a3f44; }

.onay-landing .ol-features-note { position: absolute; left: 0; right: 0; top: 953px; margin: 0; text-align: center; font-size: 12.5px; color: #2e3338; }
.onay-landing .ol-bottom-strip { height: 34px; border-radius: 24px 24px 0 0; background: #f3f3f7; }

/* ---------- Login / sign-up dialogs ---------- */
.onay-dialog { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; font-family: "Inter", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; color: #1f2a33; line-height: normal; -webkit-font-smoothing: antialiased; }
.onay-dialog[hidden] { display: none; }
.onay-dialog *,
.onay-dialog *::before,
.onay-dialog *::after { box-sizing: border-box; }
.onay-dialog p,
.onay-dialog h3,
.onay-dialog form { margin: 0; padding: 0; }

.onay-dialog .island-scrim { position: absolute; inset: 0; padding: 0; border: none; background: rgba(26,48,63,0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; }
.onay-dialog .island { position: relative; width: 100%; max-width: 420px; padding: 40px 40px 34px; border-radius: 18px; background: #ffffff; box-shadow: 0 30px 80px -30px rgba(26,48,63,0.45); animation: onay-dialog-pop .25s ease; }
@keyframes onay-dialog-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.onay-dialog .island-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 999px; background: #eef0f3; color: #6b7178; cursor: pointer; }
.onay-dialog .island-close:hover { background: #e3e8ee; color: #1f2a33; }
.onay-dialog .island-wordmark { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 22px; font-family: "Inter Tight", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #111111; }
.onay-dialog .island-wordmark img { display: block; width: 34px; height: auto; }
.onay-dialog .island h3 { margin-bottom: 8px; text-align: center; font-family: "Inter Tight", sans-serif; font-size: 34px; font-weight: 400; line-height: 38px; letter-spacing: -0.06em; color: #1a303f; }
.onay-dialog .isub { margin-bottom: 26px; text-align: center; font-size: 14px; line-height: 22px; color: #6f7b86; }

.onay-dialog .field { margin-bottom: 16px; }
.onay-dialog .field label { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 500; color: #2a3a48; }
.onay-dialog .field input { width: 100%; height: 48px; padding: 0 16px; border: 1px solid #dde6ef; border-radius: 12px; background: #f6f9fc; font-family: inherit; font-size: 15px; color: #1f2a33; }
.onay-dialog .field input::placeholder { color: #9aa5af; }
.onay-dialog .field input:focus { outline: none; border-color: #2d78ff; background: #ffffff; box-shadow: 0 0 0 3px rgba(45,120,255,0.15); }
.onay-dialog .field-password-login { position: relative; }
.onay-dialog .password-input-wrap { position: relative; }
.onay-dialog .field .password-input-wrap input { padding-right: 62px; }
.onay-dialog .password-toggle-btn { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); padding: 4px 8px; border: none; border-radius: 8px; background: transparent; font-family: inherit; font-size: 12px; font-weight: 500; color: #2d78ff; cursor: pointer; }
.onay-dialog .password-toggle-btn:hover { background: #eef4ff; }
.onay-dialog .forgot { display: block; margin-top: 10px; text-align: right; font-size: 12.5px; color: #2d78ff; text-decoration: none; }
.onay-dialog .forgot:hover { color: #1f66e6; }

.onay-dialog .message { min-height: 1px; margin: 2px 0 4px; font-size: 12.5px; line-height: 18px; color: #6f7b86; }
.onay-dialog .message.is-error { color: #d93a2f; }

.onay-dialog .island-submit { display: grid; place-items: center; width: 100%; height: 52px; margin-top: 10px; border: none; border-radius: 999px; background: #2d78ff; color: #ffffff; font-family: "Inter Tight", sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -0.02em; cursor: pointer; }
.onay-dialog .island-submit:hover { background: #1f66e6; }
.onay-dialog .island-submit:disabled { opacity: .6; cursor: default; }

.onay-dialog .island-role-actions { display: flex; flex-direction: column; gap: 12px; }
.onay-dialog .island-role-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border: 1px solid #dde6ef; border-radius: 999px; background: #ffffff; color: #1f2a33; font-family: "Inter Tight", sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -0.02em; text-decoration: none; }
.onay-dialog .island-role-btn:hover,
.onay-dialog .island-role-btn:focus-visible { border-color: #2d78ff; background: #f5fbff; outline: none; }
.onay-dialog .island-role-btn img { flex: 0 0 20px; width: 20px; height: 20px; }

.onay-dialog .island-alt { margin-top: 20px; text-align: center; font-size: 13px; color: #6f7b86; }
.onay-dialog .island-alt a { font-weight: 500; color: #2d78ff; text-decoration: none; }
.onay-dialog .island-alt a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .onay-dialog { padding: 16px; }
  .onay-dialog .island { padding: 36px 22px 28px; }
}