:root{--green:#42bf6e;--ink:#07100d;--dark:#07150f;--paper:#f5f6f1;--muted:#5c6760;--line:#d9dfda;--blue:#dce9e7}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}img,video{display:block;width:100%}a{color:inherit}.site-header{height:90px;padding:0 48px;display:flex;align-items:center;gap:36px;background:#fff}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 20px Manrope,sans-serif;letter-spacing:.08em}.brand img{width:34px;height:34px;object-fit:contain}.main-nav{display:flex;gap:36px;margin-left:auto}.main-nav a{text-decoration:none;font-size:13px;font-weight:700}.header-cta,.button{display:inline-flex;align-items:center;gap:14px;border-radius:999px;background:var(--dark);color:#fff;padding:14px 20px;text-decoration:none;font-size:12px;font-weight:700}.header-cta span{color:var(--green)}.menu-toggle{display:none}.product-hero{min-height:650px;padding:40px 3vw 40px 5vw;display:grid;grid-template-columns:40% 60%;background:#fff}.hero-copy{padding:35px 5vw 35px 0;align-self:center}.back-link{color:#327e4d;text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.09em}.eyebrow{margin:22px 0 18px;color:var(--green);font-size:10px;font-weight:800;letter-spacing:.14em}.hero-copy h1,.section h2,.final-cta h2{margin:0;font:800 clamp(42px,4.7vw,76px)/.94 Manrope,sans-serif;letter-spacing:-.06em}.hero-subtitle{margin:12px 0 0;font:700 clamp(19px,1.6vw,27px) Manrope,sans-serif}.lead{max-width:470px;margin:24px 0;color:var(--muted);font-size:18px;line-height:1.55}.feature-list{display:flex;flex-wrap:wrap;gap:12px 22px;margin:0 0 30px;padding:0;list-style:none;font-size:14px}.feature-list li:before{content:"○";margin-right:7px;color:var(--green)}.disclosure{display:block;width:max-content;margin-top:14px;color:#68736c;font-size:11px}.hero-photo{position:relative;margin:0;min-height:560px;overflow:hidden;border-radius:12px;background:#0d1512}.hero-photo img{height:100%;object-fit:cover}.hero-photo figcaption{position:absolute;right:14px;bottom:14px;padding:7px 10px;border-radius:999px;background:rgba(4,13,9,.75);color:#fff;font-size:9px;letter-spacing:.06em}.quick-look{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:55px;padding:19px 5vw;border-block:1px solid var(--line);background:rgba(245,246,241,.94);backdrop-filter:blur(12px)}.quick-look strong{font:800 11px Manrope,sans-serif;letter-spacing:.13em}.quick-look div{display:flex;gap:30px}.quick-look a{text-decoration:none;color:#526058;font-size:12px}.section{padding:100px 5vw}.section-heading{max-width:900px;margin-bottom:48px}.section-heading>p:last-child{max-width:650px;color:var(--muted);font-size:16px;line-height:1.6}.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.reason-grid article{padding:35px 5vw 20px 0}.reason-grid article+article{padding-left:35px;border-left:1px solid var(--line)}.reason-grid span,.audience-grid article span,.consider-list>article>span{color:var(--green);font-weight:800}.reason-grid h3,.audience-grid h3,.more-grid h3{font:800 25px Manrope,sans-serif;margin:14px 0}.reason-grid p,.editorial p,.languages p,.audience-grid p,.consider p,.more-grid span{color:var(--muted);line-height:1.65}.demo{background:#fff}.video-frame{position:relative;overflow:hidden;border-radius:14px;background:#07100d}.video-frame video{width:100%;max-height:720px;aspect-ratio:16/8.2;object-fit:cover}.video-frame>span{position:absolute;right:18px;top:18px;padding:8px 11px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(4,13,9,.6);color:#fff;font-size:9px;letter-spacing:.1em}.editorial{display:grid;grid-template-columns:56% 36%;gap:8%;align-items:center}.editorial.reverse{grid-template-columns:36% 56%;background:#fff}.editorial.reverse figure{order:2}.editorial figure{height:560px;margin:0;overflow:hidden;border-radius:12px}.editorial img{height:100%;object-fit:cover}.editorial p{font-size:16px}.languages{display:grid;grid-template-columns:46% 48%;gap:6%;align-items:center;background:var(--dark);color:#eef4f0}.languages>div>p:not(.eyebrow){color:#b7c2bb;font-size:16px;line-height:1.65}.languages figure{height:520px;margin:0;overflow:hidden;border-radius:12px}.languages img{height:100%;object-fit:cover}.stat-row{display:flex;gap:18px;margin:32px 0}.stat-row span{display:flex;min-width:120px;flex-direction:column;color:#aab8b0;font-size:11px}.stat-row b{color:#fff;font:800 38px Manrope,sans-serif}.note{padding-top:22px;border-top:1px solid #34423a;font-size:13px!important}.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.audience-grid article{overflow:hidden;border-radius:12px;background:#fff}.audience-grid img{height:330px;object-fit:cover}.audience-grid article div{padding:24px}.consider{display:grid;grid-template-columns:35% 60%;gap:5%;background:#eaf0eb}.consider>div>p:last-child{color:var(--muted);line-height:1.6}.consider-list article{display:grid;grid-template-columns:50px 1fr;gap:20px;padding:25px 0;border-top:1px solid #c9d3cb}.consider-list article:last-child{border-bottom:1px solid #c9d3cb}.consider-list h3{margin:0 0 8px;font:800 19px Manrope,sans-serif}.consider-list p{margin:0}.specs{display:grid;grid-template-columns:46% 46%;gap:8%;align-items:center;background:#fff}.spec-image{height:610px;overflow:hidden;border-radius:12px;background:#e8edeb}.spec-image img{height:100%;object-fit:contain}.specs dl{margin:35px 0 0}.specs dl div{display:grid;grid-template-columns:34% 66%;padding:15px 0;border-top:1px solid var(--line)}.specs dt{color:#68756d;font-size:12px}.specs dd{margin:0;font-weight:600}.final-cta{display:grid;grid-template-columns:56% 44%;align-items:center;min-height:560px;background:var(--dark);color:#edf3ef}.final-cta>div{padding:80px 4vw 80px 7vw}.final-cta>div>p:not(.eyebrow){color:#b5c0b9;line-height:1.6}.final-cta img{height:560px;object-fit:contain;background:linear-gradient(135deg,#14281e,#07100d)}.button.light{margin:22px 0 14px;background:#eef3ef;color:var(--dark)}.final-cta small{display:block;color:#8d9c93}.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.more-grid article{display:grid;grid-template-columns:44% 56%;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff}.more-grid img{height:330px;object-fit:contain;background:#e9eeeb}.more-grid article div{padding:32px}.more-grid article p{color:var(--green);font-size:9px;font-weight:800;letter-spacing:.12em}.more-grid article span{display:block}.text-link{margin-top:24px!important;color:#637169!important;font-weight:700}.button.is-disabled,.text-link{cursor:default;user-select:none}.site-footer{padding:55px 5vw 25px;background:#050c09;color:#d8ded6}.footer-main{display:grid;grid-template-columns:1.6fr repeat(3,.8fr);gap:28px}.footer-brand{color:#fff}.footer-main>div>b{display:block;margin-bottom:18px;color:var(--green);font-size:10px;letter-spacing:.12em}.footer-main p{max-width:180px;color:#b8c3bc;font-size:12px;line-height:1.5}.footer-main a:not(.brand){display:block;margin-bottom:11px;text-decoration:none;color:#d3d9d2;font-size:11px}.footer-bottom{display:flex;justify-content:space-between;margin-top:45px;padding-top:20px;border-top:1px solid #233128;color:#78847c;font-size:10px}
@media(max-width:850px){.site-header{height:70px;padding:0 20px}.brand{font-size:15px}.brand img{width:27px;height:27px}.menu-toggle{display:block;margin-left:auto;border:0;background:none;font-weight:700}.main-nav{display:none;position:absolute;z-index:10;top:70px;left:0;right:0;margin:0;padding:20px;background:#fff;flex-direction:column}.main-nav.is-open{display:flex}.header-cta{display:none}.product-hero{grid-template-columns:1fr;padding:20px}.hero-copy{padding:30px 5px 40px}.hero-photo{min-height:420px}.quick-look{position:static;align-items:flex-start;gap:18px;overflow:auto}.quick-look div{gap:18px;white-space:nowrap}.section{padding:70px 20px}.reason-grid,.audience-grid,.editorial,.editorial.reverse,.languages,.consider,.specs,.final-cta,.more-grid{grid-template-columns:1fr}.reason-grid article,.reason-grid article+article{padding:28px 0;border-left:0;border-top:1px solid var(--line)}.editorial.reverse figure{order:0}.editorial figure,.languages figure{height:410px}.video-frame video{aspect-ratio:16/10}.stat-row{flex-wrap:wrap}.audience-grid img{height:300px}.consider{gap:35px}.spec-image{height:420px}.final-cta>div{padding:70px 20px}.final-cta img{height:420px}.more-grid article{grid-template-columns:1fr}.more-grid img{height:270px}.footer-main{grid-template-columns:1fr 1fr}.footer-main>div:first-child{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:9px}}

/* Product-first Hero: keeps the exact W4 Pro hardware clear at first glance. */
.hero-photo{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 42%,#fff 0,#f1f3ef 58%,#e1e7e1 100%)}
.hero-photo:before{content:"";position:absolute;left:16%;right:16%;bottom:9%;height:8%;border-radius:50%;background:rgba(8,19,15,.14);filter:blur(24px)}
.hero-photo img{position:relative;z-index:1;width:88%;height:88%;object-fit:contain}
.hero-photo figcaption{z-index:2}
@media(max-width:850px){.hero-photo img{width:92%;height:92%}}

/* Preserves the original wide composition and blends it into the Calnors green. */
.languages{grid-template-columns:minmax(0,42%) minmax(0,58%);gap:0;padding-right:0;overflow:hidden}
.languages>div{position:relative;z-index:2;padding-right:5vw}
.languages figure{position:relative;width:100%;height:auto;aspect-ratio:1.75;margin:0;border-radius:12px 0 0 12px;background:#fff}
.languages figure:before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--dark) 0,rgba(7,21,15,.94) 4%,rgba(7,21,15,.58) 14%,rgba(7,21,15,.16) 25%,transparent 38%)}
.languages img{width:100%;height:100%;object-fit:cover;object-position:right center}
@media(max-width:850px){.languages{grid-template-columns:1fr;padding-right:20px}.languages>div{padding-right:0}.languages figure{aspect-ratio:1.45;border-radius:12px}.languages figure:before{background:linear-gradient(180deg,var(--dark) 0,rgba(7,21,15,.55) 12%,transparent 35%)}.languages img{object-position:76% center}}

/* Crops the source's stray right-edge pixel without cutting the hardware. */
.final-product{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:560px;margin:0;overflow:hidden;background:transparent}
.final-product:after{content:"";position:absolute;left:20%;right:20%;bottom:12%;height:7%;border-radius:50%;background:rgba(0,0,0,.3);filter:blur(22px)}
.final-cta .final-product img{position:relative;z-index:1;width:88%;height:88%;object-fit:contain;object-position:center;clip-path:inset(1% 7% 1% 2%);background:transparent}
@media(max-width:850px){.final-product{height:420px}.final-cta .final-product img{width:92%;height:92%;clip-path:inset(1% 7% 1% 2%)}}

/* Keeps each editorial context visually distinct instead of repeating the same people. */
.audience-grid article:nth-child(2) img{object-position:center bottom}
.audience-grid article:nth-child(3) img{object-position:center bottom}
.spec-image{height:auto;aspect-ratio:1.55}
.spec-image img{object-fit:cover}
@media(max-width:850px){.spec-image{height:auto;aspect-ratio:1.55}}

/* Aligns the hero copy with the top edge of the product image. */
.product-hero .hero-copy{align-self:start;padding-top:0}
@media(max-width:850px){.product-hero .hero-copy{padding-top:20px}}

/* Lets the language visual dissolve into the Calnors green, like the Home hero. */
.languages figure{border-radius:0;background:var(--dark)}
.languages figure:before{display:none}
.languages img{
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.05) 8%,
    rgba(0,0,0,.16) 16%,
    rgba(0,0,0,.34) 25%,
    rgba(0,0,0,.58) 34%,
    rgba(0,0,0,.82) 42%,
    rgba(0,0,0,.96) 49%,
    #000 55%);
  mask-image:linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.05) 8%,
    rgba(0,0,0,.16) 16%,
    rgba(0,0,0,.34) 25%,
    rgba(0,0,0,.58) 34%,
    rgba(0,0,0,.82) 42%,
    rgba(0,0,0,.96) 49%,
    #000 55%);
}
@media(max-width:850px){
  .languages figure{border-radius:0 0 12px 12px}
  .languages img{
    -webkit-mask-image:linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,.05) 8%,
      rgba(0,0,0,.16) 16%,
      rgba(0,0,0,.34) 25%,
      rgba(0,0,0,.58) 34%,
      rgba(0,0,0,.82) 42%,
      rgba(0,0,0,.96) 49%,
      #000 55%);
    mask-image:linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,.05) 8%,
      rgba(0,0,0,.16) 16%,
      rgba(0,0,0,.34) 25%,
      rgba(0,0,0,.58) 34%,
      rgba(0,0,0,.82) 42%,
      rgba(0,0,0,.96) 49%,
      #000 55%);
  }
}

/* Makes the photograph and green content panel share the same full height. */
@media(min-width:851px){
  .languages{grid-template-columns:minmax(0,46%) minmax(0,54%);align-items:stretch;padding:0;overflow:hidden}
  .languages>div{display:flex;flex-direction:column;justify-content:center;padding:90px 5vw}
  .languages figure{align-self:stretch;width:100%;height:auto;min-height:100%;aspect-ratio:auto;margin:0}
  .languages img{width:100%;height:100%;object-fit:cover}
}
@media(max-width:850px){
  .languages{padding:0}
  .languages>div{padding:70px 20px 45px}
  .languages figure{width:100%;height:390px;aspect-ratio:auto;margin:0}
}

/* Keeps the CTA with the copy and uses a shorter image instead of stretching the text column. */
@media(min-width:851px){
  .product-hero{min-height:0;align-items:start}
  .product-hero .hero-copy{display:block;align-self:start;padding-top:0;padding-bottom:35px}
  .product-hero .hero-copy>.button{margin-top:0}
  .product-hero .hero-photo{height:clamp(480px,34vw,560px);min-height:0}
}

/* Balanced final CTA framing with the complete product centered. */
.final-cta .final-product img{
  width:92%;
  height:92%;
  object-fit:contain;
  object-position:center;
  clip-path:none;
  transform:none;
}
@media(max-width:850px){
  .final-cta .final-product img{
    width:90%;
    height:90%;
    object-position:center;
    clip-path:none;
    transform:none;
  }
}

/* Full-bleed official photo avoids the visible halo of the old PNG cutout. */
.final-product.final-product-photo{
  position:relative;
  background:var(--dark);
}
.final-product.final-product-photo:after{
  display:none;
}
.final-product.final-product-photo:before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,var(--dark) 0%,rgba(7,21,15,.82) 12%,rgba(7,21,15,.3) 30%,transparent 52%);
}
.final-cta .final-product.final-product-photo img{
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:58% center;
  clip-path:none;
  transform:none;
}
@media(max-width:850px){
  .final-product.final-product-photo:before{
    background:linear-gradient(180deg,var(--dark) 0%,rgba(7,21,15,.45) 18%,transparent 44%);
  }
  .final-cta .final-product.final-product-photo img{
    width:100%;
    height:100%;
    object-position:60% center;
  }
}

/* One continuous background removes the seam between copy and photograph. */
.final-cta{
  position:relative;
  overflow:hidden;
  background-color:var(--dark);
  background-image:
    linear-gradient(90deg,
      var(--dark) 0%,
      var(--dark) 34%,
      rgba(7,21,15,.97) 43%,
      rgba(7,21,15,.78) 54%,
      rgba(7,21,15,.42) 66%,
      rgba(7,21,15,.1) 78%,
      transparent 88%),
    url("../assets/w4-pro-hero.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center,center;
}
.final-cta>div{
  position:relative;
  z-index:2;
}
.final-product.final-product-photo{
  opacity:0;
  pointer-events:none;
}
@media(max-width:850px){
  .final-cta{
    background-image:
      linear-gradient(180deg,
        var(--dark) 0%,
        var(--dark) 42%,
        rgba(7,21,15,.92) 52%,
        rgba(7,21,15,.42) 68%,
        transparent 84%),
      url("../assets/w4-pro-hero.jpg");
    background-position:center,64% center;
  }
}

/* The source files include a baked-in title strip; zoom past it inside the cards. */
.audience-grid article:nth-child(2) img,
.audience-grid article:nth-child(3) img{
  object-position:center bottom;
  transform:scale(1.12);
  transform-origin:center bottom;
}

/* Keep the CTA photograph on the right while feathering it into the copy panel. */
.final-cta{
  background:var(--dark);
}
.final-product.final-product-photo{
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  bottom:0;
  width:68%;
  height:100%;
  opacity:1;
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.04) 12%,
    rgba(0,0,0,.14) 26%,
    rgba(0,0,0,.32) 40%,
    rgba(0,0,0,.54) 55%,
    rgba(0,0,0,.76) 69%,
    rgba(0,0,0,.92) 82%,
    #000 94%);
  mask-image:linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.04) 12%,
    rgba(0,0,0,.14) 26%,
    rgba(0,0,0,.32) 40%,
    rgba(0,0,0,.54) 55%,
    rgba(0,0,0,.76) 69%,
    rgba(0,0,0,.92) 82%,
    #000 94%);
}
.final-product.final-product-photo:before{
  display:none;
}
.final-cta .final-product.final-product-photo img{
  object-position:70% center;
}
@media(max-width:850px){
  .final-product.final-product-photo{
    position:relative;
    inset:auto;
    width:100%;
    height:420px;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.65) 18%,#000 34%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.65) 18%,#000 34%);
  }
  .final-cta .final-product.final-product-photo img{
    object-position:64% center;
  }
}

/* Use the full source width so the fade ends before the W4 Pro hardware begins. */
@media(min-width:851px){
  .languages{
    position:relative;
    min-height:640px;
  }
  .languages>div{
    position:relative;
    z-index:2;
    grid-column:1;
  }
  .languages figure{
    position:absolute;
    z-index:1;
    inset:0;
    width:100%;
    height:100%;
    min-height:0;
  }
  .languages img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.04) 10%,
      rgba(0,0,0,.14) 20%,
      rgba(0,0,0,.32) 29%,
      rgba(0,0,0,.55) 37%,
      rgba(0,0,0,.78) 44%,
      rgba(0,0,0,.94) 50%,
      #000 55%);
    mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.04) 10%,
      rgba(0,0,0,.14) 20%,
      rgba(0,0,0,.32) 29%,
      rgba(0,0,0,.55) 37%,
      rgba(0,0,0,.78) 44%,
      rgba(0,0,0,.94) 50%,
      #000 55%);
  }
}
@media(max-width:850px){
  .languages figure{
    position:relative;
    inset:auto;
    width:100%;
    height:390px;
    min-height:0;
  }
}

/* Clean official product image: the fade stays in its empty space, not over the earbuds. */
@media(min-width:851px){
  .languages{
    background-color:var(--dark);
    background-image:
      linear-gradient(90deg,
        var(--dark) 0%,
        var(--dark) 42%,
        rgba(7,21,15,.98) 47%,
        rgba(7,21,15,.86) 51%,
        rgba(7,21,15,.66) 55%,
        rgba(7,21,15,.43) 58%,
        rgba(7,21,15,.2) 61%,
        transparent 65%),
      url("../assets/w4-pro-language-product.webp");
    background-repeat:no-repeat;
    background-size:100% 100%,auto 100%;
    background-position:center,right center;
  }
  .languages figure{
    opacity:0;
    pointer-events:none;
  }
}
@media(max-width:850px){
  .languages{
    background-image:none;
  }
  .languages figure{
    opacity:1;
    background:#fff;
  }
  .languages img{
    object-fit:contain;
    object-position:center;
    -webkit-mask-image:none;
    mask-image:none;
  }
}

/* Final Languages composition: complete product, intentional white field and seamless edge. */
@media(min-width:851px){
  .languages{
    position:relative;
    display:grid;
    grid-template-columns:48% 52%;
    min-height:640px;
    background:var(--dark);
  }
  .languages>div{
    position:relative;
    z-index:3;
    grid-column:1;
  }
  .languages figure{
    position:relative;
    z-index:1;
    inset:auto;
    grid-column:2;
    align-self:stretch;
    width:100%;
    height:100%;
    min-height:640px;
    opacity:1;
    overflow:hidden;
    background:#fff;
  }
  .languages figure:before{
    content:"";
    display:block;
    position:absolute;
    z-index:2;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,
      var(--dark) 0%,
      rgba(7,21,15,.99) 7%,
      rgba(7,21,15,.94) 16%,
      rgba(7,21,15,.8) 28%,
      rgba(7,21,15,.58) 41%,
      rgba(7,21,15,.34) 54%,
      rgba(7,21,15,.14) 66%,
      transparent 76%);
  }
  .languages img{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    -webkit-mask-image:none;
    mask-image:none;
    transform:scale(.82);
    transform-origin:center;
  }
}
@media(max-width:850px){
  .languages figure:before{
    content:"";
    display:block;
    position:absolute;
    z-index:2;
    inset:0;
    background:linear-gradient(180deg,var(--dark) 0%,rgba(7,21,15,.72) 18%,rgba(7,21,15,.28) 32%,transparent 46%);
  }
  .languages img{
    transform:scale(.9);
  }
}

/* External advertiser CTA */
.outbound-cta{min-height:54px;padding:0 26px;background:#42bf6e!important;color:#fff!important;box-shadow:0 10px 24px rgba(66,191,110,.22);transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}.outbound-cta span{color:#fff!important}.outbound-cta[href]:hover{background:#35a95f!important;transform:translateY(-1px);box-shadow:0 13px 28px rgba(66,191,110,.28)}.outbound-cta.is-disabled{background:#59635e!important;box-shadow:none;cursor:default;opacity:.78;transform:none}.outbound-note{display:block;margin-top:9px;color:#6c7770;font-size:11px;font-style:italic}.outbound-note.on-dark{color:#b7c5bd}