/* © 2026 Venkat Ranganathan / Sadhana AI. All rights reserved.
   Shared styles for the crawlable /learn marketing pages. Tokens and type match
   public/get.html so the two surfaces read as one site. Kept as a single stylesheet
   rather than inlined per page so copy changes never fork the design. */

:root {
  --plum: #6E3F63; --plum-deep: #4A2A43; --gold: #E3AB45; --gold-soft: #F1D9AC;
  --cream: #FAF6EF; --card: #FFFFFF; --ink: #201D1A; --muted: #756D64; --line: #E7DFD4;
  --green: #167267;
}
* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 16px/1.62 Inter, 'Segoe UI', system-ui, sans-serif;
}
a { color: var(--plum); }
a:hover { color: var(--plum-deep); }
img { max-width: 100%; height: auto; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }
.wrap.wide { max-width: 1080px; }

/* skip link — keyboard users shouldn't have to walk the nav on every page */
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--plum-deep); color: #fff;
  padding: 10px 16px; border-radius: 0 0 10px 0; z-index: 10;
}
.skip:focus { left: 0; color: #fff; }

/* ---- top bar ---- */
header.top { background: #FFFDF8; border-bottom: 1px solid var(--line); }
.topbar { display: flex; align-items: center; gap: 14px; padding: 14px 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.brand .name { font-family: Fraunces, Georgia, serif; font-size: 20px; font-weight: 700; display: block; }
.brand .tag { font-size: 9.5px; letter-spacing: .22em; color: var(--plum); font-weight: 600; display: block; }
nav.links { display: flex; gap: 20px; margin-left: auto; font-size: 14.5px; font-weight: 500; flex-wrap: wrap; }
nav.links a { text-decoration: none; }
nav.links a[aria-current='page'] {
  color: var(--plum-deep); font-weight: 700; border-bottom: 2px solid var(--gold); padding-bottom: 2px;
}
@media (max-width: 760px) { nav.links { gap: 14px; font-size: 13.5px; width: 100%; margin-left: 0; } }

/* ---- type ---- */
.eyebrow { color: var(--gold); font-size: 12.5px; letter-spacing: .24em; font-weight: 700; text-transform: uppercase; }
h1 {
  font-family: Fraunces, Georgia, serif; font-size: clamp(31px, 4.6vw, 46px); line-height: 1.07;
  margin: 10px 0 14px; color: var(--plum-deep); text-wrap: balance;
}
h2 {
  font-family: Fraunces, Georgia, serif; font-size: clamp(23px, 2.9vw, 30px);
  color: var(--plum-deep); margin: 42px 0 12px; line-height: 1.2;
}
h3 { font-family: Fraunces, Georgia, serif; font-size: 20px; color: var(--plum); margin: 26px 0 8px; }
.lede { font-size: 18.5px; color: var(--muted); max-width: 60ch; }
main { padding: 34px 0 10px; }
p, li { max-width: 72ch; }
ul, ol { padding-left: 22px; }
li { margin: 7px 0; }

/* ---- blocks ---- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px 24px; margin: 20px 0;
}
.card h3 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 760px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

.note {
  border-left: 3px solid var(--gold); background: #FFFCF5; padding: 14px 18px;
  border-radius: 0 12px 12px 0; margin: 20px 0; font-size: 15.5px;
}
.note strong { color: var(--plum-deep); }

table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 15px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--plum-deep); font-weight: 700; }
.scroller { overflow-x: auto; }

/* ---- screenshots ---- */
figure { margin: 22px 0; }
figure.shot { max-width: 300px; }
figure.shot img {
  border-radius: 20px; border: 7px solid #2A2126; background: #2A2126; display: block;
  box-shadow: 0 18px 44px rgba(46, 28, 42, .22);
}
figure.wide-shot img { border-radius: 12px; border: 1px solid var(--line); display: block; }
figcaption { font-size: 13.5px; color: var(--muted); margin-top: 9px; }
.shot-row { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.shot-row figure.shot { flex: 1 1 240px; }

/* ---- store buttons ---- */
.stores { display: flex; gap: 14px; flex-wrap: wrap; margin: 24px 0; }
.storebtn {
  display: inline-flex; align-items: center; gap: 10px; background: #1c1c1e; color: #fff;
  border-radius: 14px; padding: 13px 22px; font-weight: 600; font-size: 16px; text-decoration: none;
}
.storebtn:hover { color: #fff; background: #000; }
.storebtn.play { background: var(--green); }
.storebtn.play:hover { background: #0F5A50; }

/* ---- next links ---- */
.next { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0; }
@media (max-width: 760px) { .next { grid-template-columns: 1fr; } }
.next a {
  display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; text-decoration: none;
}
.next a:hover { border-color: var(--gold); }
.next strong { display: block; font-family: Fraunces, Georgia, serif; font-size: 17px; color: var(--plum-deep); }
.next span { display: block; font-size: 14px; color: var(--muted); margin-top: 3px; }

/* ---- faq ---- */
.faq { margin: 18px 0; }
.faq h3 { margin-bottom: 4px; }

/* ---- footer ---- */
footer { background: var(--plum-deep); color: #E9DCE5; margin-top: 52px; }
.foot { display: flex; align-items: center; gap: 18px; padding: 22px 0; flex-wrap: wrap; font-size: 14px; }
.foot a { color: #fff; }
.foot .motto { font-family: Fraunces, Georgia, serif; font-style: italic; color: var(--gold); margin-left: auto; }
@media (max-width: 760px) { .foot .motto { margin-left: 0; } }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }