/* A few visual accents for the landing page. */
body.home .practice-photo{margin:1.75rem 0 0;max-width:23rem}
body.home .practice-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 55%;border-radius:2px}
body.home .practice-photo figcaption{margin-top:.65rem;font-size:.75rem;color:var(--slate)}
body.home .practice-photo a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px;transition:color .18s ease}
body.home .practice-photo a:hover{color:var(--signal)}
body.home .story-index{margin-top:1.25rem}
body.home #practices .world .k{display:flex;align-items:center;gap:.7rem}
body.home .home-icon{display:block;flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.home #practices .home-icon{color:#187D99}
body.home #model .home-icon{color:var(--signal)}
body.home #ai .home-icon{width:30px;height:30px;margin-bottom:1.3rem;color:#71C8DC}
@media(min-width:901px) and (max-height:800px){
  body.home .practice-intro{top:100px}
  body.home .practice-photo{max-width:19rem;margin-top:1.25rem}
  body.home .practice-intro .lede{line-height:1.6}
}
@media(max-width:900px){
  body.home .practice-photo{max-width:28rem}
}
@media(prefers-reduced-motion:reduce){
  body.home .practice-photo a{transition:none}
}

/* AI band: the ink-threads illustration from the AI enablement hero, inverted for the dark surface, sits behind the three columns as texture. */
body.home #ai{position:relative;overflow:hidden;isolation:isolate}
body.home #ai::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("illustrations/ai-enablement-threads.png") no-repeat right -2% top -2%;background-size:auto 64%;filter:invert(1) hue-rotate(180deg) saturate(.85);opacity:.2;-webkit-mask-image:linear-gradient(to right,transparent 38%,#000 72%),linear-gradient(to bottom,#000,#000 60%,transparent 88%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 38%,#000 72%),linear-gradient(to bottom,#000,#000 60%,transparent 88%);mask-composite:intersect}
body.home #ai .wrap{position:relative}
@media(max-width:700px){
  body.home #ai .sechead{margin-bottom:11.5rem}
  body.home #ai::before{background-position:center top 8.2rem;background-size:120% auto;-webkit-mask-image:linear-gradient(to bottom,transparent 6rem,#000 9rem,#000 18rem,transparent 22rem);mask-image:linear-gradient(to bottom,transparent 6rem,#000 9rem,#000 18rem,transparent 22rem);opacity:.22}
}

/* Three ways to engage: numbered marks. Orange as ink, bordered, no fill. */
body.home .story-ways>div{grid-template-columns:2.5rem 6.5rem 1fr;align-items:start}
body.home .way-num{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;margin-top:-.2rem;border:1px solid var(--signal);border-radius:2px;font-weight:700;font-size:1.05rem;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1;color:var(--signal);box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3px var(--rule-soft)}
@media(max-width:560px){
  body.home .story-ways>div{grid-template-columns:2.5rem 1fr;column-gap:1rem;row-gap:.15rem}
  body.home .story-ways dt{grid-column:2}
  body.home .story-ways dd{grid-column:2}
}
@media(forced-colors:active){body.home .way-num{box-shadow:none;border-color:CanvasText;color:CanvasText}}
