/* home.css: layout for the homepage sections. Strict 12 column grid, DOM order equals reading order. */

.h-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.c-card--fill .c-card__media { aspect-ratio: 3 / 2; }
.c-card .c-mini { min-height: 200px; }
@media (min-width: 900px) {
  .h-grid { grid-template-columns: repeat(12, 1fr); gap: var(--space-5); }
  .c-card--8 { grid-column: span 8; }
  .c-card--4 { grid-column: span 4; }
  .c-card--12 { grid-column: 1 / -1; }
  .c-card--8 .c-card__media { aspect-ratio: 16 / 9; }
  .c-card--fill .c-card__media { aspect-ratio: auto; flex: 1; min-height: 180px; }
  .c-card--split { flex-direction: row; }
  .c-card--split .c-card__media { flex: 7; aspect-ratio: auto; min-height: 340px; }
  .c-card--split .c-card__body { flex: 5; justify-content: center; padding: clamp(28px, 4vw, 56px); }
  .c-card--8 > .c-mini { aspect-ratio: auto; flex: 1; }
}

/* Bring to Local */
.h-btl { display: grid; gap: var(--space-8); }
@media (min-width: 1000px) { .h-btl { grid-template-columns: 5fr 7fr; gap: var(--space-9); align-items: start; } .h-btl__ui { position: sticky; top: calc(var(--nav-h) + 32px); } }
.h-btl h2 { font-size: var(--step-4); line-height: 1.04; }
.h-btl__lede { margin-top: var(--space-5); color: var(--text-dim); font-size: var(--step-1); line-height: 1.5; max-width: 44ch; }
.h-btl__steps { margin-top: var(--space-7); }
.h-btl__targets { margin-top: var(--space-6); }
.h-btl__targets .c-label { margin-bottom: var(--space-3); }
.h-btl__cta { margin-top: var(--space-6); }
.h-btl__ui .c-frame__body { gap: 4px; font-size: 0.8125rem; }
.h-btl__ui .t-gap { margin-top: 14px; }
.h-btl__ui figcaption { margin-top: var(--space-4); color: var(--text-faint); font-size: var(--step--1); }

/* WrkMate */
.h-wm { display: grid; gap: var(--space-7); }
.h-wm__frame { max-width: 960px; }
.h-wm__lines { margin-top: var(--space-6); display: grid; gap: var(--space-5); }

/* Three columns */
.h-cols { display: grid; gap: var(--space-7) var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 900px) { .h-cols--3 { grid-template-columns: repeat(3, 1fr); } }
.h-proof { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-top: var(--space-9); }
@media (min-width: 640px) { .h-proof { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .h-proof { grid-template-columns: repeat(5, 1fr); } }
.h-ai-img { margin-bottom: var(--space-8); aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-md); }
.h-ai-img picture, .h-ai-img img { width: 100%; height: 100%; }
.h-ai-img img { object-fit: cover; }
@media (min-width: 900px) { .h-ai-img { aspect-ratio: 21 / 9; } }

@media (min-width: 640px) { @media (min-width: 1100px) { 
/* More on the platform */
.h-more { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.h-more .c-card__body { padding: clamp(24px, 3vw, 40px); }
.h-more__app { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 560px) { .h-more__app { grid-template-columns: 1fr 232px; } }
.h-more__list { display: grid; gap: var(--space-4); margin-top: var(--space-3); }
.h-more__list li { border-top: 1px solid var(--line); padding-top: var(--space-3); color: var(--text-dim); line-height: 1.5; }
.h-more__list b { display: block; color: var(--text); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.h-more__list a { color: var(--text); font-weight: 700; }
.h-more__prices { display: grid; gap: 0; margin-top: var(--space-3); border-top: 1px solid var(--line); }
.h-more__prices li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-4); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text-dim); font-size: 0.9375rem; }
.h-more__prices b { color: var(--text); font-variant-numeric: tabular-nums; }
.h-more__prices a { color: var(--text); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.h-more__note { margin-top: var(--space-4); font-size: 0.9375rem; }
.h-more__note a { color: var(--text); font-weight: 700; }

.h-faq-grid { display: grid; gap: var(--space-7); }
@media (min-width: 1000px) { .h-faq-grid { grid-template-columns: 4fr 8fr; gap: var(--space-9); } .h-faq-grid .c-sechead { margin-bottom: 0; position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; } }

.h-btl__note { margin-top: var(--space-4); color: var(--text-dim); font-size: 0.9375rem; max-width: 46ch; }
.h-more > :nth-child(1) { grid-column: auto; }
@media (min-width: 900px) {
  .h-more { grid-template-columns: repeat(12, 1fr); }
  .h-more > :nth-child(1) { grid-column: span 7; }
  .h-more > :nth-child(2) { grid-column: span 5; }
  .h-more > :nth-child(3) { grid-column: span 5; }
  .h-more > :nth-child(4) { grid-column: span 7; }
}

.h-wm__stats { margin-top: var(--space-9); }
.h-wm__lines + .h-wm__stats { margin-top: var(--space-9); }

.h-more__prices span small { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.4; color: var(--text-faint); }
.h-guard { max-width: 64ch; margin-top: var(--space-8); }