/* Layout and component styles for the version 2 Websites page. New CSS (not copied from a source file).
   Colour, type, spacing and radius come from ../../shared/paper-base.css; the glow palette comes from vis-base.css. */

/* ---------- animation holders on black ---------- */
.tpl-anim{position:relative;width:100%;margin-inline:auto}
.tpl-anim>.vis{width:100%}
.tpl-anim--chain{width:min(100%,calc(60vh * 13 / 9))}                 /* smallish: at most about 60% of the viewport height at 1440 */
.tpl-anim--chain>.vis{aspect-ratio:13 / 9}
.tpl-anim--how{width:min(100%,calc(72vh * 16 / 9))}
.tpl-anim--how>.vis{aspect-ratio:16 / 9}
.tpl-anim--price{width:min(100%,calc(72vh * 16 / 9))}
.tpl-anim--price>.vis{aspect-ratio:16 / 9}
.tpl-anim--who{width:min(100%,440px)}
.tpl-anim--who>.frame{width:100%}
.tpl-black--above .tpl-anim{margin-bottom:var(--sp-8)}
.tpl-black--anim{padding-block:var(--sp-6)}
@media (max-width:600px){
  .tpl-anim--how>.vis{aspect-ratio:4 / 3}
  .tpl-anim--price>.vis{aspect-ratio:1 / 1}
}
/* Hero B, laid over the stream of How it works A: it has no frame of its own and grows from the live point */
.chain-hero{position:absolute;inset:0;pointer-events:none;opacity:0;transform-origin:50% 50%;will-change:transform,opacity}
.chain-hero .vis{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;background:none;border:0;box-shadow:none;border-radius:0}
/* the pack's pricing sentences, shown under the price animation */
.price-key{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);color:var(--color-on-black-2)}
.price-key li{border-top:1px solid var(--color-line-black);padding-top:var(--sp-3);font-size:var(--type-small-size);line-height:var(--type-small-lh)}
.price-key b{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--type-ui-l-size);line-height:var(--type-ui-l-lh);color:var(--color-on-black)}
@media (max-width:767px){.price-key{grid-template-columns:1fr;gap:var(--sp-4)}}

/* ---------- Website examples: vertical carousel inside the paper sheet ---------- */
.ex-sheet .ex-buttons{display:flex;gap:var(--sp-3);margin-top:var(--sp-5)}
.ex-stage{position:relative}
.ex-view{position:relative;height:100%;overflow-x:hidden;overflow-y:scroll;overscroll-behavior-y:auto;
  scroll-snap-type:y mandatory;container-type:size;outline:none}
.ex-view:focus-visible{outline:2px solid var(--color-ink);outline-offset:-2px;border-radius:var(--radius-frame)}
.ex-list{--ex-w:calc(100cqw - 24px);--ex-h:calc(var(--ex-w) * 9 / 16 + 30px + 76px);list-style:none;margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--sp-6);
  padding:calc(50cqh - var(--ex-h) / 2) 0}
.ex-item{width:var(--ex-w);flex:none;scroll-snap-align:center;scroll-snap-stop:always;transform-origin:50% 50%;outline:none;--cw:100%}
.ex-item .screen-card__name{color:var(--color-ink)}
.ex-item .screen-card__frame{box-shadow:0 1px 2px rgba(0,0,0,.25),0 14px 24px -6px rgba(0,0,0,.35)}
.ex-item .screen-card__view{overscroll-behavior-y:auto}
.ex-item:focus-visible .screen-card__frame{outline:2px solid var(--color-ink);outline-offset:6px}
/* the size change follows the scroll: the example in the middle is 100%, the others 75% and dimmed */
@supports (animation-timeline:view()){
  .ex-item{animation:ex-size linear both;animation-timeline:view(block);animation-range:cover 0% cover 100%}
  @keyframes ex-size{0%,100%{transform:scale(.75);opacity:.45}50%{transform:scale(1);opacity:1}}
}
/* a scrollbar that is always there and can be dragged */
.ex-view::-webkit-scrollbar{width:12px}
.ex-view::-webkit-scrollbar-track{background:rgba(10,10,10,.12);border-radius:6px}
.ex-view::-webkit-scrollbar-thumb{background:var(--color-black);border-radius:6px;border:2px solid transparent;background-clip:padding-box;min-height:48px}
@supports not selector(::-webkit-scrollbar){.ex-view{scrollbar-width:auto;scrollbar-color:var(--color-black) rgba(10,10,10,.12)}}
@media (min-width:1024px){
  .ex-sheet{min-height:min(92vh,900px)}
  .ex-clip{position:absolute;inset:0;z-index:1;pointer-events:none}                 /* clipped to the sheet's own edge by paper-base.js (data-clip) */
  .ex-stage{position:absolute;top:0;bottom:0;right:var(--margin);width:calc(6 * var(--col) + 5 * var(--gutter));pointer-events:auto}
}
@media (max-width:1023px){
  .ex-clip{position:relative;margin:var(--sp-6) var(--margin) 0;clip-path:none!important;-webkit-mask-image:none!important;mask-image:none!important}
  .ex-stage{aspect-ratio:1 / 1}                                                       /* tall enough for one example and a peek of the next */
  .ex-view{position:absolute;inset:0;height:auto}
}
@media (min-width:768px) and (max-width:1023px){.ex-clip{margin-left:calc(var(--margin) + 2 * (var(--col) + var(--gutter)))}}   /* lines up with the text above (cut at column line 2) */
@media (max-width:767px){.ex-clip{margin-left:calc(16px + var(--sp-6))}.ex-stage{aspect-ratio:4 / 5}}
@media (prefers-reduced-motion:reduce){.ex-view{scroll-behavior:auto}}

/* No frames (Amy, 07/11/2026): animations sit directly on the black section, with no box, border, outline, frame background, rounded panel or label around them. The extracted visuals bring .vis (vis-base.css) and .frame and .circ (frame-home.css). The frame class keeps its size and clipping but loses its box: no background, border, rounded corners or shadow. */
.vis,.frame,.frame.circ{background:none;border:0;border-radius:0;box-shadow:none}
/* Without the box, the tilted page layers of Hero B must not be cut off by the old frame edge, so the holder no longer clips them. */
.tpl-anim--how>.vis,.chain-hero .vis{overflow:visible}