/* obsidiansuite.net/client - Obsidian Mail Client. Loaded after site.css (which holds the obsidian look); adds only
   what that page needs. /server loads it too (tiles, modules, downloads), then server.css. The app pictures are real screenshots of a made-up demo mailbox (never of real mail). */

/* ---- the app window in the hero, and the section screenshots ---- */
.app { margin: 56px auto 0; max-width: 1100px; text-align: left; border-radius: var(--r-lg) var(--r-lg) 0 0; border: 1px solid var(--line-2);
  border-top-color: var(--specular); border-bottom: 0; background: var(--surface); box-shadow: var(--shadow); overflow: hidden;
  font-size: 13px; line-height: 1.4; color: var(--text); user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
@media (max-width: 700px) { .app { margin-top: 40px; } }
.app.shot-img img, .shot > img { display: block; width: 100%; height: auto; }

/* ---- page parts ---- */
.modules + .split { margin-top: 80px; }
.hero h1 { max-width: 17ch; }
.platforms b small { font-weight: 500; color: var(--text-3); font-size: .8rem; }

/* feature tiles with an icon, like the main page's layers but in threes */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 960px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tiles { grid-template-columns: 1fr; } }
.tile { padding: 22px; position: relative; transition: border-color .2s; }
.tile.wide { grid-column: span 2; }
@media (max-width: 600px) { .tile.wide { grid-column: auto; } }
.tile:hover { border-color: var(--accent-line); }
.tile .ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-line); margin-bottom: 16px; }
.tile .ico svg { width: 20px; height: 20px; }
.tile h3 { margin-bottom: .35em; }
.tile p { color: var(--text-2); font-size: .92rem; margin: 0; }
.tile .soon { position: absolute; top: 20px; right: 20px; }
.soon { font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 5px;
  color: var(--info); background: color-mix(in srgb, var(--info) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 28%, transparent); }
.soon.new { color: var(--accent); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent-line); }
.note { margin-top: 22px; text-align: center; color: var(--text-3); font-size: .88rem; }

/* the four modules */
.modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 900px) { .modules { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .modules { grid-template-columns: 1fr; } }
.modules div { background: var(--surface); padding: 26px 24px; }
.modules kbd { float: right; }
.modules b { display: block; font-weight: 700; letter-spacing: -.02em; font-size: 1.12rem; margin-bottom: 6px; }
.modules p { color: var(--text-2); font-size: .9rem; margin: 0; }

/* downloads */
.dl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 940px; margin: 0 auto; }
@media (max-width: 760px) { .dl { grid-template-columns: 1fr; } }
.dl .mode { display: flex; flex-direction: column; }
.dl .mode > p { flex: 1; }
.dl .btn { align-self: flex-start; margin-top: 8px; }
.dl .label { align-self: flex-start; }
.meta { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: .84rem; color: var(--text-3); }
.meta b { color: var(--text-2); font-weight: 600; }
.gate { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 6px 14px; border-radius: 999px; font-size: .88rem;
  color: var(--text-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent-line); }
.gate svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
@media (max-width: 600px) { .gate { display: block; border-radius: 14px; padding: 8px 14px; } .gate svg { display: inline; vertical-align: -2px; margin-right: 6px; } }
.req { margin: 28px auto 0; max-width: 940px; text-align: center; color: var(--text-3); font-size: .88rem; }