:root {
      --text: #1d1d1f;
      --muted: #6e6e73;
      --faint: #86868b;
      --bg: #ffffff;
      --gray: #f5f5f7;
      --line: #d2d2d7;
      --gold: #f5c242;
      --flame: #ff8c42;
      --dark: #0b0d1c;
      --max: 1040px;
      --radius: 22px;
      /* Liquid glass */
      --glass: rgba(255,255,255,0.56);
      --glass-strong: rgba(255,255,255,0.74);
      --glass-blur: blur(22px) saturate(180%);
      --glass-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(0,0,0,0.03), 0 1px 2px rgba(20,22,48,0.05), 0 12px 32px rgba(20,22,48,0.08);
      --rim: linear-gradient(140deg, rgba(255,255,255,0.95), rgba(255,255,255,0.25) 35%, rgba(255,255,255,0.08) 60%, rgba(255,255,255,0.7));
      --glass-dark: rgba(255,255,255,0.05);
      --glass-dark-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 20px 50px rgba(0,0,0,0.35);
      --rim-dark: linear-gradient(140deg, rgba(255,255,255,0.28), rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.14));
    }
    * { box-sizing: border-box; }
    [hidden] { display: none !important; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0; background: var(--bg); color: var(--text);
      font: 17px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    }
    a { color: inherit; }
    img { display: block; max-width: 100%; }
    .wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }
    h1, h2, h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; text-wrap: balance; }

    /* Nav: a floating glass capsule */
    .nav { position: sticky; top: 12px; z-index: 10; padding: 12px 16px 0; margin-top: -12px; pointer-events: none; }
    .nav .wrap {
      pointer-events: auto; max-width: 1000px; height: 54px; padding: 0 8px 0 16px; border-radius: 999px;
      display: flex; align-items: center; justify-content: space-between;
      background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
      box-shadow: var(--glass-shadow);
    }
    .brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 17px; text-decoration: none; letter-spacing: -0.01em; }
    .brand img { width: 28px; height: 28px; border-radius: 7px; }
    .nav nav { display: flex; align-items: center; gap: 24px; font-size: 14px; }
    .nav nav a { text-decoration: none; color: var(--text); opacity: .8; }
    .nav nav a:hover { opacity: 1; }
    /* Buttons: glossy dark primary, clear glass secondary */
    .pill {
      display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; border-radius: 999px; border: 0;
      padding: 9px 17px; font: inherit; font-size: 14px; font-weight: 500; opacity: 1 !important; cursor: pointer;
      background: linear-gradient(180deg, #3b3b40 0%, #1d1d1f 55%, #111113 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.12), 0 8px 22px rgba(29,29,31,0.22);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .pill:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.12), 0 14px 30px rgba(29,29,31,0.28); }
    .pill svg { width: 1.05em; height: 1.05em; flex: none; }
    .pill.glass { color: var(--text); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); }
    .pill.glass:hover { background: var(--glass-strong); }
    .nav nav a.pill { color: #fff; }
    /* Over dark sections the bar turns to dark glass. */
    .nav .wrap, .nav .brand, .nav nav a { transition: background .35s ease, color .35s ease, box-shadow .35s ease; }
    .nav.on-dark .wrap { background: rgba(30,31,44,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 32px rgba(0,0,0,0.3); }
    .nav.on-dark .wrap::after { background: var(--rim-dark); }
    .nav.on-dark .brand, .nav.on-dark nav a { color: #f5f5f7; }
    .nav.on-dark nav a.pill { color: var(--text); background: linear-gradient(180deg, #ffffff, #e9e9ee); box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(0,0,0,0.3); }

    /* Hero */
    .hero { text-align: center; padding: 84px 22px 0; }
    .hero h1 {
      font-size: clamp(44px, 7.2vw, 80px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02;
    }
    .hero .lede { font-size: clamp(18px, 2.1vw, 22px); color: var(--muted); max-width: 640px; margin: 22px auto 0; line-height: 1.45; }
    .hero .actions { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
    .badge {
      display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; padding: 7px 15px 7px 11px; border-radius: 999px;
      font-size: 14px; color: var(--muted); text-decoration: none; position: relative;
      background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow);
    }
    .badge b { color: var(--text); font-weight: 600; }
    .badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #30d158; box-shadow: 0 0 0 3px rgba(48,209,88,0.18); }
    /* A soft field of color behind the top of the page, for the glass to blur. */
    body { position: relative; }
    .aurora { position: absolute; left: 0; right: 0; top: 0; height: min(1000px, 100%); overflow: hidden; z-index: -1; pointer-events: none;
      -webkit-mask: linear-gradient(#000 50%, transparent); mask: linear-gradient(#000 50%, transparent); }
    .aurora i { position: absolute; border-radius: 50%; filter: blur(50px); opacity: 0.8; animation: drift 24s ease-in-out infinite alternate; }
    .aurora i:nth-child(1) { width: 620px; height: 620px; left: -6%; top: -80px; background: radial-gradient(circle, #ffa55c, transparent 66%); }
    .aurora i:nth-child(2) { width: 640px; height: 640px; right: -8%; top: -120px; background: radial-gradient(circle, #8b84ff, transparent 66%); animation-duration: 30s; }
    .aurora i:nth-child(3) { width: 520px; height: 520px; left: 30%; top: 220px; background: radial-gradient(circle, #ffd98a, transparent 66%); animation-duration: 20s; }
    .aurora i:nth-child(4) { width: 460px; height: 460px; right: 14%; top: 330px; background: radial-gradient(circle, #ff8fb6, transparent 66%); opacity: 0.55; animation-duration: 27s; }
    /* Install with an AI agent: a copyable prompt under the hero buttons. */
    .agent-install { max-width: 680px; margin: 30px auto 0; padding: 16px 18px; border-radius: 22px; text-align: left; position: relative;
      background: var(--glass); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
    .agent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .agent-head b { display: block; font-size: 15px; font-weight: 600; }
    .agent-head span { font-size: 13px; color: var(--muted); }
    .agent-head .pill { padding: 7px 14px; font-size: 13px; }
    .agent-install pre { margin: 12px 0 0; max-height: 156px; overflow: auto; padding: 12px 14px; border-radius: 12px; background: #14162a; color: #d9dbe9;
      font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
    /* The midnightoil command: a terminal card, used on the homepage and /cli. */
    .cli-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
    .cli-split h2 { margin-bottom: 18px; }
    .cli-split > div > p { font-size: clamp(17px, 1.8vw, 20px); color: var(--muted); line-height: 1.45; margin: 0 0 22px; }
    .cli-asks { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
    .cli-asks li { background: var(--glass); box-shadow: var(--glass-shadow); border-radius: 16px; padding: 12px 16px; display: grid; gap: 4px; }
    .cli-asks span { font-size: 16px; color: var(--text); }
    .cli-asks code { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); overflow-wrap: break-word; }
    .cli-split p code { font: 0.92em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--gray); padding: 1px 5px; border-radius: 5px; }
    .cli-term { border-radius: 18px; overflow: hidden; background: #14162a; color: #d9dbe9; box-shadow: 0 30px 70px rgba(20,22,42,0.28), 0 2px 8px rgba(20,22,42,0.2);
      font: 13.5px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; }
    .cli-term .bar { display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 34px; background: #1d2036; color: #a3a7c2; font: 12px -apple-system, BlinkMacSystemFont, sans-serif; }
    .cli-term .bar i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; }
    .cli-term pre { margin: 0; padding: 18px 20px 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
    .cli-term .p { color: #ffb36b; }
    .cli-term .c { color: #8f93b3; }
    .cli-term .ok { color: #7ee2a8; }
    @media (max-width: 860px) {
      .cli-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
      .cli-term { font-size: 12px; }
    }
    @keyframes drift { to { transform: translate3d(48px, 36px, 0) scale(1.1); } }
    @media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }
    .pill.big { padding: 14px 26px; font-size: 17px; }
    .link { text-decoration: none; color: #0066cc; font-size: 17px; }
    .link:hover { text-decoration: underline; }
    .link::after { content: " ›"; }
    .fineprint { color: var(--faint); font-size: 13px; margin-top: 16px; }
    .fineprint code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--gray); padding: 3px 7px; border-radius: 6px; color: var(--muted); }

    /* Product stage */
    .stage {
      position: relative; height: 620px; margin-top: 44px;
      background: radial-gradient(ellipse 50% 60% at 50% 45%, rgba(255, 176, 66, 0.22), rgba(255, 140, 66, 0.04) 55%, transparent 75%);
    }
    .stage .menu {
      position: absolute; left: 50%; top: 0; transform: translateX(-50%);
      width: 290px; border-radius: 12px;
      box-shadow: 0 30px 60px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.12);
    }
    .toast {
      position: absolute; width: 280px;
      background: rgba(255,255,255,0.68); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%);
      border-radius: 20px; padding: 12px 14px; display: flex; gap: 11px; align-items: center;
      box-shadow: var(--glass-shadow);
      font-size: 14px; line-height: 1.3; text-align: left;
    }
    .toast img { width: 36px; height: 36px; border-radius: 9px; flex: none; }
    .toast b { display: block; font-weight: 600; margin-bottom: 1px; color: var(--text); }
    .toast span { color: var(--muted); }
    .laptop .toast { z-index: 3; width: 250px; display: none; }
    @media (min-width: 1200px) {
      .laptop .toast { display: flex; }
      .toast.t1 { left: -250px; top: -10px; }
      .toast.t2 { right: -250px; top: 60px; }
      .toast.t3 { left: -240px; top: 210px; }
      .toast.t4 { right: -240px; top: 300px; }
    }

    /* Sections */
    section { padding: 96px 0; }
    section.gray { background: radial-gradient(45% 55% at 8% 0%, rgba(255,165,92,0.13), transparent 70%), radial-gradient(45% 55% at 92% 100%, rgba(139,132,255,0.13), transparent 70%), var(--gray); }
    section.dark { color: #f5f5f7; background: radial-gradient(50% 35% at 12% 18%, rgba(255,140,66,0.16), transparent 70%), radial-gradient(45% 35% at 88% 55%, rgba(120,110,255,0.18), transparent 70%), radial-gradient(40% 30% at 30% 92%, rgba(255,120,170,0.10), transparent 70%), var(--dark); }
    #showcase + section.dark { padding-top: 56px; }
    .section-head { max-width: 720px; margin-bottom: 44px; }
    .section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
    h2 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; }
    .section-head p { font-size: clamp(17px, 1.8vw, 20px); color: var(--muted); margin: 16px 0 0; line-height: 1.45; }
    section.dark .section-head p { color: #a1a1a6; }

    /* Bento */
    .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
    .tile {
      background: var(--glass); border-radius: 28px; overflow: hidden; position: relative;
      display: flex; flex-direction: column; box-shadow: var(--glass-shadow);
      -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    }
    section.dark .tile { background: var(--glass-dark); box-shadow: var(--glass-dark-shadow); }
    .tile .copy { padding: 26px 26px 0; }
    .tile h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px; }
    .tile p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
    section.dark .tile p { color: #a1a1a6; }
    .tile .art { margin-top: 22px; padding: 0 0 0 26px; flex: 1; display: flex; align-items: flex-end; overflow: hidden; }
    .tile .art img { border-radius: 10px 0 0 0; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
    .tile .art.center { padding: 0 20px 20px; align-items: center; justify-content: center; }
    .tile .art.center svg { width: 100%; max-width: 100%; height: auto; }
    .extras-head { text-align: center; margin: 72px 0 28px; }
    .extras-head h3 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
    .extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px; max-width: 980px; margin: 0 auto; }
    .extra svg { width: 26px; height: 26px; margin-bottom: 10px; }
    .extra h4 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
    .extra p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
    section.dark .extra p { color: #a1a1a6; }
    .span-4 { grid-column: span 4; }
    .span-2 { grid-column: span 2; }
    .lampart {
      width: 100%; min-height: 220px; display: grid; place-items: center;
      background: radial-gradient(ellipse at 50% 60%, rgba(255,170,60,0.30), transparent 60%);
    }
    .lampart img { width: 150px; box-shadow: none !important; border-radius: 34px !important; }

    /* Trust */
    .trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
    .trust h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }
    .trust p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
    .trust code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; }
    .trust .num { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); line-height: 1; margin-bottom: 12px; }

    /* FAQ */
    .faq { max-width: 780px; margin: 0 auto; padding: 4px 30px; border-radius: 28px; position: relative; background: var(--glass); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
    .faq details { border-bottom: 1px solid rgba(0,0,0,0.07); }
    .faq details:last-of-type { border-bottom: 0; }
    .faq summary { cursor: pointer; list-style: none; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after { content: "+"; color: var(--faint); font-weight: 400; font-size: 26px; line-height: 1; }
    .faq details[open] summary::after { content: "−"; }
    .faq p { color: var(--muted); margin: -6px 0 22px; line-height: 1.55; }

    /* CTA + footer */
    .cta { text-align: center; background: radial-gradient(40% 60% at 22% 40%, rgba(255,165,92,0.30), transparent 70%), radial-gradient(40% 60% at 78% 60%, rgba(139,132,255,0.30), transparent 70%), radial-gradient(30% 40% at 50% 100%, rgba(255,143,182,0.20), transparent 70%); }
    .cta h2 { margin-bottom: 26px; }
    .cta-card { max-width: 760px; margin: 0 auto; padding: 52px 32px 40px; border-radius: 36px; position: relative;
      background: var(--glass); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
    .cta-card img { margin: 0 auto 18px; width: 96px; height: 96px; filter: drop-shadow(0 12px 22px rgba(20,22,48,0.22)); }
    .cta-card h2 { margin-bottom: 10px; }
    .cta-card > p:not(.fineprint) { font-size: clamp(17px, 1.8vw, 20px); color: var(--muted); margin: 0; }
    .cta .actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
    #free { background: radial-gradient(45% 50% at 15% 30%, rgba(255,165,92,0.16), transparent 70%), radial-gradient(45% 50% at 85% 75%, rgba(139,132,255,0.16), transparent 70%); }
    footer { background: var(--gray); color: var(--faint); font-size: 12px; padding: 22px 0 40px; }
    footer .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 18px; }
    footer a { color: var(--muted); text-decoration: underline; text-decoration-color: rgba(0,0,0,0.18); text-underline-offset: 3px; }
    .footer-alts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
    .footer-alts .label { color: var(--text); font-weight: 600; }
    footer a:hover { color: var(--text); }

    /* Use cases */
    .cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
    .case { background: var(--glass); border-radius: 28px; padding: 26px 26px 0; overflow: hidden; display: flex; flex-direction: column; position: relative; box-shadow: var(--glass-shadow); }
    .cases.dark .case { background: var(--glass-dark); box-shadow: var(--glass-dark-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
    .cases.dark .case h3 { color: #f5f5f7; }
    .cases.dark .case p { color: #a1a1a6; }
    .cases.dark .case .ill svg { filter: none; }
    .cases.dark .case .ill svg [stroke="#1d1d1f"], .cases.dark .case .ill svg { --ink: #f5f5f7; }
    .case .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--flame); margin-bottom: 8px; }
    .case h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
    .case p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
    .case .ill { margin-top: 18px; flex: 1; display: flex; align-items: flex-end; justify-content: center; }
    .case .ill svg { width: 100%; max-width: 300px; height: auto; display: block; }

    /* Showcase: day fades to night */
    .showcase { padding: 140px 0 0; background: transparent; color: #f5f5f7; overflow: hidden; }
    .showcase .wrap { max-width: none; padding: 0; }
    .showcase-head { padding: 0 22px; }
    .night-stage {
      padding: 150px 22px 48px;
      background: linear-gradient(180deg, #ffffff 0%, #eceef4 12%, #b9bdd0 28%, #4a4e74 48%, #1b1e36 66%, #0b0d1c 82%, #0b0d1c 100%);
    }
    .showcase-head { text-align: center; max-width: 720px; margin: 0 auto -40px; color: var(--text); position: relative; z-index: 1; }
    .showcase-head h2 { color: inherit; }
    .showcase-head p { font-size: clamp(17px, 1.8vw, 20px); color: var(--muted); margin: 16px 0 0; line-height: 1.45; }
    .laptop { position: relative; max-width: 900px; margin: 0 auto; }
    .laptop .lid {
      position: relative; background: #1a1c2c; border-radius: 22px 22px 6px 6px; padding: 14px 14px 16px;
      box-shadow: 0 50px 120px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.08);
    }
    .laptop .notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 120px; height: 12px; background: #1a1c2c; border-radius: 0 0 8px 8px; }
    .laptop .display {
      position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 10;
      background: radial-gradient(ellipse at 30% 0%, #2c2f55, #14162a 55%, #0d0f22 100%);
    }
    .laptop .base { height: 16px; background: linear-gradient(#2a2d45, #1a1c2c); border-radius: 0 0 16px 16px; margin: 0 -26px; position: relative; box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
    .laptop .base .lip { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 140px; height: 5px; background: #0f1120; border-radius: 0 0 6px 6px; }
    .laptop .glow { position: absolute; inset: auto 10% -60px; height: 120px; background: radial-gradient(ellipse at 50% 100%, rgba(255,140,66,0.35), transparent 70%); filter: blur(10px); z-index: -1; }
    .menubar {
      height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px;
      background: rgba(255,255,255,0.06); backdrop-filter: blur(20px); font: 12.5px -apple-system, BlinkMacSystemFont, sans-serif; color: #e8e9f2;
    }
    .menubar .left, .menubar .right { display: flex; align-items: center; gap: 14px; }
    .menubar .apple { width: 12px; height: 14px; background: #e8e9f2; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 170'><path d='M150 130c-3 7-7 14-12 21-7 9-13 15-17 18-7 5-14 8-22 8-6 0-13-2-21-5-8-3-15-5-21-5-7 0-14 2-22 5-8 3-14 5-19 5-8 0-16-3-23-9-4-4-10-10-17-19C7 137 0 116 0 96c0-19 4-35 12-48 7-10 15-19 25-25 10-6 21-9 33-9 6 0 15 2 25 6 10 4 17 6 20 6 2 0 9-2 21-7 11-4 21-6 29-5 21 2 37 10 47 26-19 12-29 28-28 49 0 16 6 30 18 40 5 5 11 9 18 12-1 4-3 8-5 12z'/><path d='M120 4c0 14-5 27-15 39-12 14-27 22-43 21-1-2-1-4-1-6 0-13 6-27 16-39 5-6 11-11 19-15 8-4 15-6 22-7 1 3 1 5 2 7z'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 170'><path d='M150 130c-3 7-7 14-12 21-7 9-13 15-17 18-7 5-14 8-22 8-6 0-13-2-21-5-8-3-15-5-21-5-7 0-14 2-22 5-8 3-14 5-19 5-8 0-16-3-23-9-4-4-10-10-17-19C7 137 0 116 0 96c0-19 4-35 12-48 7-10 15-19 25-25 10-6 21-9 33-9 6 0 15 2 25 6 10 4 17 6 20 6 2 0 9-2 21-7 11-4 21-6 29-5 21 2 37 10 47 26-19 12-29 28-28 49 0 16 6 30 18 40 5 5 11 9 18 12-1 4-3 8-5 12z'/><path d='M120 4c0 14-5 27-15 39-12 14-27 22-43 21-1-2-1-4-1-6 0-13 6-27 16-39 5-6 11-11 19-15 8-4 15-6 22-7 1 3 1 5 2 7z'/></svg>") center/contain no-repeat; }
    .menubar b { font-weight: 600; }
    .menubar .flame { display: inline-flex; align-items: center; gap: 5px; color: #ffb36b; font-weight: 500; }
    .menubar .flame svg { width: 11px; height: 13px; }
    .menubar .glyph { display: inline-block; height: 11px; border-radius: 2px; background: #e8e9f2; opacity: .9; }
    .menubar .wifi { width: 14px; -webkit-mask: radial-gradient(circle at 50% 100%, #000 0 15%, transparent 16% 33%, #000 34% 48%, transparent 49% 66%, #000 67% 82%, transparent 83%); mask: radial-gradient(circle at 50% 100%, #000 0 15%, transparent 16% 33%, #000 34% 48%, transparent 49% 66%, #000 67% 82%, transparent 83%); }
    .menubar .batt { width: 22px; border: 1.5px solid #e8e9f2; background: linear-gradient(90deg, #e8e9f2 0 62%, transparent 62%); box-sizing: border-box; }
    .openmenu { position: absolute; top: 28px; right: 6.5%; width: 25%; border-radius: 8px; box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.12); z-index: 2; }
    .notif {
      position: absolute; top: 40px; right: 16px; width: 300px; display: flex; gap: 10px; align-items: center;
      background: rgba(40,43,66,0.85); backdrop-filter: blur(20px); border-radius: 14px; padding: 10px 12px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 0.5px rgba(255,255,255,0.12); font: 12.5px/1.3 -apple-system, BlinkMacSystemFont, sans-serif; z-index: 2;
    }
    .notif img { width: 34px; height: 34px; border-radius: 8px; }
    .notif b { display: block; font-weight: 600; color: #fff; }
    .notif span { color: #b7b9c9; }
    .term {
      position: absolute; left: 3.5%; right: 30%; top: 44px; bottom: 30px; border-radius: 10px; overflow: hidden;
      background: #14162a; box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(255,255,255,0.1);
      font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
    }
    .term .bar { display: flex; align-items: center; gap: 12px; padding: 0 12px; height: 28px; background: #1d2036; font: 12px -apple-system, BlinkMacSystemFont, sans-serif; color: #c7c9d9; }
    .term .bar .dots span { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; }
    .term pre { margin: 0; padding: 14px 16px; white-space: pre-wrap; color: #d9dbe9; }
    .term .t { color: #8f93b3; }
    .term .ok { color: #7ee2a8; }
    .term .you { color: #ffb36b; }
    .term .dim { color: #a3a7c2; }
    .term .cursor { display: inline-block; width: 7px; height: 14px; background: #d9dbe9; vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
    @keyframes blink { 50% { opacity: 0; } }
    @media (max-width: 720px) {
      .showcase-head h2 br { display: none; }
      .showcase { padding-top: 88px; }
      .showcase-head { margin-bottom: -30px; }
      .night-stage { padding-top: 100px; }
      .laptop .notch { display: none; }
      .laptop .base { margin: 0 -10px; }
      .term { left: 3%; right: 3%; top: 32px; bottom: 12px; font-size: 8.5px; }
      .term pre { position: absolute; top: 28px; bottom: 0; left: 0; right: 0; overflow: hidden; padding: 8px 10px; }
      .openmenu { display: none; }
      .term pre { padding: 8px 10px; }
      .notif { display: none; }
      .menubar { font-size: 10px; padding: 0 8px; }
      .menubar .left span:not(.apple) { display: none; }
    }

    /* Terminal mockup */
    .night { background: #0b0d1c; color: #f5f5f7; border-top: 1px solid rgba(255,255,255,0.08); }
    .screen {
      max-width: 860px; margin: 0 auto; border-radius: 14px; overflow: hidden;
      background: #14162a; box-shadow: 0 40px 90px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(255,255,255,0.1);
      font: 13.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
    }
    .screen .bar { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; height: 30px; background: #1d2036; font: 12.5px -apple-system, BlinkMacSystemFont, sans-serif; color: #c7c9d9; }
    .screen .bar .left { display: flex; align-items: center; gap: 14px; }
    .screen .bar .dots span { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; }
    .screen .bar .right { display: flex; align-items: center; gap: 10px; }
    .screen .bar .flame { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,140,66,0.18); color: #ffb36b; border-radius: 6px; padding: 2px 7px; font-weight: 500; }
    .screen .bar .flame svg { width: 12px; height: 13px; }
    .screen pre { margin: 0; padding: 18px 20px 22px; white-space: pre-wrap; color: #d9dbe9; }
    .screen .t { color: #6e7291; }
    .screen .ok { color: #7ee2a8; }
    .screen .you { color: #ffb36b; }
    .screen .dim { color: #8a8ea8; }
    .screen .cursor { display: inline-block; width: 8px; height: 15px; background: #d9dbe9; vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
    @keyframes blink { 50% { opacity: 0; } }
    .caption { text-align: center; color: #a1a1a6; font-size: 14px; margin-top: 18px; }

    /* Comparison */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
    .compare th, .compare td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
    .compare th { font-weight: 600; font-size: 14px; color: var(--muted); }
    .compare th:first-child, .compare td:first-child { padding-left: 0; color: var(--text); font-weight: 500; }
    .compare thead th.us { color: var(--text); }
    .compare td.us { background: rgba(245,194,66,0.10); font-weight: 500; }
    .compare .y { color: #1d1d1f; }
    .compare .n { color: var(--faint); }
    .compare .note { display: block; font-weight: 400; color: var(--muted); font-size: 13px; margin-top: 2px; }

    /* Proof */
    .proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .proof span a { color: var(--text); }
    .proof b span { font-size: inherit; display: inline; color: inherit; }
    .stars {
      display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; position: relative;
      padding: 7px 14px; border-radius: 980px; background: var(--glass); box-shadow: var(--glass-shadow); color: var(--text);
      font-size: 14px; font-weight: 500; text-decoration: none;
    }
    .stars:hover { background: var(--glass-strong); }
    .stars svg { color: var(--gold); }
    .proof > div { background: var(--glass); border-radius: 24px; padding: 24px; position: relative; box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
    .proof b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 4px; }
    .proof span { color: var(--muted); font-size: 14px; line-height: 1.4; display: block; }
    .founder { max-width: 760px; margin: 0 auto; display: flex; gap: 22px; align-items: flex-start; color: var(--muted); font-size: 18px; line-height: 1.55; }
    .founder img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
    .founder p { margin: 0; }
    .founder strong { color: var(--text); font-weight: 600; }
    .founder cite { display: block; font-style: normal; font-size: 14px; color: var(--faint); margin-top: 10px; }
    .frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
    .frame { background: var(--glass); border-radius: 28px; padding: 14px; position: relative; box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
    .frame .shot { height: 300px; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; background: linear-gradient(160deg, #eef0f7, #e4e6f0); border-radius: 18px; padding: 22px 18px 0; }
    .frame img { width: auto; max-width: 100%; max-height: 100%; height: auto; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,0.14), 0 0 0 0.5px rgba(0,0,0,0.1); }
    .frame > div:not(.shot) { padding: 16px 4px 2px; }
    .frame > div:not(.shot) b { display: block; font-size: 17px; margin-bottom: 4px; letter-spacing: -0.01em; }
    .frame > div:not(.shot) span { color: var(--muted); font-size: 15px; line-height: 1.45; }
    @media (max-width: 900px) { .frames { grid-template-columns: 1fr; } .founder { flex-direction: column; } }

    @media (max-width: 900px) {
      .cases { grid-template-columns: 1fr; }
      .proof { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 720px) {
      .compare { font-size: 13px; }
      .compare th, .compare td { padding: 10px 6px; }
      .proof { grid-template-columns: 1fr 1fr; gap: 12px; }
      .proof > div { padding: 18px; }
      .proof b { font-size: 24px; }
    }

    @media (max-width: 900px) {
      .bento { grid-template-columns: 1fr 1fr; }
      .span-4, .span-2 { grid-column: span 2; }
      .extras { grid-template-columns: 1fr 1fr; gap: 26px 28px; }
      .extras-head { margin-top: 56px; }
      .trust { grid-template-columns: 1fr; gap: 28px; }
    }
    @media (max-width: 720px) {
      .nav nav a:not(.pill) { display: none; }
      .hero { padding-top: 56px; }
      .hero .actions, .cta .actions { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; }
      .hero .actions .pill, .cta .actions .pill { justify-content: center; }
      .cta-card { padding: 40px 20px 32px; }

      section { padding: 64px 0; }
    }

    /* Hi-fi Mac UI mockups, drawn in code. Light Settings-window look, sized like the old 640px screenshots. */
    .mk-win { width: 640px; height: 400px; overflow: hidden; background: #fff; color: #1d1d1f; border-radius: 12px 12px 0 0;
      box-shadow: 0 10px 30px rgba(0,0,0,0.25); font: 13px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; text-align: left; position: relative; }
    .mk-toolbar { display: flex; justify-content: safe center; gap: 1px; padding: 9px 8px 7px; border-bottom: 1px solid #e6e6e9; background: #fbfbfd; }
    .mk-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 6px 4px; border-radius: 8px; font-size: 10.5px; color: #6e6e73; white-space: nowrap; }
    .mk-tab svg { width: 21px; height: 21px; fill: none; stroke: #77777c; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .mk-tab.on { background: #ececf0; color: #0a64e8; }
    .mk-tab.on svg { stroke: #0a64e8; }
    .mk-pane { padding: 16px 20px; }
    .mk-intro { display: flex; gap: 11px; background: #f5f5f7; border-radius: 10px; padding: 11px 13px; color: #6e6e73; font-size: 12px; line-height: 1.4; }
    .mk-intro svg { flex: none; width: 20px; height: 20px; fill: none; stroke: #ff8c42; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
    .mk-h { font-size: 12.5px; font-weight: 600; margin: 16px 4px 7px; }
    .mk-group { background: #f5f5f7; border-radius: 10px; padding: 0 13px; }
    .mk-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #e3e3e7; }
    .mk-row:last-child { border-bottom: 0; }
    .mk-row .mk-text { flex: 1; min-width: 0; }
    .mk-title { font-size: 13px; }
    .mk-sub { font-size: 11.5px; color: #86868b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mk-switch { flex: none; width: 31px; height: 18px; border-radius: 9px; background: #0a64e8; position: relative; }
    .mk-switch::after { content: ""; position: absolute; top: 1.5px; right: 1.5px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
    .mk-switch.off { background: #e1e1e6; }
    .mk-switch.off::after { right: auto; left: 1.5px; }
    .mk-btn { flex: none; font-size: 11.5px; background: #e6e6eb; border-radius: 6px; padding: 3px 10px; }
    .mk-minus { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.3px solid #8e8e93; position: relative; }
    .mk-minus::after { content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 1.3px; background: #8e8e93; }
    .mk-add { display: inline-block; margin: 9px 0; font-size: 12px; background: #e6e6eb; border-radius: 6px; padding: 4px 11px; }
    /* A menu bar dropdown floating over a mockup: the running-session card. */
    .mk-menu { position: absolute; right: 18px; bottom: 18px; width: 262px; padding: 11px 13px; border-radius: 11px;
      background: rgba(40, 42, 58, 0.92); color: #f5f5f7; box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 0.5px rgba(255,255,255,0.12);
      -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: flex; gap: 10px; }
    .mk-menu b { display: block; font-size: 12.5px; font-weight: 600; }
    .mk-menu span { display: block; font-size: 11.5px; color: #c7c7cc; font-variant-numeric: tabular-nums; }
    .mk-menu small { display: block; font-size: 10.5px; color: #8e8e93; margin-top: 1px; }

    /* Code-drawn NSMenu. Sized in em so it scales: set font-size on the wrapper. */
    .mk-menus { display: flex; align-items: flex-start; font-size: 13px; text-align: left; }
    .mk-nsmenu { width: 18.5em; padding: 0.38em 0.38em; border-radius: 0.8em; background: rgba(246,246,248,0.97); color: #1d1d1f;
      box-shadow: 0 0.9em 2.3em rgba(0,0,0,0.16), 0 0 0 0.5px rgba(0,0,0,0.14); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; line-height: 1.25; }
    .mk-nsmenu.dark { background: rgba(44,44,48,0.94); color: #f2f2f4; box-shadow: 0 1.8em 4.5em rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.14); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
    .mk-nsmenu.sub { width: 8.6em; margin: 6.05em 0 0 -0.25em; }
    .mk-item { display: flex; align-items: center; justify-content: space-between; padding: 0.22em 0.62em; border-radius: 0.35em; font-size: 1em; white-space: nowrap; }
    .mk-item .k { color: #b0b0b5; font-size: 0.92em; }
    .mk-nsmenu.dark .mk-item .k { color: #7c7c82; }
    .mk-item .chev { width: 0.45em; height: 0.45em; border: solid currentColor; border-width: 0.12em 0.12em 0 0; transform: rotate(45deg); margin-right: 0.2em; opacity: 0.8; }
    .mk-item.hl { background: #0a64e8; color: #fff; }
    .mk-item.hl .k { color: rgba(255,255,255,0.75); }
    .mk-sep { height: 1px; margin: 0.32em 0.62em; background: rgba(0,0,0,0.1); }
    .mk-nsmenu.dark .mk-sep { background: rgba(255,255,255,0.12); }
    .mk-card { display: flex; gap: 0.7em; padding: 0.3em 0.62em 0.45em; }
    .mk-card b { display: block; font-weight: 600; }
    .mk-card .d { display: block; font-size: 0.92em; color: #8a8a8f; font-variant-numeric: tabular-nums; }
    .mk-nsmenu.dark .mk-card .d { color: #a1a1a6; }
    .mk-card .t { display: block; font-size: 0.85em; color: #a1a1a6; margin-top: 0.05em; }
    .mk-check { display: flex; align-items: center; gap: 0.45em; font-size: 0.92em; margin-top: 0.38em; }
    .mk-check i { width: 1.05em; height: 1.05em; border-radius: 0.25em; background: #fff; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.25); position: relative; }
    .mk-nsmenu.dark .mk-check i { background: rgba(255,255,255,0.14); box-shadow: none; }
    .mk-check i.on { background: #0a64e8; box-shadow: none; }
    .mk-check i.on::after { content: ""; position: absolute; left: 0.34em; top: 0.12em; width: 0.28em; height: 0.56em; border: solid #fff; border-width: 0 0.13em 0.13em 0; transform: rotate(45deg); }
    .mk-check + .mk-check { margin-top: 0.22em; }
    .mk-bar { display: flex; justify-content: flex-end; gap: 0.9em; align-items: center; padding: 0.3em 0.8em; margin: -0.2em 0 0.45em; font-size: 0.95em; color: #1d1d1f; }
    .mk-bar svg { width: 0.95em; height: 1.2em; fill: none; stroke: #1d1d1f; stroke-width: 2.2; }
    .mk-bar .lit { background: rgba(0,0,0,0.1); border-radius: 0.3em; padding: 0.15em 0.45em; display: flex; }
    .frame .shot .mk-menus { font-size: 12px; }
    /* The menu plus its submenu: drop the shortcut column so both fit the frame. */
    .frame .shot .mk-menus.wide { font-size: 11px; }
    .mk-menus.wide .mk-nsmenu:not(.sub) { width: 14.6em; }
    .mk-menus.wide .mk-nsmenu:not(.sub) .k { display: none; }
    div.openmenu { font-size: clamp(7px, 0.86vw, 13px); box-shadow: none; border-radius: 0; }
    .openmenu .mk-nsmenu { width: 100%; }

    @media (max-width: 720px) { .extras { grid-template-columns: 1fr; gap: 22px; } }

    /* Code-drawn Teams dashboard (web) mockups. */
    .mk-web { width: 640px; height: 400px; overflow: hidden; background: #f5f5f7; color: #1d1d1f; border-radius: 12px 12px 0 0;
      box-shadow: 0 10px 30px rgba(0,0,0,0.25); font: 13px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; text-align: left; position: relative; }
    .mk-web .bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #e9e9ed; }
    .mk-web .bar i { width: 10px; height: 10px; border-radius: 50%; background: #c9c9cf; }
    .mk-web .bar span { margin-left: 10px; flex: 1; max-width: 300px; background: #fff; border-radius: 6px; padding: 3px 10px; font-size: 11px; color: #6e6e73; }
    .mk-web .top { display: flex; align-items: center; gap: 18px; padding: 10px 18px; background: #fff; border-bottom: 1px solid #e6e6e9; font-size: 12px; color: #6e6e73; }
    .mk-web .top b { color: #1d1d1f; font-size: 13px; }
    .mk-web .top .on { color: #1d1d1f; }
    .mk-web .page { padding: 16px 18px; }
    .mk-web h4 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
    .mk-web .sub { color: #6e6e73; font-size: 12px; margin: 2px 0 12px; }
    .mk-web .card { background: #fff; border-radius: 10px; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.1); padding: 10px 14px; }
    .mk-web table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .mk-web th { text-align: left; font-weight: 500; color: #6e6e73; padding: 6px 4px; border-bottom: 1px solid #ececf0; }
    .mk-web td { padding: 8px 4px; border-bottom: 1px solid #f2f2f5; white-space: nowrap; }
    .mk-web tr:last-child td { border-bottom: 0; }
    .mk-web .pill-on { background: #1d1d1f; color: #fff; border-radius: 6px; padding: 1px 7px; font-size: 11px; }
    .mk-web .pill-off { background: #ececf0; color: #1d1d1f; border-radius: 6px; padding: 1px 7px; font-size: 11px; }
    .mk-web .muted { color: #86868b; }
    .mk-web .check { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; }
    .mk-web .check i { flex: none; width: 13px; height: 13px; border-radius: 3px; background: #0a64e8; margin-top: 2px; position: relative; }
    .mk-web .check i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
    .mk-web .check i.off { background: #fff; box-shadow: inset 0 0 0 1px #c7c7cc; }
    .mk-web .check i.off::after { display: none; }
    .mk-web .field { border: 1px solid #e3e3e7; border-radius: 7px; padding: 5px 9px; font-size: 12px; background: #fff; margin-top: 4px; }
    .mk-web .btn { display: inline-block; background: #1d1d1f; color: #fff; border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 500; margin-top: 10px; }
    /* A Slack message and a JSON payload, for the webhook feature. */
    .mk-slack { width: 560px; background: #fff; color: #1d1d1f; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.25);
      font: 14px/1.45 -apple-system, BlinkMacSystemFont, sans-serif; text-align: left; padding: 14px 16px; }
    .mk-slack .msg { display: flex; gap: 10px; padding: 6px 0; }
    .mk-slack .avatar { flex: none; width: 34px; height: 34px; border-radius: 7px; background: #1a1c2c; display: grid; place-items: center; }
    .mk-slack .avatar svg { width: 18px; height: 18px; }
    .mk-slack b { font-weight: 700; }
    .mk-slack .t { color: #86868b; font-size: 12px; margin-left: 6px; }
    .mk-json { width: 560px; margin-top: 14px; background: #14162a; color: #d9dbe9; border-radius: 12px; padding: 14px 16px; text-align: left;
      font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: 0 10px 30px rgba(0,0,0,0.25); white-space: pre; overflow: hidden; }
    .mk-json .k { color: #9ecbff; } .mk-json .s { color: #ffb36b; }
    /* Teams pricing */
    .price-card { max-width: 560px; margin: 0 auto; background: var(--glass); border-radius: 30px; padding: 30px; position: relative; box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); text-align: left; }
    .price-card .amount { font-size: 46px; font-weight: 700; letter-spacing: -0.03em; }
    .price-card .amount small { font-size: 17px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
    .price-card ul { padding-left: 20px; color: var(--muted); line-height: 1.7; margin: 16px 0; }
    .seat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 8px; flex-wrap: wrap; }
    .seat-row input { width: 92px; font: inherit; font-size: 17px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
    .seat-row .pill.soon { background: var(--muted); cursor: default; }
    .seat-row .total { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
    .teams-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); }
    .teams-feature:first-of-type { border-top: 0; }
    .teams-feature h2 { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 12px; }
    .teams-feature p { color: var(--muted); font-size: 17px; line-height: 1.55; }
    .teams-feature .art { overflow: hidden; border-radius: 14px; padding: 4px 0 18px; }
    /* Mockups are drawn at 640px; scale them to the column. */
    .teams-feature .art > * { zoom: 0.74; }
    .mk-win.short { height: 330px; }
    @media (max-width: 900px) { .teams-feature { grid-template-columns: 1fr; gap: 22px; } .teams-feature .art > * { zoom: 1; } }
    @media (max-width: 700px) { .teams-feature .art > * { zoom: 0.54; } }

    /* Liquid glass rim: a light-catching gradient hairline on glass surfaces. */
    .nav .wrap, .pill.glass { position: relative; }
    .nav .wrap::after, .pill.glass::after, .badge::after, .toast::after, .tile::after, .case::after, .frame::after, .proof > div::after, .faq::after, .stars::after, .price-card::after, .cta-card::after, .agent-install::after {
      content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
      background: var(--rim);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    }
    section.dark .tile::after, .cases.dark .case::after { background: var(--rim-dark); }