/* Claude Sessions site — page layout and the ledger mock, on Ease tokens (ease.css). No colors or fonts of its own. */

/* layout */
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--s-6); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-5) 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 30px; font: var(--t-heading); color: var(--ink); }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.nav-links a { display: inline-flex; align-items: center; min-height: 24px; font: var(--t-secondary); color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }

.hero { padding: var(--s-14) 0 var(--s-10); text-align: center; }
.hero h1 { margin: var(--s-4) auto var(--s-5); }
h1 em { font-style: normal; color: var(--lilac-txt); }
.lede { max-width: 640px; margin: 0 auto; font: 400 19px/1.5 var(--font); color: var(--ink-2); }
.hero .ease-btn, .get .ease-btn { margin-top: var(--s-8); padding: 12px 22px; font-size: 15px; flex-wrap: wrap; justify-content: center; text-align: center; }
.ease-btn small { font: inherit; font-weight: 400; color: inherit; opacity: 0.75; white-space: nowrap; }
.sub { margin-top: var(--s-3); font: var(--t-secondary); color: var(--ink-3); }

.sect { padding: var(--s-14) 0 0; }
.sect .ease-card { padding: var(--s-8) var(--s-10); }
.sect h2 { font: 600 clamp(26px, 3.4vw, 34px)/1.12 var(--font); letter-spacing: -0.02em; }
h2 .quiet { color: var(--ink-3); font-weight: 500; }
.sect .ease-card > p { color: var(--ink-2); }
.sect .req { margin-top: var(--s-6); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.ease-tile h3 { margin-bottom: var(--s-1); }
.ease-tile p { margin: 0; font: var(--t-secondary); color: var(--ink-2); }
.ease-tile code { background: var(--card); }

.get { text-align: center; padding: 72px 0 var(--s-8); }
.get h2 { font: 600 46px/1.1 var(--font); letter-spacing: -0.02em; }
.get .lede { font: var(--t-body); }
.footer { text-align: center; padding: var(--s-8) 0 var(--s-14); font: var(--t-secondary); color: var(--ink-3); }
.footer p { margin: var(--s-1) auto; max-width: none; }
.footer a { color: var(--ink-2); }
.footer a:hover { color: var(--ink); }

/* the ledger mock: one window, a question, three sessions */
.ledger { max-width: 760px; margin: var(--s-14) auto 0; overflow: hidden; text-align: left; background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.ledger-bar { display: flex; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--hair); }
.ledger-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--hair-strong); }
.ask { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding: 12px 18px; border-bottom: 1px solid var(--hair); background: var(--lilac-tint); font: var(--t-secondary); }
.ask .q { color: var(--lilac-txt); font-weight: 500; }
.ask .n { color: var(--ink-2); }
.lrow { padding: 13px 18px; border-bottom: 1px solid var(--hair); }
.lrow:last-child { border-bottom: 0; }
.lt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font: var(--t-heading); }
.lt .ease-chip { gap: 6px; padding: 2px 9px; }
.lm { margin-top: 3px; font: 400 12px/1.5 var(--mono); color: var(--ink-3); }
.ease-dot.breathe { animation: breathe 1.6s var(--ease) infinite; }
@keyframes breathe { 50% { opacity: 0.3; } }
.caption { margin-top: var(--s-4); text-align: center; font: var(--t-secondary); color: var(--ink-3); }

@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; }
  .sect .ease-card { padding: var(--s-6) var(--s-5); }
}