/* al-deck.css -- AIDA Labs: stacked card deck (products page). Front card in the middle, the next cards
   fanned out behind it; a text box under the deck describes the front card. Paris dusk palette.
   Without JavaScript the cards and their text boxes simply show one after another. */
.al-deck{margin:8px 0 40px}
.al-deck-stage{position:relative;max-width:1040px;margin:0 auto;aspect-ratio:16/8.3;touch-action:pan-y;outline:none}
.al-deck-card{position:absolute;inset:5% 13% 4%;margin:0;border-radius:18px;overflow:hidden;background:var(--surface,#2B3A4E);
  border:1px solid rgba(215,175,89,.5);box-shadow:0 28px 60px rgba(0,0,0,.45);cursor:pointer;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .45s,opacity .45s;will-change:transform}
.al-deck-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.al-deck-card figcaption{position:absolute;left:14px;bottom:14px;font-family:var(--al-serif);font-weight:700;font-size:20px;line-height:1;
  color:var(--al-gold,#D7AF59);background:rgba(31,42,54,.88);border:1px solid rgba(215,175,89,.6);border-radius:999px;padding:8px 13px}
.al-deck-card[data-pos="0"]{transform:none;z-index:5;cursor:default}
.al-deck-card[data-pos="-1"]{transform:translateX(-15%) rotate(-4.5deg) scale(.86);z-index:4;filter:brightness(.5) saturate(.75)}
.al-deck-card[data-pos="1"]{transform:translateX(15%) rotate(4.5deg) scale(.86);z-index:4;filter:brightness(.5) saturate(.75)}
.al-deck-card[data-pos="-2"]{transform:translateX(-23%) rotate(-8deg) scale(.74);z-index:3;filter:brightness(.35) saturate(.6)}
.al-deck-card[data-pos="2"]{transform:translateX(23%) rotate(8deg) scale(.74);z-index:3;filter:brightness(.35) saturate(.6)}
.al-deck-card:not([data-pos="0"]):hover{filter:brightness(.75)}
.al-deck-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:18px auto 22px;max-width:1040px}
.al-deck-nav button{font:700 15px/1.2 var(--al-sans);color:var(--al-text,#F3ECE4);background:var(--surface,#2B3A4E);
  border:1px solid var(--line2,#6E82A0);border-radius:999px;padding:9px 15px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.al-deck-nav button:hover{background:var(--surface2,#33445A)}
.al-deck-nav button[aria-current="true"]{background:var(--al-gold,#D7AF59);border-color:var(--al-gold,#D7AF59);color:#1a1512}
.al-deck-nav .al-deck-arrow{font-size:20px;line-height:1;padding:7px 15px}
.al-deck-nav button:focus-visible,.al-deck-stage:focus-visible{outline:2px solid var(--blue-l,#7FA3C9);outline-offset:3px}
.al-deck-info{max-width:1040px;margin:0 auto}
.al-deck-info h2{margin:0 0 10px;font-size:30px;border:0;padding:0}
.al-deck-info p{font-size:18px;line-height:1.6;margin:0 0 12px;color:var(--al-text,#F3ECE4)}
.al-deck-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 4px;padding:0}
.al-deck-tags li{font-size:15px;padding:6px 13px;border-radius:999px;background:var(--surface2,#33445A);border:1px solid var(--line2,#6E82A0);color:var(--sub,#D5DDE6)}
.al-deck-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px}
.al-deck-links a{font-weight:700;font-size:16px;color:var(--al-gold,#D7AF59)!important;text-decoration:none!important}
.al-deck-links a:hover{text-decoration:underline!important}
/* before the script runs, or without it: one card after another */
.al-deck:not(.is-ready) .al-deck-stage{aspect-ratio:auto;display:grid;gap:18px}
.al-deck:not(.is-ready) .al-deck-card{position:static;aspect-ratio:16/10}
.al-deck:not(.is-ready) .al-deck-nav{display:none}
.al-deck:not(.is-ready) .al-deck-info{margin-bottom:24px}
@media (max-width:760px){
  .al-deck-stage{aspect-ratio:16/9.6}
  .al-deck-card{inset:6% 7% 4%}
  .al-deck-card[data-pos="-1"]{transform:translateX(-9%) rotate(-4deg) scale(.86)}
  .al-deck-card[data-pos="1"]{transform:translateX(9%) rotate(4deg) scale(.86)}
  .al-deck-card[data-pos="-2"],.al-deck-card[data-pos="2"]{opacity:0}
  .al-deck-info h2{font-size:25px}
  .al-deck-info p{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.al-deck-card{transition:none}}
.al-deck{overflow-x:clip}
/* ---------- fit on one screen (2026-10-04): compact intro, product names above, text box beside the card ---------- */
section.about{padding-top:14px!important}
.about > h1{font-size:40px;margin:4px 0 6px}
.about > .lead{font-size:18px;margin:0 0 12px;max-width:1000px}
.al-deck{margin-top:0}
.al-deck-nav{margin:0 auto 14px}
@media (min-width:1000px){
  .al-deck{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"nav nav" "stage info";column-gap:28px;align-items:center}
  .al-deck-nav{grid-area:nav;margin:0 0 8px}
  .al-deck-nav button{font-size:14px;padding:8px 12px}
  .al-deck-stage{grid-area:stage;width:100%;max-width:none;aspect-ratio:auto;height:clamp(260px,calc(100vh - 372px),560px);margin:0}
  .al-deck-card{inset:5% 8% 5%}
  .al-deck-info{grid-area:info;align-self:center;margin:0;max-height:calc(100vh - 360px);overflow:auto}
  .al-deck-info h2{font-size:26px;margin-bottom:8px}
  .al-deck-info p{font-size:16px;line-height:1.5}
  .al-deck-tags li{font-size:14px;padding:5px 11px}
}
@media (max-width:999px){
  .al-deck-nav{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px}
  .al-deck-nav::-webkit-scrollbar{display:none}
  .al-deck-nav button{flex:none}
  .al-deck-stage{margin-bottom:10px}
}
@media (min-width:601px) and (max-width:999px){.al-deck-stage{aspect-ratio:16/8.6}}
@media (max-width:600px){.about > h1{font-size:32px}.about > .lead{font-size:17px}}
@media (min-width:1000px){
  .al-deck-nav{max-width:none;flex-wrap:nowrap}
  /* keep every card at the shape of its picture so nothing is cropped */
  .al-deck-card{inset:0;margin:auto;height:88%;width:auto;aspect-ratio:16/10;max-width:86%}
  .al-deck-card img{object-fit:contain;background:#1F2A36}
}
@media (min-width:1000px){
  .al-deck-stage{container-type:size}
  .al-deck-card{inset:0;margin:auto;height:auto;max-width:none;aspect-ratio:16/10;width:min(84cqw,calc(86cqh * 1.6))}
  .al-deck-card img{object-fit:cover}
}
/* short laptop screens: keep the text box to one screen */
@media (min-width:1000px) and (max-height:760px){
  .al-deck-tags{display:none}
  .al-deck-info p{font-size:15px;line-height:1.45}
  .al-deck-info h2{font-size:24px}
}