/**********************************************************************/
/*
** Fonts
*/

@font-face {
  font-family: Grato-Marker;
  src: url("/_font/Grato-Marker-Variable.woff") format("woff-variations");
}

[wrap] {
  white-space: normal !important;
}


/**********************************************************************/
/*
** Responsive Sizes
*/

@media screen and (min-width: 670px) {
  #tenet-logo svg {
    height: min( clamp(44.4444px, 7.4074vw, 185.185px),
         clamp(79.99992px, 7.4074vh, 222.222px) );
  }

  h2 {
    font-size: min( clamp(22.2222px, 3.7037vw, 92.5925px),
         clamp(39.99996px, 3.7037vh, 111.111px) );
  }

  #tagline {
    font-size: min( clamp(7.9164px, 1.3194vw, 32.985px),
         clamp(14.24952px, 1.3194vh, 39.582px) );
  }

  section p {
    font-size: min( clamp(11.6664px, 1.9444vw, 48.61px),
         clamp(20.99952px, 1.9444vh, 58.332px) );
    line-height: 1.52375;
  }

  section p:not(:first-of-type) {
    margin-top: min( clamp(7.2px, 1.2vw, 30.0px),
         clamp(12.96px, 1.2vh, 36.0px) );
  }

  section blockquote {
    font-size: min( clamp(10.5px, 1.75vw, 43.75px),
         clamp(18.9px, 1.75vh, 52.5px) );
  }

  section blockquote .byline {
    font-size: min( clamp(6.6666px, 1.1111vw, 27.7775px),
         clamp(11.99988px, 1.1111vh, 33.333px) );
  }

  section .cta-btn {
    margin-top: min( clamp(26.6664px, 4.4444vw, 111.11px),
         clamp(47.99952px, 4.4444vh, 133.332px) );
  }

  .cta-btn small {
    font-size: min( clamp(6.6666px, 1.1111vw, 27.7775px),
         clamp(11.99988px, 1.1111vh, 33.333px) );
  }

  section .cta-btn a {
    height: min( clamp(27.7776px, 4.6296vw, 115.74px),
         clamp(49.99968px, 4.6296vh, 138.888px) );
    width: calc(3 * min( clamp(27.7776px, 4.6296vw, 115.74px),
         clamp(49.99968px, 4.6296vh, 138.888px) ));
  }
}
@media screen and (max-width: 670px) {
  #tenet-logo svg {
    height: 15.2672vw;
  }

  h2 {
    font-size: 9.1781vw;
  }

  #tagline {
    font-size: 2rem;
  }

  section p {
    font-size: 4.58vw;
    line-height: 1.4;
  }

  section p:not(:first-of-type) {
    margin-top: 0.875em;
  }

  section blockquote {
    font-size: 4vw;
  }

  section blockquote .byline {
    font-size: 2.539657vw;
  }

  section .cta-btn {
    margin-top: 6rem;
  }

  .cta-btn small {
    font-size: 3.0534vw;
  }

  section .cta-btn a {
    height: 12.2137vw;
    width: calc(3 * 12.2137vw);
  }
}


/**********************************************************************/
/*
** Page
*/

#logo svg {
  height: min( clamp(31.1112px, 5.1852vw, 129.63px),
         clamp(56.00016px, 5.1852vh, 155.556px) );
}

#page-tenet {
  display: flex;
  flex-direction: column;
  gap: min( clamp(69.0px, 11.5vw, 287.5px),
         clamp(124.2px, 11.5vh, 345.0px) );
  margin-left: auto;
  margin-right: auto;
  max-width: min( clamp(444.4446px, 74.0741vw, 1851.8525px),
         clamp(800.00028px, 74.0741vh, 2222.223px) );
  width: 100vw;
  padding: 0 min( clamp(16.6668px, 2.7778vw, 69.445px),
         clamp(30.00024px, 2.7778vh, 83.334px) );
}

#hero {
  margin-top: min( clamp(-12.0px, -2vw, -50.0px),
         clamp(-21.6px, -2vh, -60.0px) );
}

#tenet-logo {
  fill: var(--text);
  margin-bottom: -25px;
}

#tagline {
  font-weight: 300;
  margin-top: min( clamp(10.6668px, 1.7778vw, 44.445px),
         clamp(19.20024px, 1.7778vh, 53.334px) );
  opacity: 0.5;
  text-align: center;
  letter-spacing: 0.25px;
  word-spacing: 0.25px;
}

#early-access {
  position: absolute;
  top: 100%;
  font-size: 24px;
  font-weight: 150;
}

h2 {
  font-weight: 700;
  letter-spacing: 0.125px;
}

section {
  display: flex;
  width: 100%;
}

section p {
  font-weight: 250;
}

section p.small {
  font-size: 15px;
  font-weight: 300;
}

section.side-by-side {
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

section.side-by-side.img-right {
  flex-direction: row-reverse;
}

section.centered {
  flex-direction: column;
  justify-content: start;
  align-items: center;
  text-align: center;
}

section .text {
  align-items: start;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  max-width: 100%;
}

@media screen and (min-width: 670px) {
  section.side-by-side .text {
    width: min( clamp(208.3332px, 34.7222vw, 868.055px),
         clamp(374.99976px, 34.7222vh, 1041.666px) );
  }
}

section.centered .text {
  align-items: center;
}

@media screen and (min-width: 670px) {
  section.side-by-side .screenshot .frame {
    width: min( clamp(164.4444px, 27.4074vw, 685.185px),
         clamp(295.99992px, 27.4074vh, 822.222px) );
  }
}
@media screen and (max-width: 670px) {
  section.side-by-side .screenshot .frame {
    width: 50vw;
  }
}

.screenshot .frame {
  overflow: visible;
}

.screenshot .screen,
.screenshot .pics,
.screenshot .vids,
.screenshot video {
  border-bottom-left-radius:  9.16% 4.225%;
  border-bottom-right-radius: 9.16% 4.225%;
  border-top-left-radius:     9.16% 4.225%;
  border-top-right-radius:    9.16% 4.225%;
  display: inline-block;
  position: relative;
  width: 100%;
}

@media (prefers-color-scheme: light) {
  .screenshot .pics,
  .screenshot .vids {
    box-shadow: 0 6px 36px rgba(0 0 0 / 0.375);
  }
}
@media (prefers-color-scheme: dark)  {
  .screenshot .pics,
  .screenshot .vids {
    box-shadow: 0 6px 36px rgba(0 0 0 / 0.8);
  }
}

.screenshot .frame {
  width: min( clamp(131.6664px, 21.9444vw, 548.61px),
         clamp(236.99952px, 21.9444vh, 658.332px) );
}

.screenshot .frame:after {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  height: 109.386%;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 120.356%;
  z-index: 99;
}

.screenshot .frame.mini:after {
  width: 116%;
  height: 106.65%;
}

.screenshot .vids video {
  width: 100%;
  height: auto;
  aspect-ratio: 1082 / 2340;
}

.carousel .screenshot .pics {
  overflow: hidden;
  display: grid;
}

.carousel .screenshot .pics > * {
  grid-area: 1/1/1/1;
  transition: transform 1s cubic-bezier(0.46,0.03,0.2,1);
  z-index: 0;
}

.carousel[index="1"] .pics > :nth-child(-n+1) {
    transform: translateX(-100%);
  }
  .carousel[index="1"] .pics > :nth-child(1) {
    transform: none;
  }
  .carousel[index="1"] .pics > :nth-child(n+2) {
    transform: translateX(100%);
  }

  .carousel[index="1"] .pager b:nth-of-type(1) {
    background: var(--text);
    border: 1px solid var(--text);
  }
.carousel[index="2"] .pics > :nth-child(-n+2) {
    transform: translateX(-100%);
  }
  .carousel[index="2"] .pics > :nth-child(2) {
    transform: none;
  }
  .carousel[index="2"] .pics > :nth-child(n+3) {
    transform: translateX(100%);
  }

  .carousel[index="2"] .pager b:nth-of-type(2) {
    background: var(--text);
    border: 1px solid var(--text);
  }
.carousel[index="3"] .pics > :nth-child(-n+3) {
    transform: translateX(-100%);
  }
  .carousel[index="3"] .pics > :nth-child(3) {
    transform: none;
  }
  .carousel[index="3"] .pics > :nth-child(n+4) {
    transform: translateX(100%);
  }

  .carousel[index="3"] .pager b:nth-of-type(3) {
    background: var(--text);
    border: 1px solid var(--text);
  }
.carousel[index="4"] .pics > :nth-child(-n+4) {
    transform: translateX(-100%);
  }
  .carousel[index="4"] .pics > :nth-child(4) {
    transform: none;
  }
  .carousel[index="4"] .pics > :nth-child(n+5) {
    transform: translateX(100%);
  }

  .carousel[index="4"] .pager b:nth-of-type(4) {
    background: var(--text);
    border: 1px solid var(--text);
  }
.carousel[index="5"] .pics > :nth-child(-n+5) {
    transform: translateX(-100%);
  }
  .carousel[index="5"] .pics > :nth-child(5) {
    transform: none;
  }
  .carousel[index="5"] .pics > :nth-child(n+6) {
    transform: translateX(100%);
  }

  .carousel[index="5"] .pager b:nth-of-type(5) {
    background: var(--text);
    border: 1px solid var(--text);
  }
.carousel[index="6"] .pics > :nth-child(-n+6) {
    transform: translateX(-100%);
  }
  .carousel[index="6"] .pics > :nth-child(6) {
    transform: none;
  }
  .carousel[index="6"] .pics > :nth-child(n+7) {
    transform: translateX(100%);
  }

  .carousel[index="6"] .pager b:nth-of-type(6) {
    background: var(--text);
    border: 1px solid var(--text);
  }
.carousel[index="7"] .pics > :nth-child(-n+7) {
    transform: translateX(-100%);
  }
  .carousel[index="7"] .pics > :nth-child(7) {
    transform: none;
  }
  .carousel[index="7"] .pics > :nth-child(n+8) {
    transform: translateX(100%);
  }

  .carousel[index="7"] .pager b:nth-of-type(7) {
    background: var(--text);
    border: 1px solid var(--text);
  }
.carousel[index="8"] .pics > :nth-child(-n+8) {
    transform: translateX(-100%);
  }
  .carousel[index="8"] .pics > :nth-child(8) {
    transform: none;
  }
  .carousel[index="8"] .pics > :nth-child(n+9) {
    transform: translateX(100%);
  }

  .carousel[index="8"] .pager b:nth-of-type(8) {
    background: var(--text);
    border: 1px solid var(--text);
  }
.carousel[index="9"] .pics > :nth-child(-n+9) {
    transform: translateX(-100%);
  }
  .carousel[index="9"] .pics > :nth-child(9) {
    transform: none;
  }
  .carousel[index="9"] .pics > :nth-child(n+10) {
    transform: translateX(100%);
  }

  .carousel[index="9"] .pager b:nth-of-type(9) {
    background: var(--text);
    border: 1px solid var(--text);
  }

.carousel {
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
}

.carousel .pager {
  margin-top: 20px;
  gap: 8px;
  z-index: 999;
}

@media screen and (max-width: 670px) {
  .carousel .pager {
    transform: scale(1.5);
    margin-top: 25px;
  }
}

.carousel .pager b {
  width: 6px;
  height: 6px;
  border-radius: 100%;
  border: 1px solid var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.carousel .pager b:hover {
  background: var(--text-tertiary);
  transform: scale(1.2);
}

.carousel .pager b:active {
  transform: none;
}

.carousel .pager b:after,
.carousel .pager i:after {
  content: '';
  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
  padding: 4px;
  margin-top: -4px;
  margin-left: -4px;
}

.carousel .pager i {
  font-style: normal;
  font-size: 10px;
  margin: 0 1em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.carousel .pager i:hover {
  color: var(--text-primary);
  transform: scale(1.2);
}

.carousel .pager i:active {
  transform: none;
}



@media (prefers-color-scheme: light) { #page-tenet .screenshot .frame:after {
  background-image: image-set(
  url("/_img/Tenet/Device Bezels/iPhone/iPhone 15 Pro - Natural Titanium - Portrait@1x.png") 1x,
  url("/_img/Tenet/Device Bezels/iPhone/iPhone 15 Pro - Natural Titanium - Portrait.png") 2x,
  url("/_img/Tenet/Device Bezels/iPhone/iPhone 15 Pro - Natural Titanium - Portrait.png") 3x);
}}
@media (prefers-color-scheme: dark) { #page-tenet .screenshot .frame:after {
  background-image: image-set(
  url("/_img/Tenet/Device Bezels/iPhone/iPhone 15 Pro - Black Titanium - Portrait@1x.png") 1x,
  url("/_img/Tenet/Device Bezels/iPhone/iPhone 15 Pro - Black Titanium - Portrait.png") 2x,
  url("/_img/Tenet/Device Bezels/iPhone/iPhone 15 Pro - Black Titanium - Portrait.png") 3x);
}}



@media (prefers-color-scheme: light) { #page-tenet .screenshot .frame.mini:after {
  background-image: image-set(
  url("/_img/Tenet/Device Bezels/iPhone/iPhone 13 mini - Starlight@1x.png") 1x,
  url("/_img/Tenet/Device Bezels/iPhone/iPhone 13 mini - Starlight.png") 2x,
  url("/_img/Tenet/Device Bezels/iPhone/iPhone 13 mini - Starlight.png") 3x);
}}
@media (prefers-color-scheme: dark) { #page-tenet .screenshot .frame.mini:after {
  background-image: image-set(
  url("/_img/Tenet/Device Bezels/iPhone/iPhone 13 mini - Midnight@1x.png") 1x,
  url("/_img/Tenet/Device Bezels/iPhone/iPhone 13 mini - Midnight.png") 2x,
  url("/_img/Tenet/Device Bezels/iPhone/iPhone 13 mini - Midnight.png") 3x);
}}


section.side-by-side .screenshot {
  display: flex;
  flex-direction: row;
}

section.side-by-side .screenshot.left {
  justify-content: start;
}

section.side-by-side .screenshot.right {
  justify-content: end;
}

section h2 {
  margin-bottom: min( clamp(10.0002px, 1.6667vw, 41.6675px),
         clamp(18.00036px, 1.6667vh, 50.001px) );
}

section p .amp {
  font-size: 0.95em;
}

section blockquote {
  align-items: end;
  display: inline-flex;
  flex-direction: column;
  font-family: Grato-Marker;
  font-weight: 350;
  line-height: 1.75;
  margin-left: auto;
  margin-right: auto;
  margin-top: min( clamp(42.0px, 7vw, 175.0px),
         clamp(75.6px, 7vh, 210.0px) );
  position: relative;
}

section blockquote.cw {
  transform: rotate(-2.25deg);
}

section blockquote.ccw {
  transform: rotate(2.25deg);
}

section blockquote:before {
  content: "“";
  font-size: 2.25em;
  font-weight: 400;
  line-height: 1;
  margin-right: 5px;
  margin-top: -0.0625em;
  opacity: 0.5;
  position: absolute;
  right: 100%;
  top: 0;
}

section blockquote b {
  font-weight: 450;
}

section blockquote .byline {
  display: inline-block;
  font-family: ui-sans-serif, sans-serif;
  font-weight: 600;
  letter-spacing: 0.25px;
  margin-top: 1rem;
}

section blockquote .byline:before {
  content: "—";
}

section blockquote .byline .name:after {
  content: "•";
  margin: 0 5px;
  opacity: 0.5;
}

#hero .text {
  padding-top: min( clamp(21.0px, 3.5vw, 87.5px),
         clamp(37.8px, 3.5vh, 105.0px) );
  justify-content: start;
}

section .text p {
  white-space: nowrap;
  max-width: 100%;
}

#hero blockquote {
  margin-top: min( clamp(34.5px, 5.75vw, 143.75px),
         clamp(62.1px, 5.75vh, 172.5px) );
}

section .cta-btn {
  margin-left: auto;
  margin-right: auto;
}

.cta-btn small {
  color: var(--text-secondary);
  display: block;
  font-variant: all-small-caps;
  font-weight: 300;
  letter-spacing: 0.1875ch;
  text-align: center;
  padding-top: 0.5em;
}

section .cta-btn a {
  background: url(/_img/Tenet/CTAButton/DarkBG.svg);
  display: block;
  margin: 0 auto;
  transition: transform 0.15s;
}

@media (prefers-color-scheme: dark) {
  #page-tenet section .cta-btn a {
    background: url(/_img/Tenet/CTAButton/LightBG.svg);
  }
}

section .cta-btn a:hover {
  transform: scale(1.0375);
}
section .cta-btn a:active {
  transform: scale(1.025);
}


section#themes {
  margin-top: 3rem;
  margin-bottom: 6rem;
  overflow: hidden;
  width: 100vw;
}

.shot-fans {
  display: grid;
  align-items: center;
  justify-items: center;
  padding-top: 5rem;
  padding-bottom: 60px;
}
.shot-fans > * {
  grid-area: 1/1/1/1;
}

.shot-fan {
  display: grid;
  align-items: center;
  justify-items: center;
}
.shot-fan > * {
  grid-area: 1/1/1/1;
}

.shot-fan .screenshot.center {
  z-index: 99;
}



  .side.L1 {
    z-index: 8;
    transform-origin: 50% 75%;
    transform:
      translateY(0.0px)
      translateX(-50%)
      scale(0.9575)
      rotate(-3.5deg)
    ;
  }

  @media screen and (max-width: 1100px) {
    .side.L1 {
      transform:
        translateY(0.0px)
        translateX(-10vw)
        scale(0.9575)
        rotate(-3.5deg)
      ;
    }
  }

  @media screen and (max-width: 950px) {
      transform:
        translateY(0.0px)
        translateX(-8vw)
        scale(0.9575)
        rotate(-3.5deg)
      ;
  }

  .side.L2 {
    z-index: 7;
    transform-origin: 50% 75%;
    transform:
      translateY(4.0px)
      translateX(-100%)
      scale(0.91680625)
      rotate(-7.0deg)
    ;
  }

  @media screen and (max-width: 1100px) {
    .side.L2 {
      transform:
        translateY(4.0px)
        translateX(-20vw)
        scale(0.91680625)
        rotate(-7.0deg)
      ;
    }
  }

  @media screen and (max-width: 950px) {
      transform:
        translateY(4.0px)
        translateX(-16vw)
        scale(0.91680625)
        rotate(-7.0deg)
      ;
  }

  .side.L3 {
    z-index: 6;
    transform-origin: 50% 75%;
    transform:
      translateY(14.6720646913px)
      translateX(-150%)
      scale(0.877841984375)
      rotate(-10.5deg)
    ;
  }

  @media screen and (max-width: 1100px) {
    .side.L3 {
      transform:
        translateY(14.6720646913px)
        translateX(-30vw)
        scale(0.877841984375)
        rotate(-10.5deg)
      ;
    }
  }

  @media screen and (max-width: 950px) {
      transform:
        translateY(14.6720646913px)
        translateX(-24vw)
        scale(0.877841984375)
        rotate(-10.5deg)
      ;
  }


  .side.R1 {
    z-index: 8;
    transform-origin: 50% 75%;
    transform:
      translateY(0.0px)
      translateX(50%)
      scale(0.9575)
      rotate(3.5deg)
    ;
  }

  @media screen and (max-width: 1100px) {
    .side.R1 {
      transform:
        translateY(0.0px)
        translateX(10vw)
        scale(0.9575)
        rotate(3.5deg)
      ;
    }
  }

  @media screen and (max-width: 950px) {
      transform:
        translateY(0.0px)
        translateX(8vw)
        scale(0.9575)
        rotate(3.5deg)
      ;
  }

  .side.R2 {
    z-index: 7;
    transform-origin: 50% 75%;
    transform:
      translateY(4.0px)
      translateX(100%)
      scale(0.91680625)
      rotate(7.0deg)
    ;
  }

  @media screen and (max-width: 1100px) {
    .side.R2 {
      transform:
        translateY(4.0px)
        translateX(20vw)
        scale(0.91680625)
        rotate(7.0deg)
      ;
    }
  }

  @media screen and (max-width: 950px) {
      transform:
        translateY(4.0px)
        translateX(16vw)
        scale(0.91680625)
        rotate(7.0deg)
      ;
  }

  .side.R3 {
    z-index: 6;
    transform-origin: 50% 75%;
    transform:
      translateY(14.6720646913px)
      translateX(150%)
      scale(0.877841984375)
      rotate(10.5deg)
    ;
  }

  @media screen and (max-width: 1100px) {
    .side.R3 {
      transform:
        translateY(14.6720646913px)
        translateX(30vw)
        scale(0.877841984375)
        rotate(10.5deg)
      ;
    }
  }

  @media screen and (max-width: 950px) {
      transform:
        translateY(14.6720646913px)
        translateX(24vw)
        scale(0.877841984375)
        rotate(10.5deg)
      ;
  }


#mono-toggle {
  margin-top: 0;
  margin-bottom: 5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#mono-toggle:after {
  content: '';
  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
  padding: 1em 1em;
  margin-top: -1em;
  margin-left: -1em;
  border-radius: 1em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: -1;
  box-shadow: 0 3px 8px rgba(0 0 0 / 0.1);
}

@media (prefers-color-scheme: dark) {
  #page-tenet #mono-toggle:after {
    box-shadow: 0 2px 6px rgba(0 0 0 / 0.2);
  }
}

#mono-toggle svg {
  width: 32px;
  margin: 0 2rem;
}

#mono-toggle svg #slash {
  fill: var(--text);
}

#mono-toggle .lbl {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 17px;
  margin: 0 2.5rem;
  font-variant: all-small-caps;
  font-size: 2rem;
}

@media screen and (max-width: 670px) {
  #mono-toggle .lbl i {
    display: none;
  }
}

#mono-toggle .lbl i {
  font-style: normal;
}


.shot-fan.color { z-index: 9; }
.shot-fan.mono  { z-index: 8; }

#page-tenet:not(.themes-mono) .shot-fan.color { opacity: 1; }
#page-tenet.themes-mono       .shot-fan.color { opacity: 0; }

.shot-fan {
  transition: opacity 0.5s;
}


section.cta {
  padding: min( clamp(66.6666px, 11.1111vw, 277.7775px),
         clamp(119.99988px, 11.1111vh, 333.333px) ) 0;
  width: 100vw;
  background: var(--bg-cta);
  border-top: 1px solid var(--cta-border);
  border-bottom: 1px solid var(--cta-border);
  backdrop-filter: blur(1.75px);
  -webkit-backdrop-filter: blur(1.75px);
}

section.cta h2 {
  font-size: min( clamp(22.2222px, 3.7037vw, 92.5925px),
         clamp(39.99996px, 3.7037vh, 111.111px) );
  font-weight: 100;
  margin-bottom: 0;
}


/* Stripes */




#bg-stripes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#bg-stripes:after {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  min-width: 3000px;
  left: 50%;
  margin-left: -1500px;

  height: 75000px;
  background-position: center;
  background-image:
    repeating-linear-gradient(12deg,
      var(--bg-stripe)  -150px,
      var(--bg-stripe)  600px,
      var(--bg)  600px,
      var(--bg)  1350px),
    repeating-linear-gradient(12deg,
      var(--stripe-border)  -150px,
      var(--stripe-border)  -149px,
      transparent           -149px,
      transparent           599px,
      var(--stripe-border)  599px,
      var(--stripe-border)  600px,
      transparent           600px,
      transparent           1350px);

  z-index: -1;
}

#bg-stripes:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1000%;
  height: 75000px;
  background-image: image-set(
    url("/_img/Tenet/BGTile-Light.png")    1x,
    url("/_img/Tenet/BGTile-Light@2x.png") 2x,
    url("/_img/Tenet/BGTile-Light@3x.png") 3x);
  background-repeat: repeat;
  opacity: 0.2;
  z-index: -2;
}

@media (prefers-color-scheme: dark) {
  #bg-stripes:before {
    background-image: image-set(
      url("/_img/Tenet/BGTile-Dark.png")    1x,
      url("/_img/Tenet/BGTile-Dark@2x.png") 2x,
      url("/_img/Tenet/BGTile-Dark@3x.png") 3x);
  }
}


.navCTA {
  color: var(--text);
}

.navQR {
  cursor: pointer;
}

.navQR svg {
  height: 20px;
  width: auto;
}

@starting-style {
  #qrModal:open {
    opacity: 0;
  }
  #qrModal::backdrop {
    opacity: 0;
  }
}

#qrModal:open {
  pointer-events: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  outline: none;
  border: none;
  max-width: none;
  max-height: none;
  transition: opacity 0.5s ease-in-out;
}

#qrModal svg {
  aspect-ratio: 1;
  height: 80vh;
  width: 80vw;
  max-height: 80vh;
  max-width: 80vw;
}

#qrModal::backdrop {
  background: color-mix(in srgb, Canvas 80%, transparent);
  transition: opacity 0.25s ease-in-out;
}


/**********************************************************************/


@media screen and (max-width: 670px) {
  section.side-by-side {
    flex-direction: column;
  }
  section.side-by-side.img-right {
    flex-direction: column;
  }

  section.side-by-side .text {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }

  #page-tenet {
    gap: min( clamp(90.0px, 15vw, 375.0px),
         clamp(162.0px, 15vh, 450.0px) );
  }

  #hero .text {
    padding-top: 0;
  }
}