/* Inner pages: about, lead generation, launch platform, orbit, blog, contact, podcast */

/* ---------- Values ring (About hero) ---------- */
/* The loading screen logo animation, looping. Its white ground is knocked out with
   multiply so the hero's paper and orbs show through instead of a white square. */
.about-logo{position:relative;width:min(100%,480px);aspect-ratio:1;margin-inline:auto;display:grid;place-items:center}
.about-logo__anim{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.about-logo__anim img{width:100%;height:100%;object-fit:contain}
@media (max-width:980px){.about-logo{width:min(100%,400px)}}
@media (max-width:640px){.about-logo{width:min(100%,320px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Statement band ---------- */
.statement{padding-block:clamp(56px,7vw,96px);text-align:center}
.statement p{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3vw,2.6rem);letter-spacing:-.025em;line-height:1.15;max-width:26ch;margin-inline:auto;color:var(--ink);font-variation-settings:"wdth" 108}
.statement p b{color:var(--sky-deep)}
.statement--inline{padding-block:0;text-align:left}
.statement--inline p{font-size:clamp(1.25rem,2vw,1.85rem);margin-inline:0}
/* Stacked, the copy should still lead even though the diagram comes first in the
   markup so it takes the wider column. */
@media (max-width:980px){.integ .split--rev .statement--inline{order:-1}}

/* ---------- Timeline (About story) ---------- */
.timeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;position:relative;padding-top:2.4rem}
.timeline::before{content:"";position:absolute;left:0;right:0;top:12px;height:2px;background:linear-gradient(90deg,var(--silver-2),var(--sky),var(--silver-2))}
.tl{position:relative;padding-top:1rem}
.tl::before{content:"";position:absolute;top:-2.4rem;left:0;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--sky-deep);transform:translateY(5px)}
.tl h4{font-size:1rem;margin-bottom:.3rem}
.tl p{font-size:.98rem;color:var(--ink-2);margin:0}
.tl--now::before{background:var(--sky-deep);box-shadow:0 0 0 6px rgba(80,189,255,.3)}

/* ---------- Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.bento>*{border-radius:calc(var(--r-card) + 4px);border:1px solid var(--rule);background:#fff;padding:clamp(22px,2.6vw,34px);box-shadow:var(--shadow-card);position:relative;overflow:clip;display:flex;flex-direction:column;justify-content:flex-end;min-height:280px}
.bento .b-7{grid-column:span 7}.bento .b-5{grid-column:span 5}.bento .b-4{grid-column:span 4}.bento .b-8{grid-column:span 8}.bento .b-6{grid-column:span 6}.bento .b-12{grid-column:span 12}
.bento .b-sky{background:linear-gradient(160deg,#F5FAFF,var(--sky-tint));border-color:var(--sky-soft)}
.bento .b-silver{background:linear-gradient(160deg,#FFFFFF,var(--silver-3))}
.bento .b-ink{background:var(--ink);border-color:var(--ink);color:#DCE6F3}
.bento .b-ink h3{color:#fff}
.bento h3{font-size:1.4rem;line-height:1.16;margin-bottom:.55rem}
.bento p{margin:0;color:var(--ink-2);font-size:1.05rem;max-width:44ch}
.bento .b-ink p{color:#C5D2E4}
.bento .art{position:absolute;right:-6%;top:-8%;width:52%;pointer-events:none;opacity:.95}
.bento .art--full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18;filter:saturate(1.2);pointer-events:none}
/* Orbit is a character, not scenery, and he was sitting on the copy: at 1267px his box
   reached 61px below the top of the heading and crossed 130px of the paragraph. Absolute
   positioning cannot know how tall the text is, so he comes into the flow instead, in a
   band above the label. His bottom edge is then the layout's limit, not a guess, and it
   can never fall below the first line of the heading at any width. The card grows to hold
   both. The float animation owns the transform, so the bottom margin covers its travel. */
.bento .art--orbit{position:static;order:-1;right:auto;top:auto;width:44%;
  max-height:clamp(108px,10vw,144px);object-fit:contain;object-position:top right;
  margin:0 -2% auto auto;padding-bottom:1.1rem;
  filter:drop-shadow(0 20px 30px rgba(20,33,58,.25));animation:hover 6s ease-in-out infinite}
/* A brand lockup, not scenery: it sits inside the card rather than bleeding off the
   edge, at full opacity, and the copy is held back so it clears the wordmark. */
.bento .art--logo{right:4%;top:50%;transform:translateY(-50%);width:37%;max-width:270px;max-height:86%;object-fit:contain;opacity:1}
.bento .b-launch h3{max-width:62%}
.bento .b-launch p{max-width:57%}
/* This card carries no art, so the 44ch measure the other cards need just leaves a
   dead column. Let the copy run the full width of the card instead. The cap only
   engages in the band where the card goes full width at its widest, around 980px,
   where the line would otherwise reach 104 characters; the desktop layout never
   exceeds 675px on its own, so it costs no space there. */
.bento .b-leads p{max-width:680px}
/* Below this the card runs full width and the copy reaches the right edge, so a mascot
   bleeding off the corner sits on the text. Drop it into the flow above the label, the
   same way the Launch lockup sits. The float animation still owns the transform, so the
   bottom margin has to cover its travel. */
@media (max-width:720px){
  .bento .art--orbit{margin-right:0}
  .bento .art--logo{position:static;order:-1;transform:none;width:42%;max-width:none;max-height:none;margin:0 0 .3rem auto}
  .bento .b-launch h3,.bento .b-launch p{max-width:100%}
}
@keyframes hover{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
/* Label, heading and copy are one block with fixed gaps, so every card reads the same.
   The label used to take margin-bottom:auto, which pinned it to the top of its card and
   handed it whatever space that card had spare: 159px on Marketing, 13px on AI, 26px and
   53px on the other two. The space now goes above the block instead, where it belongs to
   the card rather than to the type. */
.bento .k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sky-ink);margin-bottom:.5rem}
.bento .b-ink .k{color:var(--sky)}

/* ---------- Values strip (scroll snap) ---------- */
.values{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
@media (max-width:1100px){
  .values{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(232px,60%);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 1rem;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .values::-webkit-scrollbar{display:none}
}
.values>div{scroll-snap-align:start;background:#fff;border:1px solid var(--rule);border-radius:var(--r-card);padding:1.6rem;box-shadow:var(--shadow-card)}
.values .n{font-family:var(--font-display);font-weight:800;font-size:2.2rem;letter-spacing:-.04em;color:var(--sky);line-height:1;margin-bottom:.8rem;font-variation-settings:"wdth" 125}
.values h3{font-size:1.15rem;margin-bottom:.4rem}
.values p{margin:0;font-size:1rem;color:var(--ink-2)}

/* ---------- Founder ---------- */
.founder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(24px,4vw,64px);align-items:center;background:#fff;border:1px solid var(--rule);border-radius:calc(var(--r-card) + 8px);padding:clamp(24px,3.5vw,48px);box-shadow:var(--shadow-card)}
.founder .portrait{aspect-ratio:4/5;border-radius:var(--r-card);background:linear-gradient(160deg,var(--sky-tint),var(--silver-3));display:grid;place-items:center;position:relative;overflow:clip}
.founder .portrait img{width:100%;height:100%;object-fit:cover;display:block}
/* Scrim so the caption stays legible over the photograph. */
.founder .portrait::after{content:"";position:absolute;inset:auto 0 0 0;height:110px;background:linear-gradient(180deg,rgba(20,33,58,0),rgba(20,33,58,.72));pointer-events:none}
.founder .portrait span{position:absolute;z-index:1;bottom:14px;left:14px;right:14px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;text-align:center}
.founder h3{font-size:1.6rem}
.founder .role{font-family:var(--font-display);color:var(--sky-ink);font-weight:700;margin-bottom:1rem}

/* ---------- Stat cite ---------- */
.stat-cite{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.stat-cite>div{background:#fff;border:1px solid var(--rule);border-radius:var(--r-card);padding:1.4rem;box-shadow:var(--shadow-card)}
.stat-cite .stat__num{font-size:clamp(2.2rem,4vw,3.4rem)}
.stat-cite p{margin:.4rem 0 .6rem;font-size:1rem;color:var(--ink-2)}
.stat-cite cite{display:block;font-style:normal;font-family:var(--font-display);font-size:.82rem;color:var(--muted)}
.stat-cite cite a{color:var(--muted)}

/* ---------- Industries ---------- */
.industries{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.ind{background:#fff;border:1px solid var(--rule);border-radius:var(--r-card);padding:1.6rem;box-shadow:var(--shadow-card);display:grid;gap:.6rem;align-content:start}
.ind .ico{width:44px;height:44px;border-radius:12px;background:var(--sky-tint);border:1px solid var(--sky-soft);display:grid;place-items:center;color:var(--sky-ink)}
.ind .ico svg{width:22px;height:22px}
.ind h3{font-size:1.2rem;margin:0}
.ind p{margin:0;font-size:1rem;color:var(--ink-2)}
.ind .ex{font-family:var(--font-display);font-size:.9rem;color:var(--sky-ink);font-weight:600}

/* ---------- Use cases (horizontal snap) ---------- */
.usecases{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,34%);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 1.2rem;scrollbar-width:thin}
.usecases>article{scroll-snap-align:start;background:#fff;border:1px solid var(--rule);border-radius:var(--r-card);padding:1.6rem;box-shadow:var(--shadow-card);display:grid;gap:.6rem;align-content:start}
.usecases .k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sky-ink)}
.usecases h3{font-size:1.2rem;margin:0}
.usecases p{margin:0;font-size:1rem;color:var(--ink-2)}
.usecases .result{margin-top:.4rem;padding-top:.8rem;border-top:1px solid var(--rule);font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--ink)}

/* ---------- Chat demo (Orbit) ---------- */
.chat{display:grid;gap:.7rem;max-width:520px;margin-inline:auto}
.chat .msg{max-width:88%;padding:.8rem 1rem;border-radius:18px;font-family:var(--font-display);font-size:.95rem;line-height:1.4;box-shadow:var(--shadow-card);opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.chat.is-in .msg{opacity:1;transform:none}
.chat .msg--you{background:var(--ink);color:#fff;justify-self:end;border-bottom-right-radius:4px}
.chat .msg--orbit{background:#fff;border:1px solid var(--rule);justify-self:start;border-bottom-left-radius:4px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:.6rem;align-items:start}
.chat .msg--orbit img{width:34px;height:34px;object-fit:contain}
.chat .msg--orbit b{color:var(--sky-ink)}
.chat .msg--done{background:var(--sky-tint);border:1px solid var(--sky-soft);justify-self:start;font-weight:700}
.chat .msg:nth-child(2){transition-delay:.4s}.chat .msg:nth-child(3){transition-delay:.9s}.chat .msg:nth-child(4){transition-delay:1.3s}

/* ---------- Pricing ---------- */
.pricing{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:stretch}
/* The lead generation page gives the offer a third and the five stages two thirds: the
   price is a short list, the stages are five paragraphs. */
.pricing--third{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.plan{background:#fff;border:1px solid var(--rule);border-radius:calc(var(--r-card) + 6px);padding:clamp(24px,3vw,40px);box-shadow:var(--shadow-card);display:grid;gap:1rem;align-content:start}
.plan--hero{background:linear-gradient(160deg,#FFFFFF,var(--sky-tint));border-color:var(--sky-soft);box-shadow:var(--shadow-sky)}
.plan--ink{background:var(--ink);color:#DCE6F3;border-color:var(--ink)}
.plan--ink h3{color:#fff}
.plan--ink .price{color:#fff}
.plan--ink .price .per{color:#AEBBD0}
.plan--ink .checklist li::before{background-color:#26395C;border-color:#3A4F78}
.plan .prices{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:baseline}
.plan .or{color:var(--muted);font-family:var(--font-display)}
.plan .fine{font-size:.92rem;color:var(--muted)}
/* Longer than fine print, so it is set off from the plan above it. */
.plan .plan__note{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--rule)}
/* The saving is the differentiator, so it carries display weight and ink rather
   than the muted fine print above it, pulled up tight against it. */
.plan .plan__save{margin-top:-1.15rem;font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1.35;letter-spacing:-.015em;color:var(--ink)}
.plan .plan__save b{color:var(--sky-deep);font-weight:800}
.plan--ink .fine{color:#AEBBD0}
.plan .actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.4rem}

/* ---------- Replaces strip ---------- */

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);align-items:start}
.contact-aside{display:grid;gap:1.2rem;position:sticky;top:calc(var(--nav-h) + 24px)}
.contact-aside .card address{font-style:normal;line-height:1.7}
.contact-aside .card a{font-family:var(--font-display);font-weight:600}
.next-steps{counter-reset:ns;display:grid;gap:1rem}
.next-steps>div{display:grid;grid-template-columns:36px minmax(0,1fr);gap:.8rem;align-items:start}
.next-steps>div>div{min-width:0}
.next-steps>div::before{counter-increment:ns;content:counter(ns);width:32px;height:32px;border-radius:50%;background:var(--sky);color:var(--ink);font-family:var(--font-display);font-weight:800;display:grid;place-items:center;font-size:.9rem}
.next-steps b{font-family:var(--font-display);display:block}
.next-steps p{margin:0;font-size:1rem;color:var(--ink-2)}
.calendar-embed{border:2px dashed var(--silver);border-radius:calc(var(--r-card) + 6px);min-height:520px;display:grid;place-items:center;background:#fff;text-align:center;padding:2rem}
.calendar-embed:has(iframe),.calendar-embed:has(script){border-style:solid;border-color:var(--rule);padding:0;overflow:clip}
.calendar-embed iframe{width:100%;min-height:700px;border:0}
.form-embed{margin-top:.4rem}
.form-embed iframe{display:block;width:100%;min-height:686px;border:0}

/* ---------- Podcast ---------- */
.pod-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.pod-hero .art{position:relative}
.pod-hero .art img{border-radius:calc(var(--r-card) + 8px);box-shadow:var(--shadow-sky);border:1px solid #fff}
.pod-hero .art .badge{position:absolute;left:-12px;bottom:26px;background:var(--ink);color:#fff;border-radius:var(--r-pill);padding:.5rem 1rem;font-family:var(--font-display);font-weight:800;font-size:.9rem}
.pod-hero .art .badge b{color:var(--sky)}
.episode-feature{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.episode-feature .bio{background:#fff;border:1px solid var(--rule);border-radius:var(--r-card);padding:1.6rem;box-shadow:var(--shadow-card)}
.episode-feature .bio h3{font-size:1.2rem;margin-bottom:.4rem}
.episode-feature .bio .k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sky-ink);display:block;margin-bottom:.6rem}
.episodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.more-videos{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,26%);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 1.2rem;scrollbar-width:thin}
.more-videos a{scroll-snap-align:start;text-decoration:none;color:inherit;display:grid;gap:.5rem}
.more-videos img{aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid var(--rule)}
.more-videos span{font-family:var(--font-display);font-weight:600;font-size:.92rem;line-height:1.3}
.guest-form{background:#fff;border:1px solid var(--rule);border-radius:calc(var(--r-card) + 8px);padding:clamp(24px,3.5vw,48px);box-shadow:var(--shadow-card)}
.episode-page .video-frame{margin:1.6rem 0 2rem}
.episode-page .cols{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}

/* ---------- Blog index ---------- */
.featured-post{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;background:#fff;border:1px solid var(--rule);border-radius:calc(var(--r-card) + 8px);padding:clamp(18px,2.4vw,30px);box-shadow:var(--shadow-card)}
.featured-post img{border-radius:var(--r-card);aspect-ratio:16/9;object-fit:cover;width:100%}
.featured-post h2{font-size:clamp(1.6rem,2.8vw,2.4rem)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.press{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.press a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--rule);border-radius:var(--r-card);padding:1.1rem 1.3rem;transition:transform .3s var(--ease-out),box-shadow .3s}
.press a:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.press b{font-family:var(--font-display);display:block;font-size:1rem}
.press span{font-size:.9rem;color:var(--muted);font-family:var(--font-display)}
.article-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:3rem}
.article-nav a{text-decoration:none;color:inherit;background:#fff;border:1px solid var(--rule);border-radius:var(--r-card);padding:1.2rem 1.4rem;display:grid;gap:.3rem}
.article-nav a span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.article-nav a b{font-family:var(--font-display);font-size:1.05rem}
.takeaways{background:linear-gradient(160deg,#F5FAFF,var(--sky-tint));border:1px solid var(--sky-soft);border-radius:var(--r-card);padding:1.4em 1.6em;margin:2em 0}
.takeaways h3{margin-top:0;font-size:1.1rem}
.takeaways ul{margin:0}
.share{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2rem;align-items:center;font-family:var(--font-display);font-size:.9rem;color:var(--muted)}

/* ---------- Video hero (Orbit page) ---------- */
.orbit-hero{position:relative;overflow:clip}
.orbit-hero .art{position:relative;display:grid;place-items:center}
.orbit-hero .art img{width:min(78%,440px);filter:drop-shadow(0 40px 50px rgba(20,33,58,.32));animation:hover 6s ease-in-out infinite}

/* ---------- Feature list (Launch) ---------- */
.features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.feat{scroll-margin-top:calc(var(--nav-h) + 26px);background:#fff;border:1px solid var(--rule);border-radius:var(--r-card);padding:1.4rem;box-shadow:var(--shadow-card);display:grid;gap:.5rem;align-content:start;transition:transform .35s var(--ease-out),border-color .35s}
.feat:hover{transform:translateY(-4px);border-color:var(--sky-soft)}
.feat .n{font-family:var(--font-display);font-weight:800;font-size:1.6rem;letter-spacing:-.04em;color:var(--sky);line-height:1;font-variation-settings:"wdth" 125}
.feat h3{font-size:1.05rem;margin:0}
.feat p{margin:0;font-size:.95rem;color:var(--ink-2)}
/* Marks the card a hero chip sent you to, so the jump lands somewhere obvious. */
.feat:target,.feat.is-jumped{border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-soft),var(--shadow-card)}
.feat.feat--wide{grid-column:span 2;background:linear-gradient(160deg,#FFFFFF,var(--sky-tint));border-color:var(--sky-soft)}
/* Closes the grid on the same footprint as a wide card. Ink, so it reads as an
   invitation rather than a thirteenth capability. Must follow .feat.feat--wide,
   which matches with the same weight and would otherwise keep the sky gradient. */
.feat.feat--cta{background:var(--ink);border-color:var(--ink);align-content:center;gap:.7rem;padding:clamp(1.5rem,2.4vw,2rem)}
.feat--cta h3{color:#fff;font-size:1.35rem}
.feat--cta p{color:#C5D2E4;font-size:1rem;max-width:56ch}
.feat--cta .btn{justify-self:start;margin-top:.3rem}

/* ---------- States served (About) ----------
   Deliberately quiet: existing mono token, small, metadata weight. It is a service
   area statement, not a headline, so it must not compete with the page. */
.states{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.states li{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--muted);background:var(--paper-2);border:1px solid var(--rule);border-radius:6px;padding:.22rem .45rem;line-height:1.4}
.states abbr{text-decoration:none;border-bottom:0;cursor:help}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .timeline{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 1rem}
  .timeline::before{display:none}
  .tl::before{top:-.6rem}
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-cite{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .bento .b-7,.bento .b-5,.bento .b-4,.bento .b-8,.bento .b-6{grid-column:span 12}
  .industries{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pricing,.contact-grid,.pod-hero,.episode-feature,.featured-post,.episode-page .cols{grid-template-columns:minmax(0,1fr)}
  .contact-aside{position:static}
  .episodes,.posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .founder{grid-template-columns:minmax(0,1fr)}
  .founder .portrait{max-width:320px}
  .usecases{grid-auto-columns:minmax(280px,70%)}
}
@media (max-width:640px){
  .timeline{grid-template-columns:minmax(0,1fr)}
  .industries,.episodes,.posts,.press,.article-nav,.features,.stat-cite{grid-template-columns:minmax(0,1fr)}
  .feat.feat--wide{grid-column:span 1}
  .usecases{grid-auto-columns:minmax(260px,86%)}
  .more-videos{grid-auto-columns:minmax(220px,70%)}
}