/* The home page's later sheets: guidelines (dark), how it works with the apps and the privacy lines (white),
   teams and classes (dark), and the questions on paper sliding over them. Built on the sheets in pages.css. */

/* Guidelines: three kinds of rule, then the Guidelines card from Activity beside a few words */
.gl { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 32px; align-items: center; margin-top: 14px; padding: 12px 12px 12px 36px; border-radius: 34px; background: rgb(255 255 255 / 0.06); }
.gl-copy h3 { margin: 12px 0 0; font: 400 clamp(28px, 3vw, 40px)/1.05 var(--font-display); letter-spacing: -0.04em; text-wrap: balance; }
.gl-copy p { margin: 14px 0 0; max-width: 380px; font-size: 17px; line-height: 1.5; color: rgb(255 255 255 / 0.72); }
.gl-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 26px; background: var(--paper); color: var(--ink); }
.ld .sx.dark .gl-card b { color: var(--ink); }
.gl-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.gl-h b { font-size: 15px; font-weight: 600; }
.gl-h small { font-size: 13.5px; color: var(--muted); }
.gl-h em { display: inline-flex; align-items: center; gap: 7px; height: 28px; margin-left: auto; padding: 0 12px; border-radius: 999px; background: var(--lav); color: var(--blue); font-style: normal; font-size: 12.5px; font-weight: 650; }
.gl-h em i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.gl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-chips > span { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 13px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--rule); font-size: 13.5px; font-weight: 550; line-height: 1.3; }
.gl-chips svg { flex: none; width: 15px; height: 15px; color: var(--blue); }
.gl-ch { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 15px; background: #fff; }
.gl-ch span { min-width: 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.gl-ch b { display: block; font-size: 15px; font-weight: 600; }
.gl-from { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 0 4px; }
.gl-from small { font-size: 12.5px; font-weight: 650; color: var(--blue); }
.gl-from .gl-chips > span { min-height: 30px; padding: 4px 12px; background: var(--lav); box-shadow: none; color: var(--deep); }
.gl-from em { flex-basis: 100%; font-style: normal; font-size: 12.5px; color: var(--muted); }

/* How it works: steps, then the AI apps, then three plain lines */
.hw-works { margin-top: 104px; }
.hw-h { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 32px; align-items: end; margin-bottom: 28px; }
.hw-h .sx-label { align-self: start; }
.hw-h h3 { margin: 0; font: 400 clamp(28px, 3vw, 40px)/1.05 var(--font-display); letter-spacing: -0.04em; }
.hw-all { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 6px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.hw-all:hover { color: var(--blue); }
.hw-apps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.hw-app { display: flex; flex-direction: column; gap: 26px; min-width: 0; padding: 18px; border-radius: 22px; background: var(--paper); transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.hw-app:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -30px rgb(14 23 38 / 0.45); }
.hw-app .ai.lg { border-radius: 12px; }
.hw-app .any-tile { background: #fff; color: var(--ink); }
.hw-app b { display: block; font: 500 18px/1.2 var(--font-display); letter-spacing: -0.02em; }
.hw-app small { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--blue); }
.hw-app .ap-new { margin-left: 8px; vertical-align: 0.1em; }

.hw-trust { display: grid; grid-template-columns: 240px repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 104px; padding-top: 30px; border-top: 1px solid var(--rule); }
.hw-trust b { font: 500 22px/1.2 var(--font-display); letter-spacing: -0.02em; }
.hw-trust p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* Teams: one wide card, the photo beside the words */
.tm-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 34px; background: rgb(255 255 255 / 0.06); color: #fff; }
.tm-photo { overflow: hidden; border-radius: 26px; aspect-ratio: 3 / 2; background: var(--deep); }
.tm-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform 0.6s var(--ease); }
.tm-card:hover .tm-photo img { transform: scale(1.025); }
.tm-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 26px 26px 26px 30px; }
.tm-tag { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px; background: rgb(255 255 255 / 0.1); font-size: 13px; font-weight: 600; }
.ld .tm-card b { margin-top: auto; padding-top: 40px; font: 400 clamp(30px, 3.2vw, 46px)/1.04 var(--font-display); letter-spacing: -0.045em; text-wrap: balance; }
.tm-line { margin-top: 16px; max-width: 420px; font-size: 17px; line-height: 1.5; color: rgb(255 255 255 / 0.75); }
.tm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; }
.tm-chips i { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--peri); color: var(--deep); font-style: normal; font-size: 13.5px; font-weight: 650; }
.tm-go { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--ink); transition: transform 0.2s var(--ease); }
.tm-go svg { width: 20px; height: 20px; stroke-width: 2.2; }
.tm-card:hover .tm-go { transform: rotate(45deg); }
.tm-card + .tm-card { margin-top: 14px; }
/* The class card: the words first, then a drawn tutor (no photo): the skill that's always on, and one exchange */
.tm-card.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.tm-card.flip .tm-photo { order: 2; }
.tm-vis { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(20px, 4vw, 44px); background: var(--peri); }
.tm-sk { display: flex; align-items: center; gap: 12px; align-self: flex-start; margin-bottom: 8px; padding: 10px 20px 10px 10px; border-radius: 999px; background: #fff; }
.tm-sk .eb-ic { width: 40px; height: 40px; }
.tm-sk .eb-ic svg { width: 18px; height: 18px; }
.ld .sx.dark .tm-card .tm-sk b { margin: 0; padding: 0; font: 600 16px/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.tm-sk small { display: block; font-size: 13px; color: var(--blue); font-weight: 600; }
.tm-msg { max-width: 84%; padding: 12px 16px; font-size: 15.5px; line-height: 1.4; }
.tm-msg.me { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: var(--deep); color: #fff; }
.tm-msg.bot { display: flex; align-items: flex-start; gap: 10px; align-self: flex-start; border-radius: 20px 20px 20px 6px; background: #fff; color: var(--ink); }
.tm-msg.bot .ai { flex: none; border-radius: 50%; }

/* The questions slide over the dark sheet before them */
.ld.ed .sx.dark + .sv.alt { position: relative; margin-top: calc(var(--sheet) * -1); border-radius: var(--sheet) var(--sheet) 0 0; box-shadow: none; }

@media (max-width: 1100px) {
  .hw-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hw-h { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; }
  .hw-h .sx-label { grid-column: 1 / -1; padding-top: 0; }
  .hw-trust { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .gls .pts, .gls .pts:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
  .gls .pt { min-height: 0; }
  .gls .pt b { padding-top: 22px; }
  .gl { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 12px 12px; }
  .gl-copy { padding: 0 12px; }
  .tm-card, .tm-card.flip { grid-template-columns: minmax(0, 1fr); }
  .tm-card.flip .tm-photo { order: 0; }
  .tm-copy { padding: 20px 14px 18px; }
  .ld .tm-card b { padding-top: 24px; }
}
@media (max-width: 600px) {
  .hw-works, .hw-trust { margin-top: 72px; }
  .hw-h { grid-template-columns: minmax(0, 1fr); }
  .hw-all { padding-bottom: 0; }
  .hw-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hw-app { gap: 20px; padding: 16px; border-radius: 20px; }
  .hw-app b { font-size: 17px; }
  .tm-card { padding: 8px; border-radius: 28px; }
  .tm-photo { border-radius: 22px; }
  .tm-go { top: auto; bottom: 18px; right: 14px; width: 46px; height: 46px; }
  .tm-chips { padding-right: 56px; }
  .tm-card.flip .tm-chips { padding-right: 0; }
  .gl { padding: 22px 8px 8px; border-radius: 28px; }
  .gl-card { padding: 16px; border-radius: 22px; }
  .gl-h em { margin-left: 0; }
  .tm-vis { aspect-ratio: auto; padding: 22px 16px; }
  .tm-msg { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-app, .tm-photo img, .tm-go { transition: none; }
}