/* CreatStrat demo page. Loaded after site.css on demo.html only.
   The request form itself is styled in site.css. */

.demo-page { position: relative; padding: 72px 0 110px; }
.demo-page::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgb(var(--ink-rgb) / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--ink-rgb) / 5%) 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: linear-gradient(to bottom, var(--ink) 30%, transparent 80%); mask-image: linear-gradient(to bottom, var(--ink) 30%, transparent 80%); }
.demo-grid { position: relative; display: grid; grid-template-columns: 1fr 500px; grid-template-areas: "head form" "more form"; gap: 0 64px; align-items: start; }
.demo-head { grid-area: head; }
.demo-more { grid-area: more; }
.demo-form { grid-area: form; position: sticky; top: calc(var(--nav-h) + 24px); }
.demo-head h1 { margin: 18px 0 20px; font-weight: 850; font-size: 68px; line-height: .95; letter-spacing: -0.06em; }

.agenda { display: flex; flex-direction: column; gap: 12px; margin-top: 38px; }
.agenda-item { display: grid; grid-template-columns: 150px 1fr auto; gap: 20px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
.agenda-item b { display: block; font-weight: 800; font-size: 18px; letter-spacing: -0.03em; }
.agenda-item p { margin-top: 3px; font-size: 14.5px; color: var(--ink-2); }
.mins { margin-right: 6px; padding: 6px 9px; border-radius: var(--r-sm); background: var(--violet-soft); color: var(--violet); font: 700 12px/1 var(--mono); white-space: nowrap; }
.thumb { position: relative; height: 96px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--mist); }
.thumb-scan img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; }
.thumb-tag { position: absolute; left: 8px; bottom: 8px; padding: 4px 7px; border-radius: 6px; background: var(--lime); color: var(--ink); font-size: 11px; font-weight: 800; }
.thumb-batch { display: flex; gap: 6px; align-items: center; justify-content: center; border-color: var(--violet); background: var(--violet); }
.thumb-batch { gap: 5%; }
.thumb-batch img { flex: none; width: 26%; min-width: 0; aspect-ratio: 4 / 5; border-radius: var(--r-xs); object-fit: cover; box-shadow: 0 8px 14px -8px rgb(var(--black-rgb) / 60%); }
.thumb-batch img:nth-child(2) { width: 30%; }
.thumb-learn { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px; background: var(--white); }
.thumb-learn div { display: grid; grid-template-columns: 58px 1fr; gap: 6px; align-items: center; font-size: 9.5px; font-weight: 700; color: var(--ink-2); }
.thumb-learn i { display: block; height: 7px; border-radius: 7px; background: var(--violet); }
.thumb-learn i.lime { background: var(--lime); }
.thumb-mix { display: flex; flex-direction: column; justify-content: center; align-items: center; border-color: var(--ink); background: var(--ink); }
.thumb-mix b { font-weight: 850; font-size: 30px; letter-spacing: -0.05em; color: var(--lime); }
.thumb-mix span { font-size: 11px; font-weight: 700; color: var(--on-dark-2); }

.demo-quote { display: grid; grid-template-columns: 48px 1fr; gap: 16px; margin-top: 34px; }
.demo-quote > img { width: 48px; height: 48px; border-radius: 50%; }
.demo-quote blockquote { font: italic 400 22px/1.35 var(--serif); }
.demo-quote figcaption { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.demo-quote figcaption strong { font-weight: 700; color: var(--ink-2); }

@media (max-width: 1060px) {
  .demo-grid { grid-template-columns: 1fr 440px; gap: 0 40px; }
  .demo-head h1 { font-size: 56px; }
  .agenda-item { grid-template-columns: 110px 1fr; }
  .thumb { height: 80px; }
  .mins { display: none; }
}
@media (max-width: 860px) {
  .demo-grid { grid-template-columns: 1fr; grid-template-areas: "head" "form" "more"; gap: 30px; }
  .demo-form { position: static; max-width: 560px; }
}
@media (max-width: 700px) {
  .demo-page { padding: 36px 0 70px; }
  .demo-head h1 { font-size: 44px; }
  .agenda-item { grid-template-columns: 96px 1fr; gap: 14px; }
  .thumb { height: 72px; }
  .agenda-item b { font-size: 16px; }
  .agenda-item p { font-size: 13.5px; }
  .thumb-learn span { display: none; }
  .thumb-tag { left: 6px; bottom: 6px; padding: 3px 5px; font-size: 9.5px; white-space: nowrap; }
  .thumb-learn div { grid-template-columns: 1fr; }
  .demo-quote blockquote { font-size: 19px; }
}