/* ai ecosystem pages
   developer:   rmiske, estevaot (gallery)
   requires:    /common/framework/css/framework.en.css
   ========================================================================== */


/* ==================================================
   SETUP
   ================================================== */
:root {
    --orange: #f95e00;
    --wrapper-h-pad: 2rem;
    --mobile-img-pad-bot: 20px;

    --bg: #151528;
    --bg-grad-cyan:
        radial-gradient(1200px 700px at 80% -12%, rgba(43, 192, 224, .22), transparent 60%),
        radial-gradient(950px 650px at 15% 18%, rgba(9, 68, 122, .26), transparent 62%),
        radial-gradient(800px 600px at 50% 105%, rgba(43, 192, 224, .12), transparent 55%),
        var(--bg);
    --bg-grad-emerald:
        radial-gradient(1100px 650px at 78% -8%, rgba(31, 143, 184, .22), transparent 62%),
        radial-gradient(900px 600px at 12% 22%, rgba(9, 68, 122, .28), transparent 62%),
        radial-gradient(700px 500px at 88% 92%, rgba(127, 202, 227, .08), transparent 55%),
        var(--bg);
    --bg-grad-quiet:
        radial-gradient(800px 500px at 50% 0%, rgba(9, 68, 122, .10), transparent 70%),
        var(--bg);

    --body: #D5DCEA;
    --link: #6FD8EE;
}
/*main [id] {
    scroll-margin-top: 7.5rem;
}*/
html { 
  scroll-behavior: smooth; 
  scroll-padding-top: 7.5rem; 
}
body {
    background: var(--bg);
    color: var(--body);
    font-family: 'Source Sans Pro', Arial, sans-serif;
    line-height: 1.6;
}
#_footer {
    filter: invert(1) brightness(1.1) hue-rotate(180deg);
    background: #dedede;
    border-top-color: #afafaf
}



/* ==================================================
   Layout
   ================================================== */
section, main header {
    border-top: 1px solid #343A64;
    padding: 4.5rem var(--wrapper-h-pad);
    position: relative;
    width: 100%;
}
section::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(43, 192, 224, 0.35) 50%,
        transparent 100%
  );
  z-index: 2;
}
.content {
    margin: 0 auto;
    max-width: 75rem;
    padding: 0 1.5rem;
    width: 100%;
}
.pod  {
    background: rgba(13, 22, 44, 0.55);
    border: 1px solid color-mix(in srgb, #2BC0E0 55%, transparent);
    box-shadow:
        /*can anyone see this*/
        0 0 24px rgba(43, 192, 224, 0.05),
        0 0 60px rgba(43, 192, 224, 0.03),
        0 18px 50px rgba(0, 0, 0, 0.35);
    border-radius: 1rem;
    overflow: hidden;
    padding: 3.5rem 2.5rem;
}
.capabilities {
    display: grid;
    gap: 3.5rem;
    grid-template-columns: 1fr auto;
}
img {
    height: auto;
    max-width: 100%;
}
.fancy-border {
    border: 1px solid color-mix(in srgb, #2BC0E0 55%, transparent);
    border-radius: 0.75rem;
    box-sizing: content-box;
}



/* ==================================================
   Typography
   ================================================== */
.hero-eyebrow {
    color: #2BC0E0;
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
    margin-bottom: var(--s-2);
    text-transform: uppercase;
}
main h1 {
    color: #fff;
    font-size: clamp(32px, 4.5vw, 3rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
}
main h1 span {
    background: linear-gradient(135deg, #6FD8EE 0%, #2BC0E0 55%, #1FA0B8 100%);
    background-clip: text;
    color: transparent;
}
main h2 {
    color: #2BC0E0;
    font-size: clamp(28px, 3.5vw, 2.375rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 2rem;
}
main h3 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
main h3.smallcaps {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
main h4 {
    color: #2BC0E0;
    font-size: 1.125rem;
    font-weight: 700;
}
main p {
    padding-bottom: 1rem;
}
main div[id$="-content"] p:last-child {
    padding-bottom: 0;
}
main a { 
    color: var(--link); 
}
main a:hover {
    color: var(--body);
}



/* ==================================================
   Buttons
   ================================================== */
.buttons {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    gap: 0.5rem;
}
.button_box .button {
    font-size: 0.84375rem;
}
.button {
    background-color: #2BC0E0;
    border: 1px solid #2BC0E0;
    border-radius: 25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
    color: var(--bg);
    display: inline-block;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.75rem 1.125rem;
    position: relative;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
} 
.button:hover {
    background: color-mix(in srgb, #fff 10%, #2BC0E0);
    border-color: #6FD8EE; 
    box-shadow: 0 14px 40px rgba(0,0,0,.5);
    color: var(--bg);
    transform: translateY(-1px);
}
.button.btn-outline {
    background-color: transparent;
    color: #2BC0E0;
}
.button.btn-outline:hover {
    background: color-mix(in srgb, #2BC0E0 10%, transparent);
}



/* ==================================================
   sticky nav
   ================================================== */
#sticky-nav {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid #343A64;
    font-size: 0.875rem;
    position: fixed;
    top: -100px;
    left: 0;
    right: 0;
    z-index: 99;
}
#sticky-nav.in {
    top: 50px;
}
#sticky-nav .wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    padding-right: 32px;
}
#sticky-nav .nav-title {
    font-weight: 700;
    white-space: nowrap;
}

#sticky-nav .nav-links {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
}

#sticky-nav .button {
    border: none;
    box-shadow: none;
    color: #F1F2FA;
    padding: 0.375rem 0.625rem
}
#sticky-nav .button:hover {
    background: color-mix(in srgb, #2BC0E0 18%, transparent);
    color: #fff;
    transform: none;
}
#sticky-nav .button.active {
    background: color-mix(in srgb, #2BC0E0 24%, transparent);
    box-shadow: inset 0 -2px 0 #2BC0E0;
} 



/* ==================================================
   hero
   ================================================== */
#hero {
    padding: 6rem 0 3.5rem;
    position: relative;
    overflow: hidden;
    min-height: auto;
}
#hero .content {
    position: relative;
    z-index: 3;
}
@media (max-width: 1199px) {
  .hero { padding: 4.5rem 0 2.5rem; }
}
@media (max-width: 599px) {
  .hero { padding: 3.5rem 0 2rem; }
}
.grain {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-repeat: repeat;
}

#hero h1 + p {
color: #2BC0E0;
    font-size: clamp(18px, 1.6vw, 1.375rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.005em;
    max-width: 60ch;
}
#hero p + p {
    font-size: clamp(16px, 1.6vw, 1.125rem);
    max-width: 60ch
}
#hero p:last-of-type {
    margin-bottom: 1rem;
}



/* ==================================================
   Examples
   ================================================== */
/*for mcp landing/foundation tool
-------------------------------------*/
#examples p {
    margin: 0 auto 1rem 0.7rem;
    text-align: left;
}
#examples h3.smallcaps {
    margin: 2.5rem 0.7rem 1rem;
}
html .mfp-wrap {
    scrollbar-width: none;
}
html .mfp-content {
    padding: 0 !important;
    margin-top: 1rem;
}


/*featured*/
#featured-examples {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(4,1fr);
    margin: 0 0.7rem;
    @media (max-width: 900px) {
        grid-template-columns: repeat(2,1fr);
    }
    @media (max-width: 600px) {
        grid-template-columns: repeat(1,1fr);
    }
}
#featured-examples .pod {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: 
        radial-gradient(400px 300px at 80% 0%, rgba(43, 192, 224, 0.10), transparent 60%),
        radial-gradient(300px 250px at 0% 100%, rgba(43, 192, 224, 0.06), transparent 55%),
        linear-gradient(180deg, rgba(13, 22, 44, 0.65) 0%, rgba(8, 14, 28, 0.55) 100%);
    border: 1px solid rgba(43, 192, 224, 0.25);
    padding: 1.25rem;
    transition: border-color 150ms, .15s ease, box-shadow var(--dur-fast, .15s) ease, transform var(--dur-fast, .15s) ease;
}
#featured-examples .pod:hover {
    border-color: rgba(43, 192, 224, 0.55);
    box-shadow: 0 0 24px rgba(43, 192, 224, 0.10);
}
#featured-examples h3 {
    color: #2BC0E0;
    margin-bottom: 0;
}
#featured-examples img {
    border: 1px solid rgba(43, 192, 224, 0.15);
    border-radius: 0.75rem;
}
#featured-examples tt {
    background: #0b1725;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--body);
    display: block;
    margin: auto 0 0;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
}


/*json gallery (estevao)*/
.cag-gallery {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    align-content: flex-start;
    gap: .7rem;
    padding: .7rem;
    word-break: break-word;
    margin-bottom: 2.25rem;
    height: auto;
    transition: all 1s ease;
    &:not(#featured) {
        mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
    }
    &.open {
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }
    @media (max-width: 1200px) {
        grid-template-columns: repeat(4,1fr);
    }
    @media (max-width: 900px) {
        grid-template-columns: repeat(3,1fr);
    }
    @media (max-width: 600px) {
        grid-template-columns: repeat(1,1fr);
    }
}

/*.cag-gallery#featured {
    gap: 1.25rem;
    grid-template-columns: repeat(4,1fr);
    @media (max-width: 900px) {
        grid-template-columns: repeat(2,1fr);
    }
}*/

.cag-gallery {
   &:not(.loaded) + .gallery-controls { display:none; }
   & + .gallery-controls {
      display: flex;
      justify-content: center;
       & button {
           background: transparent;
           border: none;
           border-radius: 25rem;
           color: #2BC0E0;
           font-weight: 700; 
           padding: 0.75rem 1.125rem;
           &:hover {
                background: rgba(43, 192, 224, 0.10);
                color: #6FD8EE;
           }
       }
      & .btn.action-open { display:block }
      & .btn.action-close { display: none; }
   }  
   &.open + .gallery-controls {
      & .btn.action-open { display:none }
      & .btn.action-close { display: block; }
   }
}

/* Content (input / output) from JSON */
.cag-gallery {
   & .answer-wrapper { display:grid; }
   & .answer-wrapper > :where(div,ul) {
      padding: 1rem;
        border-color: #5166895e;
        border:none;
      margin-block: .5rem;
      color: #000;
   }
   & > div {
      color: #033864;
      font-size: .95rem;
      font-weight: 600;
      line-height: 1.4;
      display: grid;
      z-index: 1;
      align-items: center;            
      position: relative;      
      & > div { padding:1.25rem; }
      & > div:first-of-type {  
         display: flex;
         height: 100%;      
         align-items: center;  
         cursor: pointer;  
         color: #6fd8ee;
         background-color:rgba(13, 22, 44, 0.5);
         border: 1px solid rgba(43, 192, 224 , 0.22);
         border-radius: 0.75rem;
         word-break: keep-all;
         &:hover {
            color: #fff;
            background-color: rgba(13, 22, 44, 0.7);
            border: 1px solid rgba(43, 192, 224, 0.55); 
         }    
      }
      & > div:last-of-type {
         box-shadow: rgba(72, 72, 72, 0.32) 0 21px 22px 0;
         padding-top: .85rem;
         background: #1f1f1e;
         color: #6d6d6dbf;
         border-radius:10px
      }
   }
   &:not(.open) > div:nth-of-type(n + 16) {
      display: none;
   }
   & .pre {
      padding-top:150px;
      background: linear-gradient(90deg, var(--primary-color) 25%, #f6f6f7 50%, var(--primary-color) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.2s linear infinite;
   }
   & ul { margin-block: 1rem; }
   & div {
      & img { max-width:min(80%,300px); }
      & button {
         width: 20px;
         height: 20px;
         font-size: 1.2rem;
      } 
   } 
   & :is(code, kbd, pre, samp, tt) {
      font-family: "Source Sans Pro",Consolas, Monaco, monospace;
      font-size: .75rem;
      font-weight:600;
        color: rgb(255, 255, 255);
   }
}

.cag-gallery {
   /* outputs */
   & .input {
        border: none;
        background: #121212;
        color:white;
        border-radius:10px;
        font-weight:400;
        font-size:1.05rem;
        width: 90%;
        left: 10%;
        position: relative;
   }
   & .input::before {
      display: block;
      content: "USER INPUT";
      margin-bottom:.5rem;
        color: #cfe8ffc4;
      font-size: .85rem;
      font-weight:400;
   }
   & .WolframLanguageEvaluatorToolCall {
      margin: 0;
      background: #ffecb1;
      border: 2px solid #ffc658;
      & img { 
         width: 100%;
         max-width:100%; 
      }
   }
   & .WolframAlpha {
     margin: 0;
     border: 2px solid #ffc658;
     margin-block: .5rem;
   }
   /* markdown */
   & .Markdown {
      font-weight: 500;
        color: rgb(212, 212, 212);
   }
   & .Markdown .tex {
      font-size: .8rem;
   }
   & .Markdown > div {
      > * { margin-top:.5rem; }
      & h1 { 
         font-size: 1.5rem;
         color:#d53e39;
         line-height: 1;
      }
      & h2 {
         font-size: 1.3rem;
         color: #f86300;
         line-height: 1;
      }
      & pre {
            background: #242f3a;
         padding: 1rem;
         font-size: 0.7rem;
         font-weight: 400;
         margin-top: .5rem;
      }
      & ul, & ol { list-style: circle; }
      & li { 
         list-style: disc;
         margin-top: .5rem;
         list-style-position: inside;
      }
   }
   & .Markdown::before {
      display: block;
      content: "LLM OUTPUT";
      margin-bottom: .5rem;
      color: #898989;
      font-size: .85rem;
      font-weight: 400;
   }
   /* tables */
   & div:popover-open .Markdown img { max-width:60% }
   & .Markdown :is(table,td,th) {
      border: 1px solid #ccc;
   }
   & .Markdown table {
      width: 100%;
      & thead {
         background: #ececec;
         border: 1px solid #ccc;
      }
      & td {
         padding: .2rem .6rem;
      }
   }
   /* Output Labels */
   & .has-label::before {
      display: block;
      content: attr(data-label,"OUTPUT");
      margin-bottom:.5rem;
        color: #cfe8ffab;
      font-size: .85rem;
      font-weight:400;
      text-transform: uppercase;
   }
   /* torn effect */
   & .torn {
      max-height:170px;
      min-height: 100px;
      overflow: hidden;
      margin-bottom: .1rem;
      position:relative;      
   }
   & .torn:open::after,
   & div.torn::after {
      display:block;
      background: bottom url('../img/codeTear-lightyellow.png') repeat-x;
      background-size:contain;
      height:50px;
      content:'';
      bottom:0;
      z-index:2;
      position:absolute;
      width: 100%;
   }
   & :is(.Documentation,.WolframAlpha) {
      margin-block: .5rem;
      margin-inline: 0;
      border: 2px solid #4d6282;
   }
   & :is(.WolframLanguageEvaluatorToolCall,.Documentation,.WolframAlpha) {
        background: #2a41577d;
        width: 100%;
        left: 0%;
      position: relative;
   }
   /* Multiple outputs */
   & .WolframLanguageEvaluatorToolCall:has(+ .WolframLanguageEvaluatorToolCall),
   & .Documentation:has(+ .Documentation),
   & .WolframAlpha:has(+ .WolframAlpha) {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
   }
   & .WolframLanguageEvaluatorToolCall + .WolframLanguageEvaluatorToolCall, 
   & .Documentation + .Documentation,
   & .WolframAlpha + .WolframAlpha {
      border-top: none;
      margin-top: 0;
   }
   /* lists */
   & li {
      & > p { display: inline; }
      & > ul { padding-left: 1rem; }
   }
}

/* Tabs on the gallery */
.cag-gallery .tabs {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto 1fr;
   padding-top: 1rem;
   & details {
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      grid-column: 1 / -1;
      grid-row: 1 / span 3;
   }
   & details > div {
      margin-top: -20px;
      overflow:hidden;
   }
   & details::details-content {
     grid-row: 2; 
     grid-column: 1 / -1; 
     padding: 1rem;
   }
   & details:not([open])::details-content {
     display: none;
   }
   & summary {
      grid-row: 1;
      font-size: .7rem;
      display: grid;
      padding: .19rem 1rem .2rem;
      cursor: pointer; 
      z-index: 1;
      border-radius: 1rem;
      font-weight: 400;
      background:#242f3a;
        color:#fff;
      border: 1px solid #4c5f6f;
      text-transform: uppercase;
   }
   & details[open] summary {
        background: #4c5f6f;
   }
   & details:nth-of-type(1) {
      & summary {
         grid-column: 1 / span 1; 
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
         text-align: right;
         justify-self: flex-end;
      }
      & > div { max-height:130px }
   }
   & details:nth-of-type(2) {
      &.torn {
         max-height: 400px;*/
      }
      & summary {
         grid-column: 2 / span 1;
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
         text-align: left;
         padding-right: 1rem;
         justify-self: flex-start;
      }
      & > div { 
         max-height:300px;
         margin-top: 0;
         overflow: hidden;
      }
   }
   & details > div .ContentMarkdown {
        border: none;
        background: #10181e;
      margin: 0px 15px;
      font-family: Consolas, Monaco, monospace;
      font-size: 0.79rem;
      font-weight: 400;
        color: #cfcfcf;
      line-height: 1;
      overflow: unset;
      overflow-y: hidden;
      overflow-x: hidden;
      padding: 1rem;
      white-space: normal;
      word-wrap: break-word;
      & > * { 
         font-size: 0.65rem !important;
         line-height:1rem;
         padding:.15rem 0;
      }
   }
}

/* 
   Popover
   ============= */
[popover] {
   max-width: 700px; 
   width: auto; 
   height: 80vh;
   display: none;
}

html.popover-open {
  overflow: hidden; 
  height: 100vh;
}
.cag-gallery div {
   &:popover-open {
      display: block;
      top: 50%;
      left: 50%;
      margin: 0;
      transform: translate(-50%,-50%);
      & img { 
          max-width:100%; 
          filter:invert(1) hue-rotate(180deg);
      }
      @media (max-width: 900px) {
         width: 80lvw;
         height: 80lvh;
      }
      @media (max-width: 600px) {
         width: 90lvw;
         height: 90lvh;
      }
   }
   &::backdrop {
      background:#2d2e2f;
      opacity: .7;
      backdrop-filter: blur(3px);
   }
   & button {
      position: sticky;
      width: 25px;
      height: 25px;
        color: #000;
      font-size: 1.4rem;
        background: #9999998f;
      overflow: visible;
      box-shadow: 0 0 5px #33333369;
      right: -12px;
      left: 100%;
      border: 0;
      border-radius: 50%;
      top: 2;
      padding: 7px 4.5px;
      line-height: 0.5;
      font-family: monospace;
      z-index: 999;
      margin: 0;
      touch-action: manipulation;
      &:hover {
         background: #7b7b7b;
      }
   }
}

@keyframes shimmer {
   0% { background-position:200% 0;}
   100% { background-position: -200% 0; }
}



/* ==================================================
   Q&A
   ================================================== */
#q-and-a {
    background: var(--bg-grad-quiet);
}
#q-and-a .content {
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr 1fr;

}
#q-and-a h2 {
    text-align: center;
    grid-column-end: span 2;
    margin-bottom: -1rem;
}
#q-and-a h3 {
    margin-top: 2.5rem;
}
#q-and-a h4 {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer; 
    padding: 1.25rem 2rem 1.25rem 0;
    position: relative;
}
#q-and-a .question:first-of-type h4 {
    border: none;
}
#q-and-a h4:hover {
    color: #6FD8EE;
}
#q-and-a h4 + div {
    display: none;
    opacity: 0;
    animation: faqReveal 350ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
#q-and-a h4.active + div {
    opacity: 1;
}

#q-and-a .question h4::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 0.667rem;
    right: 0;
    top: 1.75rem;
    background: url('/artificial-intelligence/img/caret.svg') no-repeat;
    transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
#q-and-a .question h4.active::after {
    transform: rotate(180deg);
}

#q-and-a ul li {
    padding: 0 0 1rem 0.75rem;
    position: relative;
}
#q-and-a ul li:before {
    color: var(--body);
    content: '\25AA';
    margin-left: -0.75rem;
    position: absolute;
}

#q-and-a tt {
    font-size: 0.9rem;
}


@keyframes faqReveal {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* ==================================================
   REVEAL / JS adds .reveal to targets on load.
   ================================================== */
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
.reveal.reveal--in {
  animation: revealIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes revealIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal--stagger:nth-child(1).reveal--in  { animation-delay: 0ms; }
.reveal--stagger:nth-child(2).reveal--in  { animation-delay: 80ms; }
.reveal--stagger:nth-child(3).reveal--in  { animation-delay: 160ms; }
.reveal--stagger:nth-child(4).reveal--in  { animation-delay: 240ms; }
.reveal--stagger:nth-child(5).reveal--in  { animation-delay: 320ms; }
.reveal--stagger:nth-child(6).reveal--in  { animation-delay: 400ms; }
.reveal--stagger:nth-child(7).reveal--in  { animation-delay: 480ms; }
.reveal--stagger:nth-child(8).reveal--in  { animation-delay: 560ms; }
.reveal--stagger:nth-child(9).reveal--in  { animation-delay: 640ms; }
.reveal--stagger:nth-child(10).reveal--in { animation-delay: 720ms; }
.reveal--stagger:nth-child(11).reveal--in { animation-delay: 800ms; }
.reveal--stagger:nth-child(12).reveal--in { animation-delay: 880ms; }
.reveal--stagger:nth-child(n+13).reveal--in { animation-delay: 880ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}



/* ==================================================
   Responsive
   ================================================== */
@media (max-width: 1200px) {
    :root {
        --wrapper-h-pad: 3rem;
    }
}


@media (max-width: 900px) {
    :root {
        --wrapper-h-pad: 3.2rem;
    }


    /*layout*/
    .capabilities {
        gap: 1rem;
        grid-template-columns: 1fr;
    }


    /*q&a*/
    #q-and-a .content {
        grid-template-columns: 1fr;

    }
    #q-and-a h2 {
        grid-column-end: span 1;
    }
}


@media (max-width: 600px) {
    :root {
        --wrapper-h-pad: 20px; /* line up with global menu */
    }
}


@media (max-width: 320px) {
}


@media print {}


@media (prefers-reduced-motion: reduce) {
    html, body {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}