:root{
  --bg:#05070b;
  --panel:#101827;
  --panel-soft:#121820;
  --panel-deep:#020617;
  --text:#e8eef5;
  --muted:#9aa4af;
  --line:rgba(148,163,184,.22);
  --accent:#21c45a;
  --accent-dark:#15803d;
  --radius:18px;
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --shadow-soft:0 10px 30px rgba(0,0,0,.32);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

html,
body{
  min-height:100%;
  margin:0;
}

body{
  background:
    radial-gradient(circle at top,#1f2937 0,#05070b 52%),
    var(--bg);
  color:var(--text);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  line-height:1.6;
}

body::before{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(
      circle at 12% 15%,
      rgba(34,197,94,.08),
      transparent 24%
    ),
    radial-gradient(
      circle at 88% 18%,
      rgba(37,99,235,.10),
      transparent 27%
    );
  content:"";
  pointer-events:none;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input{
  font:inherit;
}

button,
a{
  -webkit-tap-highlight-color:transparent;
}

img{
  max-width:100%;
}

[hidden]{
  display:none !important;
}

.wrap{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px 30px;
}

.section{
  margin:60px 0;
  scroll-margin-top:90px;
}

.section-heading{
  max-width:760px;
  margin-bottom:22px;
}

.section-heading h2{
  margin:5px 0 9px;
  font-size:32px;
  line-height:1.15;
  letter-spacing:-.035em;
}

.section-heading p{
  margin:0;
}

.muted{
  color:var(--muted);
}

.kicker{
  color:var(--accent);
  font-size:11px;
  font-weight:850;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.card{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(
      circle at top left,
      rgba(34,197,94,.10),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(15,23,42,.98)
    );
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.card::before{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.035),
      transparent 45%
    );
  content:"";
  pointer-events:none;
}

.card-inner{
  position:relative;
  z-index:1;
  padding:24px;
}

.btn{
  min-height:43px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 18px;
  color:var(--text);
  background:
    linear-gradient(
      135deg,
      #0b1220,
      #020617
    );
  border:1px solid rgba(148,163,184,.25);
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.btn:hover{
  transform:translateY(-2px);
  border-color:rgba(34,197,94,.5);
  box-shadow:0 12px 30px rgba(0,0,0,.42);
}

.btn.primary{
  color:#03140a;
  background:
    linear-gradient(
      135deg,
      #22c55e,
      #15803d
    );
  border-color:#22c55e;
  font-weight:850;
  box-shadow:0 12px 32px rgba(34,197,94,.30);
}

.btn.primary:hover{
  box-shadow:0 15px 38px rgba(34,197,94,.42);
}

.btn.ghost{
  background:rgba(2,6,23,.55);
}

.btn:focus-visible,
.nav-toggle:focus-visible,
.carousel-button:focus-visible,
.carousel-dot:focus-visible,
.lightbox button:focus-visible,
a:focus-visible{
  outline:3px solid rgba(34,197,94,.55);
  outline-offset:3px;
}

/* Navigation */

.nav{
  position:sticky;
  top:0;
  z-index:100;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:11px 0;
  background:
    linear-gradient(
      180deg,
      rgba(8,15,27,.97),
      rgba(8,15,27,.90)
    );
  border-bottom:1px solid rgba(148,163,184,.16);
  backdrop-filter:blur(16px);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  flex-shrink:0;
}

.brand-logo{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  overflow:hidden;
  background:#ffffff;
  border-radius:11px;
  box-shadow:
    0 8px 22px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.1);
}

.brand-logo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.wordmark{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1;
  font-weight:900;
}

.wordmark .tiler{
  color:#a8b3bf;
  font-size:12px;
  letter-spacing:.28em;
}

.wordmark .quote{
  margin-top:4px;
  color:var(--accent);
  font-size:20px;
  letter-spacing:.06em;
}

.nav-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
}

.nav-links > a:not(.btn){
  padding:9px 8px;
  color:#cbd5e1;
  border-radius:9px;
  font-size:13px;
  font-weight:650;
  white-space:nowrap;
}

.nav-links > a:not(.btn):hover{
  color:#ffffff;
  background:rgba(148,163,184,.09);
}

.nav-links .btn{
  margin-left:5px;
}

.nav-toggle{
  width:44px;
  height:44px;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0;
  color:#ffffff;
  background:#020617;
  border:1px solid rgba(148,163,184,.22);
  border-radius:12px;
  cursor:pointer;
}

/* Notice bar */

.notice{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:14px;
  padding:13px 15px;
  background:
    linear-gradient(
      90deg,
      rgba(34,197,94,.12),
      rgba(11,18,32,.95)
    );
  border:1px solid rgba(34,197,94,.28);
  border-radius:14px;
  box-shadow:var(--shadow-soft);
}

.notice-copy{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}

.notice-label{
  padding:4px 8px;
  color:#bbf7d0;
  background:rgba(34,197,94,.14);
  border:1px solid rgba(34,197,94,.25);
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.notice-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.notice .btn{
  min-height:36px;
  padding:8px 13px;
  font-size:12px;
}

/* Hero */

.hero{
  padding:36px 0 10px;
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
  gap:22px;
  align-items:stretch;
}

.hero-copy .card-inner{
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:38px;
}

.hero-copy h1{
  max-width:720px;
  margin:10px 0 15px;
  font-size:48px;
  line-height:1.06;
  letter-spacing:-.045em;
}

.lead{
  max-width:700px;
  margin:0 0 14px;
  color:#b7c2ce;
  font-size:18px;
  line-height:1.65;
}

.hero-copy p.muted{
  margin:0;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:11px;
  flex-wrap:wrap;
  margin-top:24px;
}

.pill{
  width:max-content;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:6px 10px;
  color:#bbf7d0;
  background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.30);
  border-radius:999px;
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.pill-dot{
  width:8px;
  height:8px;
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(34,197,94,.14);
}

.hero-phone{
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:
    radial-gradient(
      circle at top right,
      rgba(34,197,94,.25),
      transparent 43%
    ),
    linear-gradient(
      180deg,
      #071018,
      #020617
    );
}

.phone-frame{
  position:relative;
  width:240px;
  max-width:100%;
  margin:auto;
  overflow:hidden;
  background:#000000;
  border:11px solid #020617;
  border-radius:30px;
  box-shadow:0 18px 48px rgba(0,0,0,.65);
}

.phone-frame img{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
}

.phone-notch{
  position:absolute;
  top:-1px;
  left:50%;
  z-index:2;
  width:80px;
  height:18px;
  transform:translateX(-50%);
  background:#020617;
  border-radius:0 0 12px 12px;
}

/* Featured announcement */

.public-announcement{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  overflow:hidden;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(34,197,94,.22),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(15,23,42,.98),
      rgba(6,25,20,.98)
    );
  border:1px solid rgba(34,197,94,.34);
  border-radius:22px;
  box-shadow:var(--shadow);
}

.public-announcement-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:32px;
}

.announcement-type{
  width:max-content;
  margin-bottom:12px;
  padding:6px 10px;
  color:#bbf7d0;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(74,222,128,.30);
  border-radius:999px;
  font-size:10px;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.public-announcement h2{
  margin:0;
  font-size:31px;
  line-height:1.18;
  letter-spacing:-.035em;
}

.public-announcement p{
  margin:12px 0 0;
}

.announcement-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
  color:#718197;
  font-size:12px;
}

.announcement-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}

.public-announcement-image{
  min-height:280px;
  overflow:hidden;
  background:#020617;
}

.public-announcement-image img{
  width:100%;
  height:100%;
  min-height:280px;
  display:block;
  object-fit:cover;
}

/* Features */

.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.feature-card{
  min-height:100%;
}

.feature-card .card-inner{
  height:100%;
}

.feature-card h3{
  margin:10px 0 7px;
  font-size:18px;
  line-height:1.3;
}

.feature-card p{
  margin:0;
}

.feature-icon{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(34,197,94,.09);
  border:1px solid rgba(34,197,94,.24);
  border-radius:13px;
  font-size:23px;
}

/* Steps */

.steps-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.step-card{
  min-height:145px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
  padding:22px;
}

.step-number{
  color:var(--accent);
  font-size:25px;
  font-weight:900;
  letter-spacing:-.04em;
}

.step-card strong{
  position:relative;
  z-index:1;
  font-size:15px;
}

/* Outputs */

.output-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  overflow:visible;
}

.output-card{
  position:relative;
  z-index:1;
  min-width:0;
  cursor:zoom-in;
  outline:none;

  transform:
    translateY(0)
    scale(1);

  transform-origin:center;

  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease,
    filter .28s ease;
}

.output-card > img{
  width:100%;
  aspect-ratio:16 / 10;
  display:block;

  object-fit:cover;
  object-position:top center;

  border-bottom:1px solid rgba(148,163,184,.14);

  filter:
    brightness(.96)
    saturate(.98);

  transform:scale(1);

  transition:
    transform .42s cubic-bezier(.2,.7,.2,1),
    filter .32s ease;
}

.output-card:hover,
.output-card:focus,
.output-card:focus-visible,
.output-card:focus-within{
  z-index:20;

  transform:
    translateY(-12px)
    scale(1.045);

  background:
    radial-gradient(
      circle at top left,
      rgba(34,197,94,.16),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.07),
      rgba(15,23,42,.99)
    );

  border-color:rgba(74,222,128,.58);

  box-shadow:
    0 30px 70px rgba(0,0,0,.62),
    0 0 0 1px rgba(74,222,128,.14),
    0 0 38px rgba(34,197,94,.12);
}

.output-card:hover > img,
.output-card:focus > img,
.output-card:focus-visible > img,
.output-card:focus-within > img{
  filter:
    brightness(1.06)
    saturate(1.08)
    contrast(1.03);

  transform:scale(1.075);
}

.output-card:active{
  transform:
    translateY(-5px)
    scale(1.025);
}

.output-card:focus-visible{
  outline:3px solid rgba(74,222,128,.62);
  outline-offset:5px;
}

.output-card:first-child{
  transform-origin:left center;
}

.output-card:last-child{
  transform-origin:right center;
}

.output-copy{
  position:relative;
  z-index:2;
  padding:19px;
}

.output-copy > span{
  color:#86efac;
  font-size:10px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.output-copy h3{
  margin:6px 0;
  font-size:18px;
}

.output-copy p{
  margin:0;
}

/* Roadmap */

.roadmap-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.roadmap-column{
  min-width:0;
  padding:17px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(2,6,23,.80)
    );
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow-soft);
}

.roadmap-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

.roadmap-header h3{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  font-size:16px;
}

.roadmap-header > span{
  min-width:26px;
  padding:3px 8px;
  color:#9aa8b8;
  background:rgba(148,163,184,.08);
  border:1px solid rgba(148,163,184,.17);
  border-radius:999px;
  font-size:11px;
  text-align:center;
}

.roadmap-dot{
  width:10px;
  height:10px;
  display:inline-block;
  border-radius:50%;
}

.roadmap-dot.live{
  background:#22c55e;
  box-shadow:0 0 0 5px rgba(34,197,94,.12);
}

.roadmap-dot.progress{
  background:#60a5fa;
  box-shadow:0 0 0 5px rgba(96,165,250,.12);
}

.roadmap-dot.planned{
  background:#fbbf24;
  box-shadow:0 0 0 5px rgba(251,191,36,.12);
}

.roadmap-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.roadmap-item{
  padding:14px;
  background:rgba(15,23,42,.88);
  border:1px solid rgba(148,163,184,.16);
  border-radius:13px;
}

.roadmap-item h3{
  margin:0;
  font-size:14px;
}

.roadmap-item p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:12px;
}

.roadmap-empty{
  padding:22px 12px;
  color:#718096;
  border:1px dashed rgba(148,163,184,.18);
  border-radius:12px;
  font-size:12px;
  text-align:center;
}

/* Carousel */

.carousel{
  position:relative;
  padding:18px 58px 26px;
}

.carousel-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 32px) / 3);
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}

.carousel-track::-webkit-scrollbar{
  display:none;
}

.carousel-item{
  min-width:0;
  margin:0;
  padding:18px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  scroll-snap-align:start;
  background:
    radial-gradient(
      circle at top,
      rgba(34,197,94,.10),
      transparent 48%
    ),
    rgba(2,6,23,.70);
  border:1px solid rgba(148,163,184,.18);
  border-radius:17px;
  opacity:.72;
  transform:scale(.97);
  transition:
    opacity .22s ease,
    transform .22s ease,
    border-color .22s ease;
}

.carousel-item.is-active{
  opacity:1;
  transform:scale(1);
  border-color:rgba(34,197,94,.48);
}

.carousel-item .phone-frame{
  width:210px;
  max-width:100%;
  border-width:9px;
  border-radius:26px;
}

.carousel-item figcaption{
  min-height:28px;
  margin-top:12px;
  color:#b8c2ce;
  font-size:13px;
  font-weight:700;
  text-align:center;
}

.carousel-button{
  position:absolute;
  top:50%;
  z-index:4;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:#ffffff;
  background:rgba(2,6,23,.92);
  border:1px solid rgba(148,163,184,.28);
  border-radius:50%;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  transform:translateY(-50%);
  box-shadow:0 10px 28px rgba(0,0,0,.46);
}

.carousel-button:hover{
  background:var(--accent-dark);
  border-color:#22c55e;
}

.carousel-button.previous{
  left:10px;
}

.carousel-button.next{
  right:10px;
}

.carousel-dots{
  min-height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:13px;
}

.carousel-dot{
  width:8px;
  height:8px;
  padding:0;
  background:#425064;
  border:0;
  border-radius:999px;
  cursor:pointer;
  transition:
    width .18s ease,
    background .18s ease;
}

.carousel-dot.active{
  width:25px;
  background:var(--accent);
}

.center-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* FAQ */

.faq-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.faq-grid details{
  padding:15px 17px;
  background:#0b1220;
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px;
}

.faq-grid details[open]{
  border-color:rgba(34,197,94,.32);
}

.faq-grid summary{
  cursor:pointer;
  font-weight:800;
}

.faq-grid p{
  margin:10px 0 0;
}

/* Footer */

footer{
  padding:28px 0 10px;
  color:var(--muted);
  border-top:1px solid rgba(148,163,184,.14);
  font-size:13px;
}

footer p{
  margin:14px 0 0;
}

.footer-links{
  display:flex;
  align-items:center;
  gap:8px 17px;
  flex-wrap:wrap;
}

.footer-links a{
  color:#aab5c2;
  text-decoration:underline;
  text-underline-offset:3px;
}

.footer-links a:hover{
  color:#ffffff;
}

/* Floating install button */

.fab-install{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:800;
  display:none;
  align-items:center;
  gap:8px;
  padding:12px 15px;
  color:#03140a;
  background:
    linear-gradient(
      135deg,
      #22c55e,
      #15803d
    );
  border:1px solid rgba(34,197,94,.52);
  border-radius:999px;
  font-weight:900;
  box-shadow:0 14px 36px rgba(34,197,94,.34);
}

/* Lightbox */

.lightbox{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(8px);
}

.lightbox.open{
  display:flex;
}

.lightbox-content{
  position:relative;
  width:min(500px,92vw);
  text-align:center;
}

.lightbox-content > img{
  width:100%;
  max-height:82vh;
  display:block;
  object-fit:contain;
  background:#000000;
  border:1px solid rgba(148,163,184,.20);
  border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.70);
}

.lightbox-content p{
  margin:11px 0 0;
  color:#d0d8e1;
  font-size:13px;
}

.lightbox-close,
.lightbox-previous,
.lightbox-next{
  position:absolute;
  z-index:3;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:#ffffff;
  background:rgba(2,6,23,.92);
  border:1px solid rgba(148,163,184,.25);
  border-radius:50%;
  cursor:pointer;
}

.lightbox-close{
  top:-52px;
  right:0;
}

.lightbox-previous,
.lightbox-next{
  top:50%;
  transform:translateY(-50%);
  font-size:27px;
}

.lightbox-previous{
  left:-56px;
}

.lightbox-next{
  right:-56px;
}

/* Tablet */

@media(max-width:1050px){

  .nav-links > a:not(.btn){
    padding-left:6px;
    padding-right:6px;
    font-size:12px;
  }

  .carousel-track{
    grid-auto-columns:calc((100% - 16px) / 2);
  }

  .output-grid{
    grid-template-columns:1fr;
  }

  .output-card,
  .output-card:first-child,
  .output-card:last-child{
    display:grid;
    grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);
    transform-origin:center;
  }

  .output-card > img{
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:top center;
    border-right:1px solid rgba(148,163,184,.14);
    border-bottom:0;
  }

  .output-card:hover,
  .output-card:focus,
  .output-card:focus-visible,
  .output-card:focus-within{
    transform:
      translateY(-8px)
      scale(1.025);
  }
}

@media(max-width:900px){

  .hero-grid{
    grid-template-columns:1fr;
  }

  .hero-phone{
    min-height:450px;
  }

  .feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .feature-grid > :last-child:nth-child(odd){
    grid-column:1 / -1;
  }

  .steps-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .roadmap-grid{
    grid-template-columns:1fr;
  }

  .public-announcement{
    grid-template-columns:1fr;
  }

  .public-announcement-image{
    order:-1;
    min-height:220px;
  }

  .faq-grid{
    grid-template-columns:1fr;
  }
}

/* Mobile navigation */

@media(max-width:820px){

  .nav-toggle{
    display:flex;
  }

  .nav-links{
    position:fixed;
    top:74px;
    left:12px;
    right:12px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:5px;
    max-height:calc(100vh - 90px);
    overflow-y:auto;
    padding:12px;
    background:#111827;
    border:1px solid rgba(148,163,184,.20);
    border-radius:16px;
    box-shadow:var(--shadow);
  }

  .nav-links.open{
    display:flex;
  }

  .nav-links > a:not(.btn){
    padding:12px;
    font-size:14px;
  }

  .nav-links .btn{
    width:100%;
    margin:0;
  }
}

@media(max-width:720px){

  .wrap{
    padding-left:15px;
    padding-right:15px;
  }

  .section{
    margin:44px 0;
  }

  .section-heading h2{
    font-size:27px;
  }

  .hero{
    padding-top:24px;
  }

  .hero-copy .card-inner{
    min-height:auto;
    padding:26px 21px;
  }

  .hero-copy h1{
    font-size:33px;
    line-height:1.1;
  }

  .lead{
    font-size:16px;
  }

  .hero-phone{
    display:none;
  }

  .hero-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .hero-actions .btn{
    width:100%;
  }

  .notice{
    align-items:flex-start;
    flex-direction:column;
  }

  .notice-actions{
    width:100%;
  }

  .feature-grid{
    grid-template-columns:1fr;
  }

  .feature-grid > :last-child:nth-child(odd){
    grid-column:auto;
  }

  .steps-grid{
    grid-template-columns:1fr;
  }

  .output-card,
  .output-card:first-child,
  .output-card:last-child{
    display:block;
    transform-origin:center;
  }

  .output-card > img{
    width:100%;
    height:auto;
    aspect-ratio:16 / 10;
    object-fit:cover;
    object-position:top center;
    border-right:0;
    border-bottom:1px solid rgba(148,163,184,.14);
  }

  .output-card:hover,
  .output-card:focus,
  .output-card:focus-visible,
  .output-card:focus-within{
    transform:
      translateY(-6px)
      scale(1.018);
  }

  .carousel{
    padding-left:28px;
    padding-right:28px;
  }

  .carousel-track{
    grid-auto-columns:88%;
    gap:14px;
  }

  .carousel-item .phone-frame{
    width:205px;
  }

  .carousel-button{
    width:39px;
    height:39px;
    font-size:24px;
  }

  .carousel-button.previous{
    left:3px;
  }

  .carousel-button.next{
    right:3px;
  }

  .public-announcement-copy{
    padding:23px 20px;
  }

  .public-announcement h2{
    font-size:25px;
  }

  .announcement-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .announcement-actions .btn{
    width:100%;
  }

  .fab-install{
    display:inline-flex;
  }

  footer{
    padding-bottom:78px;
  }

  .lightbox{
    padding:12px;
  }

  .lightbox-close{
    top:8px;
    right:8px;
  }

  .lightbox-previous{
    left:8px;
  }

  .lightbox-next{
    right:8px;
  }
}

@media(max-width:420px){

  .wrap{
    padding-left:12px;
    padding-right:12px;
  }

  .brand-logo{
    width:40px;
    height:40px;
    flex-basis:40px;
  }

  .wordmark .tiler{
    font-size:10px;
  }

  .wordmark .quote{
    font-size:17px;
  }

  .hero-copy h1{
    font-size:29px;
  }

  .carousel{
    padding-left:20px;
    padding-right:20px;
  }

  .carousel-track{
    grid-auto-columns:92%;
  }

  .carousel-item .phone-frame{
    width:195px;
  }
}

@media(hover:hover) and (pointer:fine){

  .phone-frame img{
    transition:transform .3s ease;
  }

  .phone-frame:hover img{
    transform:scale(1.025);
  }
}

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* TQ LIQUID ANNOUNCEMENT START */

.public-announcement{
  position:relative;
  isolation:isolate;

  display:grid;
  grid-template-columns:
    minmax(0,58%)
    minmax(320px,42%);

  min-height:340px;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(40,224,110,.16),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #06150f,
      #07131b 55%,
      #07101a
    );

  border:1px solid rgba(89,255,157,.30);
  border-radius:26px;

  box-shadow:
    0 27px 76px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.11);

  transform:translateZ(0);
}

.public-announcement::before{
  position:absolute;
  inset:0;
  z-index:2;

  background:
    linear-gradient(
      90deg,
      rgba(3,15,11,.99) 0%,
      rgba(3,15,11,.97) 24%,
      rgba(4,16,14,.91) 42%,
      rgba(4,16,16,.72) 55%,
      rgba(4,15,18,.38) 66%,
      rgba(4,14,18,.10) 78%,
      transparent 91%
    );

  content:"";
  pointer-events:none;
}

.public-announcement::after{
  position:absolute;
  inset:0;
  z-index:3;

  background:
    radial-gradient(
      ellipse at 14% 0%,
      rgba(255,255,255,.13),
      transparent 33%
    ),
    radial-gradient(
      ellipse at 81% 6%,
      rgba(255,255,255,.15),
      transparent 29%
    ),
    linear-gradient(
      120deg,
      transparent 35%,
      rgba(255,255,255,.06) 49%,
      transparent 63%
    );

  mix-blend-mode:screen;

  content:"";
  pointer-events:none;
}

.public-announcement-copy{
  position:relative;
  z-index:5;

  grid-column:1 / 3;
  grid-row:1;

  width:min(66%,760px);
  min-height:340px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:
    42px
    42px
    42px
    40px;
}

.public-announcement-copy::before{
  display:none;
  content:none;
}

.announcement-type{
  width:max-content;
  max-width:100%;

  margin-bottom:14px;
  padding:7px 12px;

  color:#d7ffe5;

  background:
    linear-gradient(
      135deg,
      rgba(42,224,108,.26),
      rgba(18,119,61,.18)
    );

  border:1px solid rgba(104,255,166,.42);
  border-radius:999px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 8px 25px rgba(29,216,98,.15);

  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);

  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.public-announcement h2{
  max-width:680px;
  margin:0;

  color:#ffffff;

  font-size:36px;
  line-height:1.1;
  letter-spacing:-.045em;

  text-shadow:
    0 3px 22px rgba(0,0,0,.78),
    0 1px 3px rgba(0,0,0,.88);
}

.public-announcement-copy > p{
  max-width:630px;
  margin:15px 0 0;

  color:rgba(232,241,247,.84);

  font-size:15px;
  line-height:1.72;

  text-shadow:
    0 2px 15px rgba(0,0,0,.82);
}

.announcement-meta{
  display:flex;
  align-items:center;
  gap:9px 15px;
  flex-wrap:wrap;

  margin-top:17px;

  color:rgba(216,229,238,.72);

  font-size:12px;
  font-weight:650;

  text-shadow:
    0 2px 10px rgba(0,0,0,.80);
}

.announcement-meta span:not(:empty){
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.announcement-meta span:not(:empty)::before{
  width:5px;
  height:5px;
  flex:0 0 5px;

  background:#47e386;
  border-radius:50%;

  box-shadow:
    0 0 0 4px rgba(71,227,134,.13);

  content:"";
}

.announcement-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;

  margin-top:24px;
}

.public-announcement .btn{
  min-height:42px;

  background:rgba(3,12,18,.55);
  border-color:rgba(255,255,255,.18);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 11px 30px rgba(0,0,0,.32);

  backdrop-filter:
    blur(12px)
    saturate(1.2);

  -webkit-backdrop-filter:
    blur(12px)
    saturate(1.2);
}

.public-announcement .btn:hover{
  background:rgba(8,26,23,.74);
  border-color:rgba(108,255,169,.46);
}

.public-announcement .btn.primary{
  color:#03150b;

  background:
    linear-gradient(
      135deg,
      #49e987,
      #199a4a
    );

  border-color:rgba(112,255,172,.78);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 13px 35px rgba(30,211,99,.31);
}

.public-announcement-image{
  position:relative;
  z-index:1;

  grid-column:2;
  grid-row:1;

  width:100%;
  min-height:340px;
  overflow:hidden;

  background:#071019;
}

.public-announcement-image::before{
  position:absolute;
  inset:0;
  z-index:2;

  background:
    linear-gradient(
      90deg,
      rgba(4,16,16,.78) 0%,
      rgba(4,16,16,.45) 14%,
      rgba(4,16,16,.14) 31%,
      transparent 51%
    ),
    linear-gradient(
      180deg,
      rgba(2,9,14,.05),
      rgba(2,9,14,.24)
    );

  content:"";
  pointer-events:none;
}

.public-announcement-image::after{
  position:absolute;
  inset:0;
  z-index:3;

  background:
    radial-gradient(
      ellipse at 73% 0%,
      rgba(255,255,255,.17),
      transparent 31%
    ),
    linear-gradient(
      126deg,
      transparent 38%,
      rgba(255,255,255,.08) 50%,
      transparent 63%
    ),
    linear-gradient(
      180deg,
      transparent 64%,
      rgba(2,9,15,.30) 100%
    );

  content:"";
  pointer-events:none;
}

.public-announcement-image img{
  width:100%;
  height:100%;
  min-height:340px;
  display:block;

  object-fit:cover;
  object-position:center;

  filter:
    saturate(1.14)
    contrast(1.05)
    brightness(.92);

  transform:scale(1.02);

  transition:
    transform .8s cubic-bezier(.2,.7,.2,1),
    filter .5s ease;
}

.public-announcement:hover
.public-announcement-image img{
  filter:
    saturate(1.21)
    contrast(1.07)
    brightness(.97);

  transform:scale(1.055);
}

.public-announcement:not(.has-image){
  display:block;

  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(36,211,104,.20),
      transparent 34%
    ),
    radial-gradient(
      circle at 92% 90%,
      rgba(40,111,255,.16),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #061711,
      #08131d 55%,
      #07101a
    );
}

.public-announcement:not(.has-image)
.public-announcement-copy{
  width:100%;
  max-width:790px;
}

@media(max-width:900px){

  .public-announcement{
    grid-template-columns:
      minmax(0,54%)
      minmax(300px,46%);

    min-height:390px;
  }

  .public-announcement-copy{
    width:70%;
    min-height:390px;

    padding:
      36px
      30px;
  }

  .public-announcement-image{
    min-height:390px;
  }

  .public-announcement-image img{
    min-height:390px;
  }

  .public-announcement h2{
    font-size:31px;
  }

  .public-announcement::before{
    background:
      linear-gradient(
        90deg,
        rgba(3,15,11,.99) 0%,
        rgba(3,15,11,.95) 34%,
        rgba(4,16,15,.77) 53%,
        rgba(4,15,18,.38) 70%,
        transparent 93%
      );
  }
}

@media(max-width:620px){

  .public-announcement{
    display:flex;
    flex-direction:column;

    min-height:0;
    border-radius:21px;
  }

  .public-announcement::before{
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        transparent 27%,
        rgba(3,14,11,.44) 42%,
        rgba(3,14,11,.91) 57%,
        rgba(3,14,11,.99) 100%
      );
  }

  .public-announcement-image{
    order:1;

    width:100%;
    min-height:240px;
  }

  .public-announcement-image img{
    min-height:240px;
    max-height:300px;

    object-position:center;
  }

  .public-announcement-image::before{
    background:
      linear-gradient(
        180deg,
        transparent 46%,
        rgba(3,14,11,.37) 70%,
        rgba(3,14,11,.93) 100%
      );
  }

  .public-announcement-copy{
    order:2;

    width:100%;
    min-height:0;

    padding:
      24px
      20px
      28px;
  }

  .public-announcement h2{
    font-size:28px;
  }

  .public-announcement-copy > p{
    font-size:14px;
    line-height:1.65;
  }

  .announcement-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .announcement-actions .btn{
    width:100%;
  }
}

/* TQ LIQUID ANNOUNCEMENT END */

/* TQ ANNOUNCEMENT AUTO BACKDROP START */

.announcement-backdrop{
  position:absolute;
  inset:-38px;
  z-index:0;

  background-color:#07140f;
  background-image:var(--announcement-image);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;

  filter:
    blur(30px)
    saturate(1.65)
    contrast(1.05)
    brightness(.58);

  opacity:.78;

  transform:scale(1.16);

  pointer-events:none;
}

.announcement-backdrop::after{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(2,12,9,.08) 0%,
      rgba(2,12,9,.12) 43%,
      rgba(2,10,14,.40) 78%,
      rgba(2,10,14,.62) 100%
    );

  content:"";
}

.public-announcement-copy{
  z-index:5;
}

.public-announcement-image{
  z-index:1;
}

.public-announcement::before{
  z-index:2;
}

.public-announcement::after{
  z-index:3;
}

.public-announcement:not(.has-image)
.announcement-backdrop{
  display:none;
}

@media(max-width:620px){

  .announcement-backdrop{
    inset:-30px;

    background-position:center top;

    filter:
      blur(26px)
      saturate(1.55)
      brightness(.53);

    opacity:.74;
  }
}

/* TQ ANNOUNCEMENT AUTO BACKDROP END */

/* TQ LIQUID HERO START */

.hero-grid{
  --hero-image:none;

  position:relative;
  isolation:isolate;

  display:grid;
  grid-template-columns:
    minmax(0,58%)
    minmax(320px,42%);

  gap:0;

  min-height:520px;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 14% 17%,
      rgba(36,223,104,.16),
      transparent 37%
    ),
    radial-gradient(
      circle at 91% 78%,
      rgba(91,72,255,.14),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      #06150f 0%,
      #08131c 55%,
      #070f19 100%
    );

  border:1px solid rgba(91,255,158,.29);
  border-radius:26px;

  box-shadow:
    0 28px 78px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.11);

  transform:translateZ(0);
}

.hero-grid::before{
  position:absolute;
  inset:-50px;
  z-index:0;

  background-color:#06140f;
  background-image:var(--hero-image);
  background-repeat:no-repeat;
  background-position:88% center;
  background-size:62% auto;

  filter:
    blur(36px)
    saturate(1.75)
    contrast(1.04)
    brightness(.55);

  opacity:.88;

  transform:scale(1.16);

  content:"";
  pointer-events:none;
}

.hero-grid:not(.has-hero-image)::before{
  display:none;
}

.hero-grid::after{
  position:absolute;
  inset:0;
  z-index:2;

  background:
    linear-gradient(
      90deg,
      rgba(3,15,11,.99) 0%,
      rgba(3,15,11,.97) 26%,
      rgba(4,16,14,.91) 43%,
      rgba(4,16,16,.70) 57%,
      rgba(4,15,18,.36) 70%,
      rgba(4,14,19,.10) 82%,
      transparent 94%
    ),
    radial-gradient(
      ellipse at 18% 0%,
      rgba(255,255,255,.12),
      transparent 32%
    ),
    radial-gradient(
      ellipse at 88% 5%,
      rgba(255,255,255,.13),
      transparent 28%
    ),
    linear-gradient(
      120deg,
      transparent 38%,
      rgba(255,255,255,.055) 51%,
      transparent 65%
    );

  content:"";
  pointer-events:none;
}

.hero-copy,
.hero-phone{
  margin:0;

  background:transparent !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}

.hero-copy::before,
.hero-phone::before{
  display:none !important;
  content:none !important;
}

.hero-copy{
  position:relative;
  z-index:5;

  grid-column:1 / 3;
  grid-row:1;

  width:min(65%,780px);
  min-height:520px;

  overflow:visible;
}

.hero-copy .card-inner{
  min-height:520px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:
    48px
    46px
    48px
    42px;
}

.hero-copy h1{
  max-width:690px;

  color:#ffffff;

  text-shadow:
    0 3px 24px rgba(0,0,0,.75),
    0 1px 3px rgba(0,0,0,.85);
}

.hero-copy .lead,
.hero-copy .muted{
  text-shadow:
    0 2px 16px rgba(0,0,0,.72);
}

.hero-copy .pill{
  background:
    linear-gradient(
      135deg,
      rgba(42,225,109,.25),
      rgba(15,117,58,.17)
    );

  border-color:rgba(99,255,161,.40);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 8px 24px rgba(27,216,96,.14);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.hero-copy .btn{
  background:rgba(3,12,18,.54);

  border-color:rgba(255,255,255,.18);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 11px 30px rgba(0,0,0,.31);

  backdrop-filter:
    blur(12px)
    saturate(1.2);

  -webkit-backdrop-filter:
    blur(12px)
    saturate(1.2);
}

.hero-copy .btn:hover{
  background:rgba(8,27,23,.73);
  border-color:rgba(106,255,168,.45);
}

.hero-copy .btn.primary{
  color:#03150b;

  background:
    linear-gradient(
      135deg,
      #49e987,
      #199a4a
    );

  border-color:rgba(112,255,172,.78);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 13px 35px rgba(30,211,99,.30);
}

.hero-phone{
  position:relative;
  z-index:1;

  grid-column:2;
  grid-row:1;

  min-height:520px;

  display:flex;
  align-items:center;
  justify-content:flex-end;

  padding:
    34px
    48px
    34px
    115px;

  overflow:hidden;
}

.hero-phone::after{
  position:absolute;
  inset:0;
  z-index:2;

  background:
    linear-gradient(
      90deg,
      rgba(4,16,16,.72) 0%,
      rgba(4,16,16,.39) 17%,
      rgba(4,16,16,.10) 37%,
      transparent 57%
    ),
    radial-gradient(
      ellipse at 78% 6%,
      rgba(255,255,255,.12),
      transparent 31%
    );

  content:"";
  pointer-events:none;
}

.hero-phone .phone-frame{
  position:relative;
  z-index:3;

  width:248px;
  max-width:100%;

  margin:0;

  border-color:rgba(2,6,14,.92);

  box-shadow:
    0 28px 65px rgba(0,0,0,.70),
    0 0 50px rgba(54,224,117,.13),
    inset 0 1px 0 rgba(255,255,255,.08);

  transform:
    perspective(1100px)
    rotateY(-3deg)
    translateZ(0);

  transition:
    transform .65s cubic-bezier(.2,.7,.2,1),
    box-shadow .5s ease;
}

.hero-grid:hover
.hero-phone .phone-frame{
  transform:
    perspective(1100px)
    rotateY(0deg)
    translateY(-5px)
    scale(1.025);

  box-shadow:
    0 34px 76px rgba(0,0,0,.72),
    0 0 64px rgba(54,224,117,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

@media(max-width:900px){

  .hero-grid{
    grid-template-columns:
      minmax(0,54%)
      minmax(300px,46%);

    min-height:550px;
  }

  .hero-copy{
    width:70%;
    min-height:550px;
  }

  .hero-copy .card-inner{
    min-height:550px;

    padding:
      40px
      34px;
  }

  .hero-phone{
    min-height:550px;

    padding:
      38px
      32px
      38px
      105px;
  }

  .hero-phone .phone-frame{
    width:225px;
  }

  .hero-grid::after{
    background:
      linear-gradient(
        90deg,
        rgba(3,15,11,.99) 0%,
        rgba(3,15,11,.96) 34%,
        rgba(4,16,15,.78) 54%,
        rgba(4,15,18,.38) 71%,
        transparent 94%
      ),
      radial-gradient(
        ellipse at 18% 0%,
        rgba(255,255,255,.11),
        transparent 32%
      );
  }
}

@media(max-width:720px){

  .hero-grid{
    display:flex;
    flex-direction:column;

    min-height:0;
    border-radius:21px;
  }

  .hero-grid::before{
    inset:-34px;

    background-position:center top;
    background-size:cover;

    filter:
      blur(31px)
      saturate(1.62)
      brightness(.48);

    opacity:.76;
  }

  .hero-grid::after{
    background:
      linear-gradient(
        180deg,
        rgba(3,12,12,.12) 0%,
        rgba(3,12,12,.18) 26%,
        rgba(3,14,11,.58) 43%,
        rgba(3,14,11,.94) 59%,
        rgba(3,14,11,.99) 100%
      ),
      linear-gradient(
        90deg,
        rgba(3,14,11,.55),
        transparent 72%
      );
  }

  .hero-phone{
    order:1;

    width:100%;
    min-height:330px;

    display:flex !important;
    justify-content:center;

    padding:
      28px
      20px
      78px;
  }

  .hero-phone::after{
    background:
      linear-gradient(
        180deg,
        transparent 40%,
        rgba(3,14,11,.36) 70%,
        rgba(3,14,11,.91) 100%
      );
  }

  .hero-phone .phone-frame{
    width:205px;

    transform:none;
  }

  .hero-grid:hover
  .hero-phone .phone-frame{
    transform:translateY(-3px);
  }

  .hero-copy{
    order:2;

    width:100%;
    min-height:0;

    margin-top:-72px;
  }

  .hero-copy .card-inner{
    min-height:0;

    padding:
      31px
      21px
      32px;
  }

  .hero-copy h1{
    font-size:34px;
  }

  .hero-copy .hero-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .hero-copy .hero-actions .btn{
    width:100%;
  }
}

@media(max-width:420px){

  .hero-phone{
    min-height:310px;

    padding-bottom:72px;
  }

  .hero-phone .phone-frame{
    width:190px;
  }

  .hero-copy h1{
    font-size:30px;
  }
}

/* TQ LIQUID HERO END */

/* TQ FULL ANNOUNCEMENT BACKDROP START */

.public-announcement.has-image{
  background:#06120f;
}

.public-announcement.has-image
.announcement-backdrop{
  position:absolute;
  inset:-28px;
  z-index:0;

  display:block !important;

  background-color:#06120f;
  background-image:var(--announcement-image) !important;
  background-repeat:no-repeat;
  background-position:center right;
  background-size:cover;

  filter:
    blur(20px)
    saturate(1.75)
    contrast(1.06)
    brightness(.68);

  opacity:.98;

  transform:scale(1.10);

  -webkit-mask-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.48) 22%,
      rgba(0,0,0,.68) 43%,
      rgba(0,0,0,.88) 65%,
      #000000 82%,
      #000000 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.48) 22%,
      rgba(0,0,0,.68) 43%,
      rgba(0,0,0,.88) 65%,
      #000000 82%,
      #000000 100%
    );

  pointer-events:none;
}

.public-announcement.has-image::before{
  background:
    linear-gradient(
      90deg,
      rgba(2,13,9,.92) 0%,
      rgba(2,13,9,.83) 20%,
      rgba(3,14,11,.68) 38%,
      rgba(3,14,14,.46) 55%,
      rgba(3,13,17,.22) 70%,
      rgba(3,11,17,.07) 85%,
      transparent 100%
    );
}

.public-announcement.has-image
.public-announcement-image::before{
  background:
    linear-gradient(
      90deg,
      rgba(3,14,14,.60) 0%,
      rgba(3,14,14,.34) 13%,
      rgba(3,14,14,.12) 29%,
      transparent 49%
    );
}

.public-announcement.has-image
.public-announcement-image img{
  filter:
    saturate(1.18)
    contrast(1.06)
    brightness(.95);
}

@media(max-width:620px){

  .public-announcement.has-image
  .announcement-backdrop{
    inset:-24px;

    background-position:center top;

    filter:
      blur(18px)
      saturate(1.65)
      brightness(.62);

    -webkit-mask-image:
      linear-gradient(
        180deg,
        #000000 0%,
        #000000 35%,
        rgba(0,0,0,.80) 57%,
        rgba(0,0,0,.48) 78%,
        rgba(0,0,0,.34) 100%
      );

    mask-image:
      linear-gradient(
        180deg,
        #000000 0%,
        #000000 35%,
        rgba(0,0,0,.80) 57%,
        rgba(0,0,0,.48) 78%,
        rgba(0,0,0,.34) 100%
      );
  }

  .public-announcement.has-image::before{
    background:
      linear-gradient(
        180deg,
        rgba(2,11,12,.06) 0%,
        rgba(2,11,12,.15) 31%,
        rgba(3,14,11,.51) 52%,
        rgba(3,14,11,.88) 69%,
        rgba(3,14,11,.97) 100%
      );
  }
}

/* TQ FULL ANNOUNCEMENT BACKDROP END */

/* TQ SEAMLESS ANNOUNCEMENT IMAGE START */

.public-announcement.has-image{
  background-color:#06120f;

  background-image:
    linear-gradient(
      90deg,
      rgba(2,13,9,.94) 0%,
      rgba(2,13,9,.88) 18%,
      rgba(3,14,11,.76) 34%,
      rgba(3,14,14,.57) 49%,
      rgba(3,13,17,.32) 65%,
      rgba(3,11,17,.10) 82%,
      transparent 100%
    ),
    var(--announcement-image);

  background-repeat:no-repeat;
  background-position:center right;
  background-size:cover;
}

.public-announcement.has-image::before{
  background:
    linear-gradient(
      90deg,
      rgba(2,13,9,.68) 0%,
      rgba(2,13,9,.55) 27%,
      rgba(3,14,12,.36) 45%,
      rgba(3,13,16,.16) 65%,
      transparent 88%
    );
}

.public-announcement.has-image
.public-announcement-image{
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.18) 8%,
      rgba(0,0,0,.52) 18%,
      rgba(0,0,0,.82) 30%,
      #000000 43%,
      #000000 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.18) 8%,
      rgba(0,0,0,.52) 18%,
      rgba(0,0,0,.82) 30%,
      #000000 43%,
      #000000 100%
    );
}

.public-announcement.has-image
.announcement-backdrop{
  opacity:.42;

  filter:
    blur(25px)
    saturate(1.55)
    brightness(.65);
}

.public-announcement.has-image
.public-announcement-image img{
  filter:
    saturate(1.18)
    contrast(1.07)
    brightness(.97);
}

@media(max-width:620px){

  .public-announcement.has-image{
    background-position:center top;

    background-image:
      linear-gradient(
        180deg,
        rgba(2,11,12,.06) 0%,
        rgba(2,11,12,.15) 32%,
        rgba(3,14,11,.57) 53%,
        rgba(3,14,11,.90) 71%,
        rgba(3,14,11,.98) 100%
      ),
      var(--announcement-image);
  }

  .public-announcement.has-image
  .public-announcement-image{
    -webkit-mask-image:
      linear-gradient(
        180deg,
        #000000 0%,
        #000000 55%,
        rgba(0,0,0,.76) 72%,
        rgba(0,0,0,.30) 89%,
        transparent 100%
      );

    mask-image:
      linear-gradient(
        180deg,
        #000000 0%,
        #000000 55%,
        rgba(0,0,0,.76) 72%,
        rgba(0,0,0,.30) 89%,
        transparent 100%
      );
  }
}

/* TQ SEAMLESS ANNOUNCEMENT IMAGE END */

/* Interactive workflow cards */

.step-link{
  position:relative;
  color:inherit;
  text-decoration:none;
  cursor:pointer;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.step-link:hover{
  transform:translateY(-5px);

  background:
    radial-gradient(
      circle at top left,
      rgba(34,197,94,.15),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(15,23,42,.98)
    );

  border-color:rgba(67,227,134,.48);

  box-shadow:
    0 20px 42px rgba(0,0,0,.42),
    0 0 0 1px rgba(67,227,134,.08);
}

.step-link:active{
  transform:translateY(-1px) scale(.99);
}

.step-action{
  position:relative;
  z-index:1;

  margin-top:auto;

  color:#68e89a;

  font-size:12px;
  font-weight:800;

  opacity:.78;

  transition:
    opacity .18s ease,
    transform .18s ease;
}

.step-link:hover .step-action{
  opacity:1;
  transform:translateX(4px);
}

.step-link:focus-visible{
  outline:3px solid rgba(67,227,134,.55);
  outline-offset:4px;
}

/* TQ HERO THREE-SCREEN SHOWCASE START */

.hero-phone{
  justify-content:flex-end;

  padding:
    34px
    34px
    34px
    72px;

  overflow:visible;
}

.hero-phone .phone-frame.hero-showcase{
  position:relative;
  z-index:4;

  width:min(540px,100%);
  max-width:none;
  aspect-ratio:16 / 9;

  margin:0 0 0 auto;

  overflow:visible;

  background:transparent;

  border:0;
  border-radius:24px;

  box-shadow:none;

  transform:
    perspective(1200px)
    rotateY(-4deg)
    rotateX(1deg)
    scale(1.06);

  filter:
    drop-shadow(0 30px 35px rgba(0,0,0,.70))
    drop-shadow(0 0 28px rgba(35,211,104,.18));

  transition:
    transform .55s cubic-bezier(.2,.7,.2,1),
    filter .45s ease;
}

.hero-phone .phone-frame.hero-showcase::before{
  position:absolute;
  inset:10% 5% 4%;
  z-index:-1;

  background:
    radial-gradient(
      ellipse at center,
      rgba(34,197,94,.30),
      rgba(39,83,255,.18) 48%,
      transparent 74%
    );

  filter:blur(30px);

  content:"";
  pointer-events:none;
}

.hero-phone .phone-frame.hero-showcase img{
  width:100%;
  height:100%;
  display:block;

  object-fit:contain;
  object-position:center;

  background:transparent;

  border:0;
  border-radius:22px;

  transform:none;
}

.hero-grid:hover
.hero-phone
.phone-frame.hero-showcase{
  transform:
    perspective(1200px)
    rotateY(0deg)
    rotateX(0deg)
    translateY(-5px)
    scale(1.10);

  filter:
    drop-shadow(0 36px 42px rgba(0,0,0,.74))
    drop-shadow(0 0 38px rgba(35,211,104,.25));
}

@media(max-width:900px){

  .hero-phone{
    padding:
      34px
      22px
      34px
      72px;
  }

  .hero-phone .phone-frame.hero-showcase{
    width:min(460px,100%);

    transform:
      perspective(1100px)
      rotateY(-3deg)
      scale(1.03);
  }
}

@media(max-width:720px){

  .hero-phone{
    min-height:285px;

    padding:
      24px
      16px
      62px;
  }

  .hero-phone .phone-frame.hero-showcase{
    width:min(520px,96%);

    margin:auto;

    transform:none;

    filter:
      drop-shadow(0 24px 30px rgba(0,0,0,.68))
      drop-shadow(0 0 24px rgba(35,211,104,.16));
  }

  .hero-grid:hover
  .hero-phone
  .phone-frame.hero-showcase{
    transform:translateY(-3px) scale(1.02);
  }

  .hero-copy{
    margin-top:-48px;
  }
}

/* TQ HERO THREE-SCREEN SHOWCASE END */

/* TQ HERO AUTO FIT START */

.hero-grid{
  position:relative !important;
  isolation:isolate;

  display:block !important;

  width:100%;
  min-height:520px !important;

  overflow:hidden;

  background-color:#06120f !important;
  background-image:
    linear-gradient(
      90deg,
      rgba(2,14,9,.98) 0%,
      rgba(2,14,9,.94) 28%,
      rgba(3,15,12,.82) 46%,
      rgba(3,14,16,.55) 65%,
      rgba(3,12,18,.26) 82%,
      rgba(3,11,18,.10) 100%
    ),
    var(--hero-image) !important;

  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:cover !important;

  border:1px solid rgba(79,255,150,.30);
  border-radius:26px;

  box-shadow:
    0 28px 78px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.hero-grid::before{
  position:absolute !important;
  inset:-28px !important;
  z-index:0 !important;

  display:block !important;

  background-image:var(--hero-image) !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:cover !important;

  filter:
    blur(28px)
    saturate(1.45)
    brightness(.54);

  opacity:.48;

  transform:scale(1.08);

  content:"" !important;
  pointer-events:none;
}

.hero-grid::after{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;

  display:block !important;

  background:
    radial-gradient(
      ellipse at 82% 7%,
      rgba(255,255,255,.11),
      transparent 30%
    ),
    linear-gradient(
      90deg,
      rgba(2,14,9,.81) 0%,
      rgba(2,14,9,.68) 36%,
      rgba(3,14,14,.36) 58%,
      rgba(3,12,18,.08) 83%,
      transparent 100%
    ) !important;

  content:"" !important;
  pointer-events:none;
}

.hero-copy{
  position:relative !important;
  z-index:4 !important;

  width:min(64%,780px) !important;
  min-height:520px !important;

  margin:0 !important;

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  overflow:visible !important;
}

.hero-copy::before,
.hero-copy::after{
  display:none !important;
  content:none !important;
}

.hero-copy .card-inner{
  min-height:520px !important;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:46px 44px !important;
}

.hero-copy h1,
.hero-copy .lead,
.hero-copy .muted,
.hero-copy .kicker{
  text-shadow:
    0 3px 20px rgba(0,0,0,.84),
    0 1px 3px rgba(0,0,0,.94);
}

.hero-phone{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;

  width:100% !important;
  height:100% !important;
  min-height:0 !important;

  display:block !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  pointer-events:none;
}

.hero-phone::before,
.hero-phone::after{
  display:none !important;
  content:none !important;
}

.hero-phone .hero-background-image{
  position:absolute !important;
  top:50% !important;
  right:2.5% !important;
  left:auto !important;

  width:auto !important;
  height:auto !important;

  max-width:49% !important;
  max-height:88% !important;

  display:block !important;

  object-fit:contain !important;
  object-position:center !important;

  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  filter:
    saturate(1.10)
    contrast(1.04)
    brightness(.98);

  transform:translateY(-50%) !important;

  transition:
    transform .45s ease,
    filter .45s ease;
}

.hero-grid:hover
.hero-phone .hero-background-image{
  filter:
    saturate(1.16)
    contrast(1.05)
    brightness(1.02);

  transform:
    translateY(-50%)
    scale(1.015) !important;
}

@media(max-width:1000px){

  .hero-copy{
    width:67% !important;
  }

  .hero-phone .hero-background-image{
    right:1.5% !important;
    max-width:47% !important;
    max-height:82% !important;
  }
}

@media(max-width:820px){

  .hero-grid{
    min-height:560px !important;
  }

  .hero-copy{
    width:72% !important;
    min-height:560px !important;
  }

  .hero-copy .card-inner{
    min-height:560px !important;
    padding:38px 30px !important;
  }

  .hero-phone .hero-background-image{
    right:-3% !important;
    max-width:49% !important;
    max-height:76% !important;
  }
}

@media(max-width:720px){

  .hero-grid{
    min-height:650px !important;

    background-position:center top !important;
  }

  .hero-grid::after{
    background:
      linear-gradient(
        180deg,
        rgba(2,11,12,.20) 0%,
        rgba(2,12,11,.30) 30%,
        rgba(2,14,10,.77) 52%,
        rgba(2,14,10,.96) 72%,
        rgba(2,14,10,.99) 100%
      ) !important;
  }

  .hero-copy{
    width:100% !important;
    min-height:650px !important;
  }

  .hero-copy .card-inner{
    min-height:650px !important;

    justify-content:flex-end;

    padding:
      285px
      21px
      30px !important;
  }

  .hero-phone .hero-background-image{
    top:28px !important;
    right:auto !important;
    left:50% !important;

    width:92% !important;
    height:245px !important;

    max-width:92% !important;
    max-height:245px !important;

    object-fit:contain !important;

    transform:translateX(-50%) !important;
  }

  .hero-grid:hover
  .hero-phone .hero-background-image{
    transform:
      translateX(-50%)
      scale(1.01) !important;
  }

  .hero-copy h1{
    font-size:33px !important;
  }
}

@media(max-width:420px){

  .hero-grid{
    min-height:670px !important;
  }

  .hero-copy{
    min-height:670px !important;
  }

  .hero-copy .card-inner{
    min-height:670px !important;

    padding:
      275px
      18px
      27px !important;
  }

  .hero-phone .hero-background-image{
    width:96% !important;
    max-width:96% !important;
    height:230px !important;
    max-height:230px !important;
  }

  .hero-copy h1{
    font-size:29px !important;
  }
}
/* TQ OUTPUT FULL IMAGE — DESKTOP FIX START */

@media(min-width:1051px){

  .output-grid{
    align-items:stretch;
    overflow:visible;
  }

  .output-card{
    display:flex;
    flex-direction:column;
    min-width:0;
  }

  .output-card > img{
    width:100%;
    height:540px;
    aspect-ratio:auto;
    display:block;

    object-fit:contain;
    object-position:center;

    background:
      linear-gradient(
        145deg,
        #f8fafc,
        #eef2f7
      );

    border-right:0;
    border-bottom:1px solid rgba(148,163,184,.14);

    transform:none;
  }

  .output-card:hover > img,
  .output-card:focus > img,
  .output-card:focus-visible > img,
  .output-card:focus-within > img{
    transform:none;

    filter:
      brightness(1.03)
      saturate(1.04)
      contrast(1.02);
  }

  .output-copy{
    width:100%;
    margin-top:auto;
  }
}


/* TQ HERO AUTO FIT END */