/* homlystay.com/accounts: Homlystay Accounts sold on its own (src/books.ts). Builds on home.css (same colours, fonts, buttons). */

/* hero: text + a phone showing the example month (the real numbers of /accounts/example) */
.ah-hero { padding:44px 0 56px; background:linear-gradient(var(--hero-top), var(--tint1)) }
.ah-in { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:40px; align-items:center }
.ah-text { text-align:left; padding:0 }
.ah-text h1 { margin:0 0 16px; max-width:none }
.ah-text .lead, .ah-text .note { margin-left:0 }
.ah-text .ctas { justify-content:flex-start }
@media (max-width:900px) {
  .ah-in { grid-template-columns:minmax(0, 1fr) }
  .ah-text { text-align:center }
  .ah-text .lead, .ah-text .note { margin-left:auto }
  .ah-text .ctas { justify-content:center }
}

.ah-phone { display:block; justify-self:center; width:min(310px, 100%); border-radius:40px; padding:12px; background:#101616; box-shadow:0 30px 60px rgba(15,61,62,.3); text-decoration:none; transform:rotate(2deg); transition:transform .25s }
.ah-phone:hover { transform:rotate(0) translateY(-4px) }
@media (max-width:900px) { .ah-phone { transform:none } }
.ah-screen { border-radius:30px; background:#f4f1ea; color:#17302f; padding:18px 14px 16px; font:14px/1.4 Inter, system-ui, sans-serif; min-height:430px }
.ml .ah-screen { font-family:"Noto Sans Malayalam", Inter, sans-serif }
.ah-top { margin:0 0 12px; font-size:16px; display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.ah-top small { margin-left:auto; font-size:11px; font-weight:700; color:#fff; background:#e2456f; padding:3px 8px; border-radius:999px }
.ah-tiles { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px }
.ah-tiles div { border-radius:12px; padding:8px 7px; display:flex; flex-direction:column; gap:2px; min-width:0 }
.ah-tiles span { font-size:11.5px; font-weight:600; opacity:.85 }
.ah-tiles b { font-size:15px; overflow-wrap:anywhere }
.ah-tiles .in { background:#e3f6ea; color:#17643a } .ah-tiles .out { background:#ffe4ec; color:#a3254b } .ah-tiles .left { background:#e2f2fb; color:#0f3d3e }
.ah-list { list-style:none; padding:0; margin:12px 0 10px }
.ah-list li { display:flex; justify-content:space-between; gap:8px; padding:9px 2px; border-bottom:1px solid rgba(15,61,62,.1) }
.ah-list li span { min-width:0; overflow-wrap:anywhere }
.ah-list b { white-space:nowrap } .ah-list b.in { color:#17643a } .ah-list b.out { color:#a3254b }
.ah-low { margin:0; background:#fff4e0; border:1px solid #f0d49b; border-radius:10px; padding:8px 10px; font-weight:600; color:#7a4300 }
.ah-open { margin:12px 0 0; text-align:right; font-weight:700; color:#c25a0c }

/* the big numbers */
.ah-nums { padding:30px 0 34px }
.ah-ngrid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px }
.ah-ngrid div { background:var(--card); border-radius:20px; padding:18px 12px; text-align:center; box-shadow:var(--shadow) }
.ah-ngrid b { display:block; font:800 clamp(30px, 6vw, 44px)/1.1 "Baloo Chettan 2", Inter, sans-serif; color:var(--saffron) }
.ah-ngrid span { display:block; color:var(--muted); font-weight:600; font-size:15px }
@media (max-width:760px) { .ah-ngrid { grid-template-columns:repeat(2, minmax(0, 1fr)) } }

.ah-site { max-width:720px; margin:26px auto 0; font-size:17px; color:var(--muted) }
.p .ps a { color:#fff; font-weight:700 }

/* sign-up form (inside home.css .reg) */
.reg input[type=radio], .reg input[type=checkbox] { width:auto; padding:0; flex:none; accent-color:var(--saffron); transform:scale(1.25); margin:4px 4px 0 2px }
.reg fieldset.ah-kind { border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px 22px }
.reg fieldset.ah-kind legend { font-weight:700; font-size:15px; padding:0; margin-bottom:6px }
.reg .ah-kind label, .reg label.ah-agree { flex-direction:row; align-items:flex-start; gap:8px; font-weight:600 }
.reg .ah-err { margin:0; background:#ffe4ec; color:#9b1d42; border-radius:12px; padding:10px 14px; font-weight:700; font-size:16px; text-align:left }
.done-box .reg { box-shadow:none; padding:0; margin-top:10px }

/* forgotten PIN */
.ah-help { padding:48px 0 56px; text-align:center }
.ah-help h2 { margin-bottom:12px }
.ah-help p { max-width:640px; margin:0 auto; font-size:17px; color:var(--muted) }
.ah-help a { color:var(--lagoon); font-weight:700; overflow-wrap:anywhere }

/* after sign-up: the address and the PIN */
.ah-keys { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin:8px 0 6px; text-align:center }
.ah-keys div { background:var(--bg); border:2px solid var(--line); border-radius:18px; padding:14px 12px; display:flex; flex-direction:column; gap:6px; justify-content:center; min-width:0 }
.ah-keys span { font-weight:700; color:var(--muted); font-size:15px }
.ah-addr { display:block; font:700 16px/1.35 Inter, system-ui, sans-serif; color:var(--ink); overflow-wrap:anywhere; user-select:all }
.ah-pin { font:800 46px/1.1 "Baloo Chettan 2", Inter, sans-serif; letter-spacing:6px; color:var(--deep) }
@media (prefers-color-scheme: dark) { .ah-pin { color:var(--ink) } }
@media (max-width:560px) { .ah-keys { grid-template-columns:minmax(0, 1fr) } }
.done-box p.ah-warn { color:var(--hibiscus); font-size:16px }
.ah-done .btn { margin:4px }
.ah-next-h { font-size:24px; margin:26px 0 6px }
.ah-next { text-align:left; max-width:520px; margin:0 auto 18px; padding-left:22px; color:var(--muted) }
.ah-next li { margin:8px 0; font-size:16px }