/* Templates page. Page prefix: tp-.
   Loaded after site.css and gallery.css. The gallery is mounted into
   #tpl-gallery by tp.js; the hero wall and the use rows hold copies of the
   gallery's own slides (.tg-slide), which size everything in cqw of the slide.
   Pictures scale with container units; loops animate transform and opacity
   only, stop off screen (site.js) and are static under reduced motion. */

/* Gallery slides outside .tg need the gallery's font tokens */
.tp-shot{--tg-paper:#F2EFFF;--tg-muted:#B9B3DA;--tg-lav:#B7A8FF;--tg-night:#0E0C24;--tg-line:rgba(183,168,255,.14);--tg-ease:cubic-bezier(.2,.7,.2,1);
  --tg-sora:Sora,"Sora Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tg-geist:Geist,"Geist Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tg-serif:"Instrument Serif","Times New Roman",Times,serif;
  position:relative;display:block;aspect-ratio:16 / 10;border-radius:10px;background:linear-gradient(135deg,var(--night-3),var(--night-2));box-shadow:inset 0 0 0 1px var(--line)}
.tp-shot .tg-slide{position:absolute;inset:0;border-radius:inherit}

/* ---------- Hero: the drifting wall of templates ---------- */
.tp-wall{container-name:tp-wall;aspect-ratio:1 / 1.04}
.tp-collage{position:absolute;inset:0;overflow:hidden;border-radius:var(--radius);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 11%,#000 80%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 11%,#000 80%,transparent);
  mask-composite:intersect}
.tp-plane{position:absolute;left:-12%;top:-14%;width:124%;height:128%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:3.6cqw;transform:rotate(-9deg)}
.tp-col{min-width:0}
.tp-track{display:flex;flex-direction:column;gap:3.6cqw;padding-bottom:3.6cqw;transform:translateY(var(--y0,0%))}
.tp-track .tp-shot{flex:none;border-radius:max(6px,1.5cqw);box-shadow:inset 0 0 0 1px var(--line),0 3cqw 5cqw -3cqw rgba(0,0,0,.95)}

/* The three templates available at launch, floating on the wall */
.tp-count{position:absolute;left:50%;bottom:6%;display:grid;grid-template-columns:repeat(3,auto);transform:translateX(-50%);border-radius:18px;background:rgba(18,15,46,.94);box-shadow:inset 0 0 0 1px var(--line-2),0 30px 60px -30px rgba(0,0,0,.95)}
.tp-count-k{grid-column:1 / -1;margin:0;padding:12px 20px 0;font:500 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--lav);text-align:center;white-space:nowrap}
.tp-count span{display:flex;align-items:baseline;gap:8px;padding:13px 20px 14px;font:500 13px/1 var(--sans);color:var(--muted);white-space:nowrap}
.tp-count span + span{border-left:1px solid var(--line)}
.tp-count b{font:600 24px/1 var(--display);letter-spacing:-.03em;color:var(--paper)}
@container tp-wall (max-width:579px){
  .tp-count{bottom:5%;border-radius:14px}
  .tp-count span{flex-direction:column;align-items:center;gap:6px;padding:10px 16px}
  .tp-count b{font-size:20px}
}

/* ---------- How templates work: one template through four stages ---------- */
.tp-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border-radius:var(--radius);border:1px solid var(--line-2);background:linear-gradient(180deg,var(--night-3),var(--night-2) 70%);box-shadow:var(--shadow)}
.tp-stage{position:relative;display:flex;flex-direction:column;min-width:0;container-type:inline-size}
.tp-stage + .tp-stage{border-left:1px solid var(--line)}
.tp-arrow{position:absolute;z-index:2;left:-15px;top:calc(37.5cqw - 15px);width:30px;height:30px;border-radius:50%;background:var(--night-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B7A8FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8h9M9 4.5 12.5 8 9 11.5'/%3E%3C/svg%3E") center / 14px no-repeat;box-shadow:inset 0 0 0 1px var(--line-2)}
.tp-pv{position:relative;aspect-ratio:4 / 3;overflow:hidden;container-type:inline-size;border-bottom:1px solid var(--line);background:
  radial-gradient(70% 70% at 50% 45%,rgba(123,92,255,.2),transparent 72%),
  radial-gradient(rgba(183,168,255,.1) 1px,transparent 1.5px) 0 0 / 20px 20px}
.tp-pv > *{position:absolute}
.tp-stage-copy{display:flex;flex-direction:column;align-items:flex-start;padding:22px 24px 26px}
.tp-stage-n{display:grid;place-items:center;width:30px;height:30px;margin-bottom:14px;border-radius:50%;background:rgba(183,168,255,.1);box-shadow:inset 0 0 0 1px var(--line-2);font:600 14px/1 var(--display);color:var(--paper)}
.tp-stage:first-child .tp-stage-n{background:var(--violet);box-shadow:0 0 0 5px rgba(123,92,255,.16)}
.tp-stage-t{margin:0;font:600 var(--fs-h3)/1.3 var(--display);letter-spacing:-.02em;color:var(--paper)}
.tp-stage-d{margin-top:8px;font-size:16px;line-height:1.5;color:var(--muted)}

/* A Brightlane page, drawn as one picture (sizes in cqw of the slide) */
.tp-sl{display:block;aspect-ratio:16 / 10;overflow:hidden;border-radius:2.2cqw;background:var(--paper);container-type:inline-size;box-shadow:0 3cqw 6cqw -3cqw rgba(0,0,0,.95)}
.tp-sl > span{position:absolute}
.tp-sl-p{left:0;top:0;bottom:0;width:38cqw;display:grid;place-items:center;background:var(--violet)}
.tp-sl-p svg{width:90%;height:auto}
.tp-sl.is-plain .tp-sl-p{background:#E2DBFF}
.tp-sl.is-plain .tp-sl-p::after{content:"";position:absolute;inset:5cqw;border:max(1px,.5cqw) dashed rgba(18,15,46,.22);border-radius:2cqw}
.tp-sl-ph{width:34%;height:auto;color:rgba(18,15,46,.36)}
.tp-sl-eb{left:44cqw;right:5cqw;top:10cqw;display:flex;align-items:center;gap:1.4cqw;overflow:hidden;font:500 2.9cqw/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--violet);white-space:nowrap}
.tp-sl-eb svg{flex:none;width:4.6cqw;height:4.6cqw}
.tp-sl.is-plain .tp-sl-eb{color:rgba(18,15,46,.45)}
.tp-sl-t{left:44cqw;top:21cqw;width:52cqw;font:600 6.6cqw/1.08 var(--display);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.tp-sl-sub{left:44cqw;bottom:9cqw;font:400 3.2cqw/1.2 var(--sans);color:var(--ink-2);white-space:nowrap}
.tp-sl-sub.is-ph{width:30cqw;height:3.2cqw;border-radius:99px;background:rgba(18,15,46,.14)}
.tp-sl-n{right:5cqw;bottom:9cqw;font:500 3cqw/1 var(--sans);letter-spacing:.08em;color:rgba(18,15,46,.45)}
.tp-mark{background:linear-gradient(transparent 64%,rgba(183,168,255,.55) 64%)}
.tp-caret{display:inline-block;width:max(1.5px,.6cqw);height:.92em;margin-left:.08em;vertical-align:-.1em;border-radius:1px;background:var(--violet)}

/* Stage 1: pick */
.tp-pick{left:9cqw;right:9cqw;top:6.5cqw;display:grid;grid-template-columns:1fr 1fr;gap:4cqw}
.tp-th{position:relative;display:block;aspect-ratio:16 / 10;overflow:hidden;border-radius:1.8cqw;box-shadow:0 2cqw 4cqw -2cqw rgba(0,0,0,.85)}
.tp-th i{position:absolute;display:block}
.tp-th.is-sel{overflow:visible;background:var(--paper);box-shadow:0 0 0 .9cqw var(--lav),0 0 0 2.4cqw rgba(183,168,255,.18),0 2cqw 4cqw -2cqw rgba(0,0,0,.85)}
.tp-th.is-sel .a{left:0;top:0;bottom:0;width:38%;border-radius:1.8cqw 0 0 1.8cqw;background:#3A3270}
.tp-th.is-sel .b{left:46%;top:18%;width:26%;height:6%;border-radius:9px;background:var(--violet);opacity:.75}
.tp-th.is-sel .c{left:46%;top:35%;width:44%;height:11%;border-radius:9px;background:var(--ink)}
.tp-th.is-sel .d{left:46%;top:52%;width:30%;height:11%;border-radius:9px;background:var(--ink)}
.tp-th-ok{position:absolute;right:-2.6cqw;top:-2.6cqw;display:grid;place-items:center;width:6.6cqw;height:6.6cqw;border-radius:50%;background:var(--violet);color:#fff;box-shadow:0 0 0 .8cqw var(--night-2)}
.tp-th-ok svg{width:62%;height:62%}
.tp-cursor{position:absolute;right:-4.5cqw;bottom:-6.5cqw;width:9cqw;height:9cqw}
.tp-th.is-num{background:linear-gradient(160deg,#2A2168,#140F33)}
.tp-th.is-num .a{left:10%;top:18%;width:30%;height:7%;border-radius:9px;background:rgba(183,168,255,.6)}
.tp-th.is-num .b{left:10%;top:38%;width:30%;height:38%;border-radius:1cqw;background:var(--lav)}
.tp-th.is-num .c{right:10%;top:20%;width:34%;aspect-ratio:1;border-radius:50%;border:max(2px,1.4cqw) solid var(--violet);border-right-color:rgba(183,168,255,.25)}
.tp-th.is-cards{background:#E2DBFF}
.tp-th.is-cards .a{left:9%;top:16%;width:46%;height:10%;border-radius:9px;background:var(--ink)}
.tp-th.is-cards .b,.tp-th.is-cards .c,.tp-th.is-cards .d{bottom:12%;width:25%;height:42%;border-radius:1cqw;background:#fff}
.tp-th.is-cards .b{left:9%}
.tp-th.is-cards .c{left:37.5%;background:var(--violet)}
.tp-th.is-cards .d{left:66%}
.tp-th.is-quote{background:#2B2458}
.tp-th.is-quote .a{left:9%;top:6%;font:400 15cqw/1 var(--serif);color:var(--lav)}
.tp-th.is-quote .a::before{content:"\201C"}
.tp-th.is-quote .b{left:10%;top:52%;width:66%;height:9%;border-radius:9px;background:var(--paper)}
.tp-th.is-quote .c{left:10%;top:68%;width:44%;height:9%;border-radius:9px;background:rgba(242,239,255,.5)}
.tp-pv-chip{left:9cqw;top:63.5cqw;display:inline-flex;align-items:center;height:7cqw;padding:0 3cqw;border-radius:99px;background:var(--paper);font:500 max(10px,3.3cqw)/1 var(--sans);color:var(--ink);white-space:nowrap}

/* Stage 2: the story goes in */
.tp-pv-s2{left:8cqw;top:8cqw;width:84cqw}
.tp-tools{left:8cqw;top:66cqw;display:flex;gap:1.6cqw;transform:translateY(-50%)}
.tp-tools span{display:inline-flex;align-items:center;height:7cqw;padding:0 2.8cqw;border-radius:99px;background:rgba(183,168,255,.08);box-shadow:inset 0 0 0 1px var(--line-2);font:500 max(10px,3.2cqw)/1 var(--sans);color:var(--muted);white-space:nowrap}
.tp-tools .is-on{background:var(--paper);box-shadow:none;color:var(--ink)}

/* Stage 3: the theme lands (panel classes keep the old tp-kit name) */
.tp-pv-s3{left:6cqw;top:7cqw;width:68cqw}
.tp-kit{right:6cqw;bottom:6cqw;width:52cqw;display:grid;gap:2.4cqw;padding:3.4cqw;border-radius:3cqw;background:rgba(18,15,46,.95);box-shadow:inset 0 0 0 1px rgba(183,168,255,.34),0 3cqw 6cqw -3cqw rgba(0,0,0,.95)}
.tp-kit-k{font:500 max(9px,2.8cqw)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--lav)}
.tp-kit-logo{display:flex;align-items:center;gap:2cqw;font:600 max(10px,3.6cqw)/1 var(--display);letter-spacing:-.02em;color:var(--paper)}
.tp-kit-mono{display:grid;place-items:center;width:7cqw;height:7cqw;border-radius:1.6cqw;background:var(--violet);color:#fff}
.tp-kit-mono svg{width:68%;height:68%}
.tp-kit-sw{display:flex;align-items:center;gap:1.6cqw}
.tp-kit-sw i{width:5.4cqw;height:5.4cqw;border-radius:50%}
.tp-kit-sw i:nth-child(1){background:var(--violet)}
.tp-kit-sw i:nth-child(2){background:var(--lav)}
.tp-kit-sw i:nth-child(3){background:var(--ink);box-shadow:inset 0 0 0 1px rgba(183,168,255,.4)}
.tp-kit-sw i:nth-child(4){background:var(--paper)}
.tp-kit-aa{margin-left:auto;font:600 max(10px,4cqw)/1 var(--display);color:var(--paper)}
.tp-kit-ok{display:flex;align-items:center;gap:1.4cqw;font:500 max(9px,3cqw)/1.2 var(--sans);color:var(--paper);white-space:nowrap}
.tp-kit-ok svg{flex:none;width:4cqw;height:4cqw;color:var(--lav)}

/* Stage 4: one link goes out */
.tp-pv-s4{left:16cqw;top:7cqw;width:68cqw}
.tp-share{left:7cqw;right:7cqw;top:54cqw;display:grid;gap:2.6cqw}
.tp-share-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2cqw;padding:2cqw;border-radius:2.6cqw;background:rgba(18,15,46,.95);box-shadow:inset 0 0 0 1px rgba(183,168,255,.32),0 3cqw 6cqw -3cqw rgba(0,0,0,.95)}
.tp-share-ic{display:grid;place-items:center;width:6.4cqw;height:6.4cqw;border-radius:1.6cqw;background:rgba(183,168,255,.12);color:var(--lav)}
.tp-share-ic svg{width:60%;height:60%}
.tp-share-t{overflow:hidden;font:500 max(10px,3.2cqw)/1.2 var(--sans);color:var(--paper);white-space:nowrap;text-overflow:ellipsis}
.tp-share-btn{display:inline-flex;align-items:center;height:6.4cqw;padding:0 2.6cqw;border-radius:99px;background:var(--violet);font:500 max(10px,3cqw)/1 var(--sans);color:#fff;white-space:nowrap}
.tp-share-st{display:flex;align-items:center;gap:1.8cqw;padding-left:1cqw;font:500 max(9px,3cqw)/1 var(--sans);color:var(--muted)}
.tp-share-st .live{width:max(6px,1.8cqw);height:max(6px,1.8cqw)}

/* ---------- Every template is a web deck: browser and phone ---------- */
.tp-more{margin-top:28px}
.tp-web{container-name:tp-web;aspect-ratio:600 / 470}
.tp-br{position:absolute;left:0;top:0;width:calc(var(--q) * 516);height:calc(var(--q) * 392);display:flex;flex-direction:column;overflow:hidden;border-radius:calc(var(--q) * 18);background:var(--night-2);border:1px solid var(--line-2);box-shadow:0 60px 100px -50px rgba(0,0,0,.9)}
.tp-br-bar{flex:none;display:flex;align-items:center;gap:calc(var(--q) * 10);height:calc(var(--q) * 36);padding:0 calc(var(--q) * 12);border-bottom:1px solid var(--line)}
.tp-br-dots{flex:none;display:flex;gap:calc(var(--q) * 5)}
.tp-br-dots i{width:calc(var(--q) * 7);height:calc(var(--q) * 7);border-radius:50%;background:rgba(183,168,255,.3)}
.tp-br-url{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:calc(var(--q) * 6);height:calc(var(--q) * 21);padding:0 calc(var(--q) * 10);border-radius:99px;background:rgba(183,168,255,.08);font:500 max(7px,calc(var(--q) * 11))/1 var(--sans);color:var(--muted);white-space:nowrap}
.tp-br-url span{overflow:hidden;text-overflow:ellipsis}
.tp-br-url svg{flex:none;width:calc(var(--q) * 11);height:calc(var(--q) * 11);color:var(--lav)}
.tp-br-lang{flex:none;display:inline-flex;align-items:center;height:calc(var(--q) * 21);padding:0 calc(var(--q) * 8);border-radius:99px;background:rgba(183,168,255,.14);font:500 max(7px,calc(var(--q) * 10))/1 var(--sans);color:var(--paper)}
.tp-br-view{position:relative;flex:1;overflow:hidden;background:var(--paper)}
.tp-br-prog{position:absolute;z-index:1;left:0;right:0;top:0;height:calc(var(--q) * 3);background:var(--violet);transform-origin:0 50%;transform:scaleX(.18)}
.tp-br-page{position:absolute;left:0;right:0;top:0}
.tp-wp-hero{display:grid;grid-template-columns:40% minmax(0,1fr);height:calc(var(--q) * 236)}
.tp-wp-panel{display:grid;place-items:center;background:var(--violet)}
.tp-wp-panel svg{width:88%;height:auto}
.tp-wp-copy{display:flex;flex-direction:column;justify-content:center;gap:calc(var(--q) * 11);min-width:0;padding:0 calc(var(--q) * 26)}
.tp-wp-eb{display:flex;align-items:center;gap:calc(var(--q) * 5);font:500 max(6px,calc(var(--q) * 9))/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--violet);white-space:nowrap}
.tp-wp-eb svg{flex:none;width:calc(var(--q) * 13);height:calc(var(--q) * 13)}
.tp-wp-t{font:600 calc(var(--q) * 27)/1.06 var(--display);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.tp-wp-sub{font:400 max(6px,calc(var(--q) * 10.5))/1.35 var(--sans);color:var(--ink-2)}
.tp-wp-sec{padding:calc(var(--q) * 24) calc(var(--q) * 26) calc(var(--q) * 26);border-top:1px solid rgba(18,15,46,.08)}
.tp-wp-k{display:block;font:500 max(6px,calc(var(--q) * 9))/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}
.tp-wp-h{display:block;margin-top:calc(var(--q) * 8);font:600 calc(var(--q) * 20)/1.1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.tp-wp-weeks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--q) * 8);margin-top:calc(var(--q) * 16)}
.tp-wp-weeks > span{display:grid;gap:calc(var(--q) * 6);padding:calc(var(--q) * 10);border-radius:calc(var(--q) * 8);background:#fff;box-shadow:inset 0 0 0 1px rgba(18,15,46,.08)}
.tp-wp-weeks b{font:600 max(6px,calc(var(--q) * 10))/1 var(--display);color:var(--ink)}
.tp-wp-weeks em{font:400 max(6px,calc(var(--q) * 9))/1.25 var(--sans);color:var(--ink-2)}
.tp-wp-weeks i{height:calc(var(--q) * 4);border-radius:9px;background:#DCD4FF}
.tp-wp-weeks > span:nth-child(-n+2) i{background:var(--violet)}
.tp-wp-note{display:block;margin-top:calc(var(--q) * 10);font:400 max(6px,calc(var(--q) * 10.5))/1.35 var(--sans);color:var(--ink-2)}

.tp-ph{position:absolute;right:0;bottom:0;width:calc(var(--q) * 178);height:calc(var(--q) * 364);padding:calc(var(--q) * 7);border-radius:calc(var(--q) * 30);background:#1B1640;box-shadow:inset 0 0 0 1px rgba(183,168,255,.32),0 40px 80px -30px rgba(0,0,0,.95)}
.tp-ph-scr{position:relative;height:100%;overflow:hidden;border-radius:calc(var(--q) * 23);background:var(--paper)}
.tp-ph-isl{position:absolute;z-index:2;left:50%;top:calc(var(--q) * 7);width:calc(var(--q) * 48);height:calc(var(--q) * 14);margin-left:calc(var(--q) * -24);border-radius:99px;background:var(--night)}
.tp-ph-page{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column}
.tp-pp-panel{display:grid;place-items:center;height:calc(var(--q) * 150);background:var(--violet)}
.tp-pp-panel svg{width:76%;height:auto}
.tp-pp-eb{margin:calc(var(--q) * 14) calc(var(--q) * 14) 0;font:500 calc(var(--q) * 7.5)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--violet);white-space:nowrap}
.tp-pp-t{margin:calc(var(--q) * 7) calc(var(--q) * 14) 0;font:600 calc(var(--q) * 16.5)/1.08 var(--display);letter-spacing:-.035em;color:var(--ink)}
.tp-pp-sub{margin:calc(var(--q) * 7) calc(var(--q) * 14) 0;font:400 max(5.5px,calc(var(--q) * 8))/1.35 var(--sans);color:var(--ink-2)}
.tp-pp-k{margin:calc(var(--q) * 18) calc(var(--q) * 14) 0;font:500 max(5.5px,calc(var(--q) * 7.5))/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}
.tp-pp-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:calc(var(--q) * 8);margin:calc(var(--q) * 8) calc(var(--q) * 14) 0;padding:calc(var(--q) * 8) calc(var(--q) * 10);border-radius:calc(var(--q) * 8);background:#fff;box-shadow:inset 0 0 0 1px rgba(18,15,46,.08)}
.tp-pp-row b{font:600 max(5.5px,calc(var(--q) * 8))/1 var(--display);color:var(--ink)}
.tp-pp-row i{height:calc(var(--q) * 4);border-radius:9px;background:#DCD4FF;transform-origin:0 50%;transform:scaleX(var(--w))}
.tp-pp-row.is-done i{background:var(--violet)}
.tp-web-chip{position:absolute;left:calc(var(--q) * 22);bottom:calc(var(--q) * 22);display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px 0 11px;border-radius:999px;background:rgba(183,168,255,.1);box-shadow:inset 0 0 0 1px rgba(183,168,255,.28);font:500 13px/1 var(--sans);color:var(--paper);white-space:nowrap}
.tp-web-chip svg{width:14px;height:14px;color:var(--lav)}
@container tp-web (max-width:419px){
  .tp-web-chip{height:26px;padding:0 10px 0 9px;gap:6px}
}

/* ---------- Built for the job: five use rows ---------- */
.tp-uses{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tp-use{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);grid-template-areas:"t d fan" "t go fan";column-gap:clamp(28px,4vw,56px);row-gap:10px;align-items:center;padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--line)}
.tp-use-text{display:contents}
.tp-use-t{grid-area:t;display:flex;flex-direction:column;gap:8px;margin:0;font:600 clamp(24px,2.4vw,30px)/1.1 var(--display);letter-spacing:-.03em;color:var(--paper)}
.tp-use-t span{font:500 13px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--lav)}
.tp-use-t span.soon{align-self:flex-start;margin:0;letter-spacing:0;text-transform:none}
.tp-use-d{grid-area:d;align-self:end;max-width:30em;font-size:17px;line-height:1.55;color:var(--muted)}
.tp-use .link-arrow{grid-area:go;align-self:start;justify-self:start}
.tp-fan{grid-area:fan;position:relative;aspect-ratio:2.3 / 1}
.tp-fan .tp-shot{position:absolute;top:50%;width:56%;transition:transform .5s var(--ease);box-shadow:inset 0 0 0 1px var(--line),0 24px 40px -24px rgba(0,0,0,.95)}
.tp-fan .tp-shot:nth-child(1){left:0;transform:translateY(-50%) rotate(-5deg)}
.tp-fan .tp-shot:nth-child(2){left:22%;transform:translateY(-50%) rotate(-1deg)}
.tp-fan .tp-shot:nth-child(3){left:44%;transform:translateY(-50%) rotate(3deg)}
.tp-use:hover .tp-fan .tp-shot:nth-child(1),.tp-use:focus-within .tp-fan .tp-shot:nth-child(1){transform:translate(-5%,-50%) rotate(-8deg)}
.tp-use:hover .tp-fan .tp-shot:nth-child(3),.tp-use:focus-within .tp-fan .tp-shot:nth-child(3){transform:translate(5%,-52%) rotate(5deg)}

/* ---------- Widths ---------- */
@media (max-width:1099px){
  .tp-stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tp-stage:nth-child(3){border-left:0}
  .tp-stage:nth-child(n+3){border-top:1px solid var(--line)}
  .tp-stage:nth-child(3) .tp-arrow{display:none}
}
@media (max-width:899px){
  .tp-use{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);grid-template-areas:"t fan" "d fan" "go fan";row-gap:12px}
  .tp-use-t{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:6px 14px}
}
@media (max-width:599px){
  .tp-stages{grid-template-columns:minmax(0,1fr)}
  .tp-stage + .tp-stage{border-left:0;border-top:1px solid var(--line)}
  .tp-stage:nth-child(3) .tp-arrow{display:block}
  .tp-arrow{left:calc(50% - 15px);top:-15px;transform:rotate(90deg)}
  .tp-stage-copy{padding:20px 20px 24px}
  .tp-use{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "d" "fan" "go";row-gap:14px}
  .tp-fan{width:100%;max-width:420px;margin:6px 0 4px}
}

/* ---------- Entrances: the four stages assemble when they reveal ---------- */
.js .tp-stage{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(200ms + var(--k) * 180ms)}
.js .tp-flow.is-in .tp-stage{opacity:1;transform:none}
.js .tp-th-ok,.js .tp-cursor{opacity:0;transform:scale(.6);transition:opacity .4s var(--ease),transform .5s var(--ease);transition-delay:.9s}
.js .tp-cursor{transform:translate(30%,30%);transition-delay:.6s}
.js .tp-kit,.js .tp-share-row{opacity:0;transform:translateY(8%);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:1.15s}
.js .tp-share-row{transition-delay:1.35s}
.js .tp-flow.is-in .tp-th-ok,.js .tp-flow.is-in .tp-cursor,.js .tp-flow.is-in .tp-kit,.js .tp-flow.is-in .tp-share-row{opacity:1;transform:none}

/* ---------- Loops (paused off screen by site.js, static under reduced motion) ---------- */
@keyframes tp-up{from{transform:translateY(var(--y0,0%))}to{transform:translateY(calc(var(--y0,0%) - 50%))}}
@keyframes tp-down{from{transform:translateY(calc(var(--y0,0%) - 50%))}to{transform:translateY(var(--y0,0%))}}
@keyframes tp-blink{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@keyframes tp-read{0%,14%{transform:translateY(0)}44%,64%{transform:translateY(-34%)}92%,100%{transform:translateY(0)}}
@keyframes tp-read-ph{0%,14%{transform:translateY(0)}44%,64%{transform:translateY(-22%)}92%,100%{transform:translateY(0)}}
@keyframes tp-prog{0%,14%{transform:scaleX(.18)}44%,64%{transform:scaleX(.72)}92%,100%{transform:scaleX(.18)}}

@media (prefers-reduced-motion:no-preference){
  .tp-collage.is-ready .tp-track{will-change:transform;animation:tp-up var(--dur,96s) linear infinite}
  .tp-collage.is-ready .tp-track.is-down{animation-name:tp-down}
  .tp-caret{animation:tp-blink 1.1s steps(1) infinite}
  .tp-br-page{animation:tp-read 11s var(--flip) infinite}
  .tp-ph-page{animation:tp-read-ph 11s var(--flip) infinite;animation-delay:.6s}
  .tp-br-prog{animation:tp-prog 11s var(--flip) infinite}
}

@media (prefers-reduced-motion:reduce){
  .js .tp-stage,.js .tp-th-ok,.js .tp-cursor,.js .tp-kit,.js .tp-share-row{opacity:1;transform:none}
  .tp-use:hover .tp-fan .tp-shot:nth-child(1),.tp-use:focus-within .tp-fan .tp-shot:nth-child(1){transform:translateY(-50%) rotate(-5deg)}
  .tp-use:hover .tp-fan .tp-shot:nth-child(3),.tp-use:focus-within .tp-fan .tp-shot:nth-child(3){transform:translateY(-50%) rotate(3deg)}
}