/* 10 · era phones side by side — a slider with "we are here" */
.tt-flowmode .tt-layout{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy tech" "flow flow";gap:20px 40px;align-items:end}
.tt-flowmode .tt-copy{grid-area:copy}
.tt-flowmode .tt-tech{grid-area:tech;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center;max-width:520px}
.tt-flowmode .tt-tech .tt-tech-h{width:100%;text-align:right}
.tt-flowmode .tt-stage{grid-area:flow;height:560px;perspective:1600px}
.tt-flowmode .tt-since{margin-top:14px}
.tt-flowmode .tt-desc{min-height:0}
.tt-flow{position:absolute;inset:0}
.tt-ph{position:absolute;left:50%;top:0;transform-origin:50% 0;cursor:pointer;transition:transform .8s cubic-bezier(.65,0,.25,1),filter .6s;filter:saturate(calc(1 - var(--dim,0))) brightness(calc(1 + var(--dim,0) * .15))}
.tt-ph .tt-phone{width:252px;height:518px;border-radius:42px;padding:9px;transform:none!important}
.tt-ph .tt-screen{border-radius:34px}
.tt-ph .tt-screen::after{content:"";position:absolute;inset:0;z-index:7;background:#f5f7fa;opacity:calc(var(--dim,0) * .9);transition:opacity .6s;pointer-events:none}
.tt-ph .tt-scr{opacity:1;visibility:visible}
.tt-ph-tag{position:absolute;left:50%;top:530px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap}
.tt-ph-tag b{font:600 13px 'JetBrains Mono',Consolas,monospace;color:#2a2d9f}
.tt-ph-tag span{font-size:11px;color:#7a7ea3}
.tt-ph-tag.now span{color:#fff;background:#2a2d9f;border-radius:999px;padding:3px 10px;font-weight:600}
.tt-ph-tag.next span{color:#2a2d9f;border:1px dashed #9092e2;border-radius:999px;padding:2px 9px}
.tt-ph.focus .tt-phone{box-shadow:0 0 0 1.5px rgba(42,45,159,.3),0 50px 90px -30px rgba(15,18,51,.5),0 0 0 8px rgba(83,86,210,.08)}
.tt-flowmode .tt-halo{width:420px;height:420px;left:50%;top:40px;margin-left:-210px}
.tt-node.nowpin::after{content:"Now";position:absolute;top:-58px;left:50%;transform:translateX(-50%);font:600 9.5px/1 'JetBrains Mono',Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:#2a2d9f;border-radius:999px;padding:4px 8px}
@media(max-width:1100px){.tt-flowmode .tt-layout{grid-template-columns:1fr;grid-template-areas:"copy" "tech" "flow"}.tt-flowmode .tt-tech{justify-content:flex-start}.tt-flowmode .tt-tech .tt-tech-h{text-align:left}}
@media(max-width:760px){.tt-flowmode .tt-stage{height:470px}.tt-ph .tt-phone{width:210px;height:432px}.tt-ph-tag{top:442px}}
/* compact: smaller year + copy, smaller phones, tighter spacing */
#ahead.section-space{padding-top:84px;padding-bottom:72px}
#ahead .section-heading{margin-bottom:22px}
.tt-flowmode .tt-year{font-size:44px;line-height:1}
.tt-flowmode .tt-bar{margin:10px 0 10px;max-width:180px}
.tt-flowmode .tt-era{margin-bottom:6px}
.tt-flowmode .tt-head{font-size:20px;margin-bottom:6px}
.tt-flowmode .tt-desc{font-size:13px;line-height:1.6}
.tt-flowmode .tt-since{margin-top:8px}
.tt-flowmode .tt-tech li{padding:8px 14px 8px 12px;font-size:13px}
.tt-flowmode .tt-stage{height:450px}
.tt-ph .tt-phone{width:206px;height:424px;border-radius:36px;padding:8px}
.tt-ph .tt-screen{border-radius:29px}
.tt-ph .tt-scr{zoom:.82}
.tt-ph .tt-status{zoom:.82}
.tt-ph-tag{top:432px}
.tt-flowmode .tt-line{margin-top:34px;padding-top:24px}
.tt-node.nowpin::after{top:-50px}
/* year + era story move to the top-right corner (like the lighthouse / bolt); phones sit right under the heading */
@media(min-width:1101px){
  #ahead>.wrap{position:relative}
  .tt-flowmode .tt-layout{grid-template-columns:1fr;grid-template-areas:"flow"}
  .tt-flowmode .tt-copy{position:absolute;right:0;top:0;width:330px;z-index:2}
  .tt-flowmode .tt-tech{position:absolute;right:0;top:206px;width:330px;max-width:none;justify-content:flex-start;gap:6px;z-index:2}
  .tt-flowmode .tt-tech .tt-tech-h{text-align:left}
  .tt-flowmode .tt-tech li{padding:6px 12px 6px 10px;font-size:12px}
  .tt-flowmode .tt-head{font-size:18px}
  #ahead .section-heading{margin-bottom:40px;min-height:270px}
}
@media(min-width:1101px){
  .tt-flowmode .tt-copy{top:150px;width:320px}
  .tt-flowmode .tt-tech{top:auto;bottom:auto;right:auto;left:calc((100% - 30px) / 3.2 + 30px);top:268px;width:auto;flex-wrap:nowrap;align-items:center}
  .tt-flowmode .tt-tech .tt-tech-h{width:auto;margin:0 6px 0 0}
  #ahead .section-heading{min-height:330px;margin-bottom:20px}
}

/* right corner shows only the year — it rolls up and fades as the eras change */
@media(min-width:1101px){
  .tt-flowmode .tt-copy{top:136px;width:300px;align-items:flex-end;text-align:right;overflow:hidden;height:110px}
  .tt-flowmode .tt-bar,.tt-flowmode .tt-era,.tt-flowmode .tt-head,.tt-flowmode .tt-desc,.tt-flowmode .tt-since{display:none}
  .tt-flowmode .tt-year{font-size:96px;line-height:1.05;letter-spacing:-.05em}
  #ahead .section-heading{min-height:310px}
}
@media(min-width:1101px){.tt-flowmode .tt-copy{top:0}#ahead .section-heading{min-height:0}.tt-flowmode .tt-tech{top:auto;position:static;grid-area:tech;justify-content:flex-start;margin:0 0 6px calc((100% - 30px) / 3.2 + 30px)}.tt-flowmode .tt-layout{grid-template-areas:"tech" "flow"}}