/* Models: every frontier model, by kind of work (index.html #models) */
.md { position: relative; padding: clamp(6rem, 12vw, 9rem) 0; overflow: hidden; }
.md-light { position: absolute; left: 50%; top: 14rem; width: min(70rem, 120vw); height: 34rem; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklch, #6b4cf0 22%, transparent), color-mix(in oklch, #14a8f5 8%, transparent) 55%, transparent); filter: blur(30px); opacity: .8; }
.md .sec-head { text-align: center; }
.md .sec-head .lede { margin-left: auto; margin-right: auto; max-width: 44rem; }

/* The 48-hour promise */
.md-48 { position: relative; display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); max-width: 60rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.5rem, 4vw, 2.8rem);
  border-radius: 28px; border: 1px solid color-mix(in oklch, #a78bfa 30%, transparent);
  background: linear-gradient(135deg, color-mix(in oklch, #6b4cf0 16%, var(--card)), color-mix(in oklch, #e053b0 9%, var(--card))); }
.md-48::after { content: ""; position: absolute; left: 2rem; right: 2rem; top: 0; height: 2px; border-radius: 2px; background: var(--hl); box-shadow: 0 0 18px 1px color-mix(in oklch, #c084fc 55%, transparent); }
.md-48-n { display: grid; justify-items: center; flex: none; }
.md-48-n b { font: 600 clamp(3.6rem, 7vw, 5.4rem)/.9 var(--font-display); letter-spacing: -0.05em; background: var(--hl); -webkit-background-clip: text; background-clip: text; color: transparent; }
.md-48-n span { margin-top: .35rem; font: 500 .7rem/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); }
.md-48 h3 { font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1.15; letter-spacing: -0.02em; }
.md-48 h3 sup, .md-48 p sup, .md-fine sup { font-size: .55em; color: var(--link); }
.md-48 p { margin-top: .6rem; font-size: .95rem; line-height: 1.55; color: var(--muted-foreground); max-width: 40rem; }

/* The cards */
.md-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.md-card { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem; border-radius: 24px; overflow: hidden;
  border: 1px solid var(--hair); background: color-mix(in oklch, var(--card) 82%, transparent); transition: border-color .25s ease, transform .25s ease; }
.md-card:hover { border-color: color-mix(in oklch, var(--c, #a78bfa) 45%, transparent); transform: translateY(-2px); }
.md-card::before { content: ""; position: absolute; right: -4rem; top: -4rem; width: 12rem; height: 12rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--c, #a78bfa) 22%, transparent), transparent); }
.md-llm { --c: #a78bfa; } .md-code { --c: #14a8f5; } .md-img { --c: #e879f9; } .md-vid { --c: #f5a93c; } .md-voice { --c: #6ee7b7; } .md-ctl { --c: #8b7bff; }
.md-k { display: flex; align-items: center; gap: .55rem; font: 500 .7rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in oklch, var(--c) 70%, var(--foreground)); }
.md-k svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.md-card h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.2; letter-spacing: -0.015em; }
.md-p { font-size: .9rem; line-height: 1.55; color: var(--muted-foreground); }
.md-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .5rem; list-style: none; }
.md-pills li { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .7rem; border-radius: 999px; font-size: .8rem; line-height: 1;
  color: var(--foreground); background: color-mix(in oklch, var(--c) 10%, transparent); border: 1px solid color-mix(in oklch, var(--c) 22%, transparent); }
.md-pills img { width: 14px; height: 14px; object-fit: contain; }
:root:not([data-theme="light"]) .md-pills img[src*="chatgpt"] { filter: invert(1); }
.md-fine { max-width: 48rem; margin: 2rem auto 0; text-align: center; font-size: .78rem; line-height: 1.55; color: var(--text-ghost); }

/* SOC 2 badge in Trust and control */
.soc2 { display: flex; align-items: center; gap: .9rem; margin-top: 1.4rem; padding: .9rem 1.1rem; max-width: 36rem; border-radius: 18px;
  border: 1px solid color-mix(in oklch, #6ee7b7 30%, transparent); background: color-mix(in oklch, #6ee7b7 7%, transparent); }
.soc2-seal { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: color-mix(in oklch, #6ee7b7 16%, transparent); }
.soc2-seal svg { width: 20px; height: 20px; fill: none; stroke: #6ee7b7; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.soc2 b { display: block; font: 600 1rem/1.3 var(--font-display); color: var(--foreground); }
.soc2 span:last-child { font-size: .85rem; line-height: 1.45; color: var(--muted-foreground); }
[data-theme="light"] .soc2-seal svg, [data-theme="light"] .foot-soc2 svg { stroke: #059669; }

@media (max-width: 960px) { .md-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .md-grid { grid-template-columns: 1fr; }
  .md-48 { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .md-card, .md-card:hover { transition: none; transform: none; } }