/* Shared feature selectors and application screenshot galleries. */
.feature-gallery a:focus-visible {
  outline: 3px solid #1672d4; outline-offset: 5px; border-radius: 3px;
}
.feature-gallery .feature-main {
  width: min(calc(100% - 64px), 1040px); margin: 0 auto; padding: 24px 0 44px;
}
.feature-back {
  display: inline-flex; min-height: 44px; align-items: center; gap: 10px;
  color: var(--px-blue-dark); font-size: 15px; font-weight: 700; text-decoration: none;
}
.feature-back:hover { text-decoration: underline; }
.feature-intro { padding: 16px 0 20px; }
.feature-intro .express-kicker { margin-bottom: 10px; }
.feature-gallery .feature-intro h1 {
  margin: 0; font-size: var(--px-type-heading); line-height: 1.2;
  letter-spacing: -.025em; font-weight: 700; color: var(--px-ink);
}
.feature-intro > p {
  max-width: 750px; margin: 12px 0 0; color: var(--px-text); font-size: var(--px-type-body); line-height: 1.6;
}
/* Match the existing express-header heights at its responsive breakpoints. */
.feature-switcher {
  position: sticky; top: 101px; z-index: 15; background: #fff;
  display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 18px;
  border-bottom: 1px solid var(--px-line); margin-bottom: 18px;
}
.feature-switcher a, .feature-switcher label, .feature-jumps a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 9px 15px;
  border: 1px solid var(--px-line); border-radius: 9px;
  color: #36516c; background: #fff; font-size: 14px; font-weight: 650; text-decoration: none;
}
.feature-switcher a:hover, .feature-switcher label:hover, .feature-jumps a:hover { border-color: #8fbce9; background: #f0f7ff; }
.feature-switcher [aria-current="page"] { background: #176ed0; border-color: #176ed0; color: #fff; }
.feature-note { margin: 0 0 28px; color: var(--px-muted); font-size: var(--px-type-caption); line-height: 1.6; }
.feature-jumps { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }
.feature-group { margin: 38px 0 64px; scroll-margin-top: 126px; }
.feature-group > h2, .feature-group > h3 { font-size: var(--px-type-title); margin: 0 0 25px; color: var(--px-ink); }
.feature-screen { margin: 0 0 34px; scroll-margin-top: 126px; }
.feature-screen figcaption { margin-bottom: 14px; }
.feature-screen h2, .feature-screen h3, .feature-screen h4 {
  margin: 0 0 8px; color: var(--px-ink); font-size: 20px; line-height: 1.35; font-weight: 700;
}
.feature-screen p { max-width: 820px; margin: 0; color: var(--px-text); font-size: 16px; line-height: 1.65; }
.feature-image {
  display: block; width: fit-content; max-width: 100%; overflow: hidden;
  border: 1px solid #d3e0ee; border-radius: 12px;
  box-shadow: 0 14px 40px rgba(26,63,101,.08); background: #f3f7fc; cursor: zoom-in;
}
.feature-image img {
  display: block; width: auto; height: auto; max-width: 100%;
  max-height: min(60vh, 520px); max-height: min(60svh, 520px);
  object-fit: contain;
}
.feature-image:hover { border-color: #8fbce9; }
.feature-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--px-line);
}
.feature-gallery .express-legal { padding-top: 22px; }
@media (max-width: 760px) {
  .feature-gallery .feature-main { width: calc(100% - 28px); padding-top: 18px; }
  .feature-intro { padding: 14px 0 18px; }
  .feature-intro > p { font-size: 16px; margin-top: 12px; }
  .feature-switcher { gap: 7px; }
  .feature-switcher a, .feature-switcher label { padding: 9px 12px; }
  .feature-group { margin-top: 28px; margin-bottom: 42px; }
  .feature-screen { margin-bottom: 32px; }
  .feature-screen h2, .feature-screen h3, .feature-screen h4 { font-size: 20px; }
  .feature-image { border-radius: 9px; box-shadow: 0 8px 24px rgba(26,63,101,.06); }
}


/* Native radio selection works with keyboard and without JavaScript. */
.home-feature-browser {
  position: relative; min-width: 0; max-width: 1040px;
  margin: 0; padding: 0; border: 0;
}
.feature-radio, .feature-radio-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.home-feature-browser .feature-intro { padding-top: 0; }
.home-feature-browser .feature-intro h2 {
  margin: 0; color: var(--px-ink); font-size: var(--px-type-heading);
  line-height: 1.3; font-weight: 680; letter-spacing: -.025em;
}
.feature-intro-copy > p {
  max-width: 750px; margin: 12px 0 0; color: var(--px-text);
  font-size: var(--px-type-body); line-height: 1.6;
}
.feature-intro-copy, .feature-panel { display: none; }
.home-feature-browser .feature-switcher label { cursor: pointer; }
.home-feature-browser .feature-panel > .feature-screen:last-child { margin-bottom: 0; }

#home-feature-write:checked ~ .feature-intro [data-feature="write"],
#home-feature-write:checked ~ .feature-panels [data-feature="write"] { display: block; }
#home-feature-write:checked ~ .feature-switcher label[for="home-feature-write"] {
  background: #176ed0; border-color: #176ed0; color: #fff;
}
#home-feature-write:focus-visible ~ .feature-switcher label[for="home-feature-write"] {
  outline: 3px solid var(--px-blue); outline-offset: 3px;
}

#home-feature-call:checked ~ .feature-intro [data-feature="call"],
#home-feature-call:checked ~ .feature-panels [data-feature="call"] { display: block; }
#home-feature-call:checked ~ .feature-switcher label[for="home-feature-call"] {
  background: #176ed0; border-color: #176ed0; color: #fff;
}
#home-feature-call:focus-visible ~ .feature-switcher label[for="home-feature-call"] {
  outline: 3px solid var(--px-blue); outline-offset: 3px;
}

#home-feature-broadcast:checked ~ .feature-intro [data-feature="broadcast"],
#home-feature-broadcast:checked ~ .feature-panels [data-feature="broadcast"] { display: block; }
#home-feature-broadcast:checked ~ .feature-switcher label[for="home-feature-broadcast"] {
  background: #176ed0; border-color: #176ed0; color: #fff;
}
#home-feature-broadcast:focus-visible ~ .feature-switcher label[for="home-feature-broadcast"] {
  outline: 3px solid var(--px-blue); outline-offset: 3px;
}

#home-feature-meet:checked ~ .feature-intro [data-feature="meet"],
#home-feature-meet:checked ~ .feature-panels [data-feature="meet"] { display: block; }
#home-feature-meet:checked ~ .feature-switcher label[for="home-feature-meet"] {
  background: #176ed0; border-color: #176ed0; color: #fff;
}
#home-feature-meet:focus-visible ~ .feature-switcher label[for="home-feature-meet"] {
  outline: 3px solid var(--px-blue); outline-offset: 3px;
}

#home-feature-sell:checked ~ .feature-intro [data-feature="sell"],
#home-feature-sell:checked ~ .feature-panels [data-feature="sell"] { display: block; }
#home-feature-sell:checked ~ .feature-switcher label[for="home-feature-sell"] {
  background: #176ed0; border-color: #176ed0; color: #fff;
}
#home-feature-sell:focus-visible ~ .feature-switcher label[for="home-feature-sell"] {
  outline: 3px solid var(--px-blue); outline-offset: 3px;
}

#home-feature-buy:checked ~ .feature-intro [data-feature="buy"],
#home-feature-buy:checked ~ .feature-panels [data-feature="buy"] { display: block; }
#home-feature-buy:checked ~ .feature-switcher label[for="home-feature-buy"] {
  background: #176ed0; border-color: #176ed0; color: #fff;
}
#home-feature-buy:focus-visible ~ .feature-switcher label[for="home-feature-buy"] {
  outline: 3px solid var(--px-blue); outline-offset: 3px;
}

#home-feature-share:checked ~ .feature-intro [data-feature="share"],
#home-feature-share:checked ~ .feature-panels [data-feature="share"] { display: block; }
#home-feature-share:checked ~ .feature-switcher label[for="home-feature-share"] {
  background: #176ed0; border-color: #176ed0; color: #fff;
}
#home-feature-share:focus-visible ~ .feature-switcher label[for="home-feature-share"] {
  outline: 3px solid var(--px-blue); outline-offset: 3px;
}


/* Paired platforms share a height; their original aspect ratios stay intact.
   Each ratio is stored in CSS because the site disallows inline styles. */
.feature-platforms {
  --pair-gap: 20px;
  display: grid; grid-template-columns: var(--pair-columns);
  gap: var(--pair-gap); align-items: start;
  width: 100%; max-width: calc(var(--pair-width) + var(--pair-gap));
}
.feature-platform { min-width: 0; margin: 0; }
.feature-platform .feature-image {
  width: 100%; border: 0; border-radius: 10px;
  outline: 1px solid #d3e0ee; outline-offset: 0;
}
.feature-platform .feature-image:hover { outline-color: #8fbce9; }
.feature-platform .feature-image:focus-visible {
  outline: 3px solid #1672d4; outline-offset: 4px;
}
.feature-platform .feature-image img {
  width: 100%; height: auto; max-width: none; max-height: none;
}
.feature-screen .feature-platform-label {
  margin: 10px 0 0; text-align: center; font-size: var(--px-type-caption);
  line-height: 1.5; font-weight: 650; color: var(--px-text);
}
@media (max-width: 760px) {
  .feature-platforms { --pair-gap: 12px; }
  .feature-platform .feature-image { border-radius: 5px; }
}
.feature-pair-write-1 { --pair-columns: 1.560975610fr .45fr; --pair-width: min(120.658537vh, 1045.707317px); }
@supports (height: 1svh) { .feature-pair-write-1 { --pair-width: min(120.658537svh, 1045.707317px); } }
.feature-pair-call-1 { --pair-columns: 1.488326848fr .45fr; --pair-width: min(116.299611vh, 1007.929961px); }
@supports (height: 1svh) { .feature-pair-call-1 { --pair-width: min(116.299611svh, 1007.929961px); } }
.feature-pair-broadcast-1 { --pair-columns: 1.560975610fr .45fr; --pair-width: min(120.658537vh, 1045.707317px); }
@supports (height: 1svh) { .feature-pair-broadcast-1 { --pair-width: min(120.658537svh, 1045.707317px); } }
.feature-pair-meet-1 { --pair-columns: 1.341463415fr .45fr; --pair-width: min(107.487805vh, 931.560976px); }
@supports (height: 1svh) { .feature-pair-meet-1 { --pair-width: min(107.487805svh, 931.560976px); } }
.feature-pair-sell-store-1 { --pair-columns: 1.352941176fr .45fr; --pair-width: min(108.176471vh, 937.529412px); }
@supports (height: 1svh) { .feature-pair-sell-store-1 { --pair-width: min(108.176471svh, 937.529412px); } }
.feature-pair-sell-store-2 { --pair-columns: 1.254901961fr .45fr; --pair-width: min(102.294118vh, 886.549020px); }
@supports (height: 1svh) { .feature-pair-sell-store-2 { --pair-width: min(102.294118svh, 886.549020px); } }
.feature-pair-sell-market-1 { --pair-columns: 1.352941176fr .45fr; --pair-width: min(108.176471vh, 937.529412px); }
@supports (height: 1svh) { .feature-pair-sell-market-1 { --pair-width: min(108.176471svh, 937.529412px); } }
.feature-pair-sell-market-2 { --pair-columns: 1.361702128fr .45fr; --pair-width: min(108.702128vh, 942.085106px); }
@supports (height: 1svh) { .feature-pair-sell-market-2 { --pair-width: min(108.702128svh, 942.085106px); } }
.feature-pair-buy-2 { --pair-columns: 1.254901961fr .45fr; --pair-width: min(102.294118vh, 886.549020px); }
@supports (height: 1svh) { .feature-pair-buy-2 { --pair-width: min(102.294118svh, 886.549020px); } }
.feature-pair-share-1 { --pair-columns: 1.422222222fr .45fr; --pair-width: min(112.333333vh, 973.555556px); }
@supports (height: 1svh) { .feature-pair-share-1 { --pair-width: min(112.333333svh, 973.555556px); } }

@media (max-width: 1100px) { .feature-switcher { top: 95px; } }
@media (max-width: 560px) { .feature-switcher { top: 81px; } }