/* ============================================================
   SIMONIS — shared product-page styles (chat.html, mail.html, …)
   Works alongside styles.css. Accent per page via --pa / --pa-rgb.
   ============================================================ */
:root { --pa: #2E9BFF; --pa-rgb: 46,155,255; }

.p-accent { color: var(--pa); }

/* Hero visual — product logo with floating glow + orbit rings */
.p-hero-visual { position: relative; width: min(460px, 100%); aspect-ratio: 1/1; margin-inline: auto; display: grid; place-items: center; }
.p-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(var(--pa-rgb), .18); }
.p-ring.r1 { inset: 4%; }
.p-ring.r2 { inset: 17%; border-color: rgba(212,175,55,.16); }
.p-ring.r3 { inset: 30%; border-color: rgba(var(--pa-rgb), .12); }
.p-ring.spin { animation: pSpin 30s linear infinite; }
.p-ring.spin.rev { animation-duration: 40s; animation-direction: reverse; }
@keyframes pSpin { to { transform: rotate(360deg); } }
.p-hero-logo { position: relative; width: 60%; aspect-ratio: 1/1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, rgba(var(--pa-rgb), .20), rgba(212,175,55,.08) 55%, transparent 72%);
  animation: pFloat 7s ease-in-out infinite; }
.p-hero-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%;
  filter: drop-shadow(0 0 38px rgba(var(--pa-rgb), .42)); }
@keyframes pFloat { 0%,100%{ transform: translateY(-9px); } 50%{ transform: translateY(9px); } }
.p-orbit-dot { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%;
  background: var(--pa); box-shadow: 0 0 14px 2px rgba(var(--pa-rgb), .7); }

/* How it works steps */
.p-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.p-step { position: relative; padding: 28px 24px; border-radius: 18px; background: var(--bg-3); border: 1px solid var(--line); }
.p-step .sn { font-family: var(--serif); font-size: 40px; font-weight: 700; color: var(--pa); line-height: 1; opacity: .92; }
.p-step h4 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 14px 0 8px; }
.p-step p { font-size: 13.5px; line-height: 1.55; color: var(--muted); font-weight: 300; }
.p-step-arrow { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: var(--pa); opacity: .5; z-index: 2; }
.p-step-arrow svg { width: 22px; height: 22px; }

/* @ONE inside band */
.p-one { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center;
  padding: clamp(26px,4vw,40px); border-radius: 22px; position: relative; overflow: hidden;
  background: linear-gradient(110deg, rgba(212,175,55,.10), rgba(46,120,210,.05));
  border: 1px solid rgba(212,175,55,.26); }
.p-one img { width: 84px; height: 84px; border-radius: 50%; filter: drop-shadow(0 0 24px rgba(212,175,55,.4)); }
.p-one h3 { font-family: var(--serif); font-size: clamp(22px,3vw,30px); font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.p-one p { color: var(--ink-2); font-weight: 300; font-size: 14.5px; line-height: 1.55; max-width: 640px; }
.p-one .btn { white-space: nowrap; }

/* CTA band */
.p-cta { text-align: center; padding: clamp(48px,6vw,76px) clamp(20px,4vw,56px); border-radius: 26px; position: relative; overflow: hidden;
  background: radial-gradient(70% 120% at 50% 0%, rgba(var(--pa-rgb), .14), transparent 60%), linear-gradient(180deg, var(--surface), var(--bg-3));
  border: 1px solid rgba(var(--pa-rgb), .28); }
.p-cta img { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 22px; display: block; filter: drop-shadow(0 0 26px rgba(var(--pa-rgb), .45)); }
.p-cta h2 { font-family: var(--serif); font-size: clamp(28px,4vw,46px); font-weight: 700; letter-spacing: .01em; color: var(--ink); }
.p-cta p { color: var(--ink-2); font-weight: 300; max-width: 620px; margin: 14px auto 26px; font-size: clamp(15px,1.6vw,17px); }
.p-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Highlight list (alternating) */
.p-rows { display: flex; flex-direction: column; gap: 18px; }
.p-row { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: start; padding: 22px 24px;
  border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border: 1px solid var(--line); }
.p-row .p-row-ic { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; color: var(--pa);
  background: rgba(var(--pa-rgb), .12); border: 1px solid rgba(var(--pa-rgb), .3); }
.p-row .p-row-ic svg { width: 26px; height: 26px; }
.p-row h4 { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.p-row p { font-size: 13.5px; line-height: 1.55; color: var(--muted); font-weight: 300; }

/* ===== Auth card (Create account / Sign in) ===== */
.auth-card { max-width: 520px; margin: 0 auto; background: linear-gradient(180deg, var(--surface), var(--bg-3));
  border: 1px solid var(--line-2); border-radius: 22px; padding: clamp(26px,4vw,40px); box-shadow: 0 40px 90px -40px rgba(0,0,0,.7); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; background: rgba(255,255,255,.03);
  border: 1px solid var(--line); border-radius: 14px; margin-bottom: 26px; }
.auth-tab { padding: 11px; border-radius: 10px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--muted); transition: all .2s; }
.auth-tab.on { background: rgba(212,175,55,.14); color: var(--gold-2); box-shadow: inset 0 0 0 1px rgba(212,175,55,.3); }
.auth-form { display: none; }
.auth-form.on { display: block; animation: pop .35s var(--ease); }
.auth-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin: 16px 0 8px; }
.auth-label:first-child { margin-top: 0; }
.auth-rec { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--gold-2);
  background: rgba(212,175,55,.14); border: 1px solid rgba(212,175,55,.3); padding: 3px 8px; border-radius: 999px; }
.auth-input { width: 100%; height: 50px; padding: 0 16px; border-radius: 12px; background: rgba(255,255,255,.04);
  border: 1px solid var(--line-2); color: var(--ink); font-family: var(--sans); font-size: 14.5px; transition: all .2s; }
.auth-input::placeholder { color: var(--faint); }
.auth-input:focus { outline: none; border-color: rgba(212,175,55,.6); background: rgba(212,175,55,.05); }
.auth-email { display: flex; align-items: stretch; border-radius: 12px; overflow: hidden; border: 1px solid rgba(212,175,55,.4); background: rgba(212,175,55,.06); }
.auth-email .auth-input { border: 0; background: transparent; border-radius: 0; }
.auth-email .auth-input:focus { background: rgba(212,175,55,.08); }
.auth-suffix { display: grid; place-items: center; padding: 0 14px; font-size: 13.5px; font-weight: 600; color: var(--gold-2); background: rgba(212,175,55,.12); white-space: nowrap; }
.auth-hint { font-size: 11.5px; line-height: 1.5; color: var(--faint); margin-top: 8px; }
.auth-pass { position: relative; }
.auth-pass .auth-input { padding-right: 48px; }
.auth-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; border-radius: 9px; }
.auth-eye:hover { color: var(--ink-2); background: rgba(255,255,255,.04); }
.auth-eye svg { width: 19px; height: 19px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 6px; }
.auth-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.auth-check input { width: 16px; height: 16px; accent-color: var(--gold-2); }
.auth-forgot { font-size: 12.5px; color: var(--gold-2); text-decoration: none; }
.auth-forgot:hover { text-decoration: underline; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--faint); font-size: 11.5px; letter-spacing: .04em; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.auth-socials { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-social { display: flex; align-items: center; justify-content: center; gap: 9px; height: 48px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line-2); color: var(--ink-2); cursor: pointer; font-family: var(--sans); font-size: 13.5px; font-weight: 500; transition: all .2s; }
.auth-social:hover { background: rgba(255,255,255,.07); border-color: var(--line); transform: translateY(-2px); }
.auth-social svg, .auth-social img { width: 18px; height: 18px; flex: none; }
.auth-terms { font-size: 11px; line-height: 1.5; color: var(--faint); margin-top: 18px; text-align: center; }
.auth-terms a { color: var(--ink-2); }
.auth-success { display: none; text-align: center; padding: 18px 6px; }
.auth-success.show { display: block; animation: pop .4s var(--ease); }
.auth-success .ok { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; background: rgba(212,175,55,.14); border: 1px solid rgba(212,175,55,.4); color: var(--gold-2); }
.auth-success .ok svg { width: 30px; height: 30px; }
.auth-success h4 { font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.auth-success p { font-size: 13.5px; color: var(--muted); }
.auth-success b { color: var(--gold-2); font-weight: 600; }

@media (max-width: 880px) { .p-steps { grid-template-columns: 1fr; } .p-step-arrow { right: 50%; top: auto; bottom: -13px; transform: translateX(50%) rotate(90deg); }
  .p-one { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
@media (max-width: 420px) { .auth-socials { grid-template-columns: 1fr; } }