/* ==========================================================================
   TWEAK PAGE STYLES - Cleaned & Refactored
   ========================================================================== */

/* --------------------------------------------------------------------------
   BREADCRUMBS
   -------------------------------------------------------------------------- */
.crumbs {
  margin: 0 0 3px;
  font-size: 11px;
  color: #777;
  overflow: hidden;
  zoom: 1;
}

.crumbs a {
  color: #08c;
  text-decoration: none;
}

.crumbs a:hover {
  text-decoration: underline;
}

.crumbs .sep {
  padding: 0 6px;
  color: #b0b0b0;
}

/* --------------------------------------------------------------------------
   HERO SECTION
   -------------------------------------------------------------------------- */
.tweak-hero {
  position: relative;
  height: 260px;
  padding: 26px 30px;
  margin-bottom: 14px;
  overflow: visible;
  zoom: 1;
  border: 1px solid #d7d7d7;
  border-color: #e5e5e5 #dbdbdb #d2d2d2;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  background: #f7f7f7;
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(#fff),
      to(#eee));
  -webkit-box-shadow: rgba(0, 0, 0, 0.12) 0 1px 2px,
    inset rgba(255, 255, 255, 0.9) 0 1px 0;
  box-shadow: rgba(0, 0, 0, 0.12) 0 1px 2px,
    inset rgba(255, 255, 255, 0.9) 0 1px 0;
}

.tweak-hero .hero-copy {
  position: relative;
  z-index: 2;
  width: 560px;
  padding-right: 320px;
}

.tweak-hero h1 {
  font-size: 28px;
  line-height: 1.1;
  color: #000;
  margin-bottom: 10px;
}

.tweak-hero .tagline {
  font-size: 15px;
  line-height: 21px;
  color: #666;
  margin-bottom: 12px;
}

.tweak-hero .actions {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 3;
  text-align: right;
}

.tweak-hero .dl-note {
  font-size: 11px;
  color: #777;
  margin-bottom: 6px;
  white-space: nowrap;
}

.tweak-hero .hero-images-clip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 0;
}

.tweak-hero .hero-image-right {
  position: absolute;
  right: -115px;
  top: -345px;
  width: 490px;
  height: auto;
  border: 0;
}

.tweak-hero .hero-image-left {
  position: absolute;
  left: -108px;
  bottom: -370px;
  width: 730px;
  height: auto;
  border: 0;
}

.tweak-hero .hero-widget {
  position: absolute;
  left: 50%;
  margin-left: -145px;
  top: 50%;
  margin-top: 84px;
  width: 290px;
  height: 490px;
  border: 0;
  z-index: 10;
}

/* --------------------------------------------------------------------------
   SPECS LIST (Compatibility panel)
   -------------------------------------------------------------------------- */
.specs {
  margin: 0;
  padding: 0;
}

.specs li {
  padding: 7px 0;
  border-top: 1px solid #e5e5e5;
  overflow: hidden;
  zoom: 1;
}

.specs li.first {
  border-top: 0;
}

.specs strong {
  float: left;
  width: 95px;
  color: #333;
  font-size: 12px;
}

.specs span {
  float: left;
  width: 240px;
  color: #666;
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   FEATURE STRIP (Icons row)
   -------------------------------------------------------------------------- */
.features-strip {
  margin: 0 0 15px;
  padding: 0;
  list-style: none;
  overflow: hidden;
  zoom: 1;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(rgba(255, 255, 255, 1)),
      to(rgba(237, 237, 237, 0.93)));
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
}

.features-strip li {
  float: left;
  width: 25%;
  padding: 9px 0;
  text-align: center;
  border-right: 1px solid #e0e0e0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.features-strip li.last {
  border-right: 0;
}

.features-strip .feature-icon {
  width: 40px;
  margin-bottom: 9px;
  margin-top: 2px;
}

.features-strip strong {
  display: block;
  font-size: 13px;
  color: #000;
  margin-bottom: 1px;
}

.features-strip span {
  font-size: 11px;
  color: #666;
}

/* --------------------------------------------------------------------------
   GRID LAYOUT (3-column row)
   -------------------------------------------------------------------------- */
.itunesbox-row {
  zoom: 1;
  margin-bottom: 15px;
  width: 100%;
}

.itunesbox-row:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.col-third {
  float: left;
  width: 32%;
  margin-left: 2%;
  height: 262px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.col-third.first {
  margin-left: 0;
}

/* Two-column fallback: fills remaining space when middle column missing */
.col-third.first+.itunesbox.col-third {
  float: none;
  margin-left: 34%;
  width: auto;
  height: 262px;
  /* Removed overflow:hidden - was causing scrollbar layout issues on iOS 6 */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   SPECS PANEL (Light card with white bg)
   -------------------------------------------------------------------------- */
.specs-panel {
  padding: 10px 15px;
  overflow: hidden;
  background: #fff;
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(#fff),
      to(#f2f2f2));
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
}

/* --------------------------------------------------------------------------
   ITUNESBOX (Dark card component)
   -------------------------------------------------------------------------- */
.itunesbox {
  overflow: visible;
  background: #1f1f1f;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px;
  box-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px;
}

/* Fix for iOS 6: itunesbox with scrollable changelog needs visible overflow
   to prevent scrollbar from shifting the entire card layout.
   Add class "itunesbox-changelog" to the itunesbox element. */
.itunesbox-changelog {
  overflow: visible;
}

/* Since parent is overflow:visible, header needs its own top border-radius */
.itunesbox .itunesbox-head {
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.itunesbox-head {
  position: relative;
  height: 32px;
  padding: 0 10px;
  border-bottom: 1px solid #1b1b1b;
  background-color: #525252;
  background-image: -webkit-gradient(linear,
      left top,
      left bottom,
      from(#a3a2a2),
      to(#6d6d6d));
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(#5a5a5a),
      color-stop(0.5, #424242),
      color-stop(0.5, #343434),
      to(#2a2a2a));
  background: -webkit-linear-gradient(#5a5a5a, #424242 50%, #343434 50%, #2a2a2a);
  background: linear-gradient(#5a5a5a, #424242 50%, #343434 50%, #2a2a2a);
  -webkit-box-shadow: inset rgba(255, 255, 255, 0.25) 0 1px 0;
  box-shadow: inset rgba(255, 255, 255, 0.25) 0 1px 0;
}

.itunesbox-title {
  float: left;
  margin: 0;
  padding: 0;
  margin-top: 7.3px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-shadow: rgba(0, 0, 0, 0.6) 0 -1px 0;
}

.itunesbox-body {
  padding: 14px 16px 16px;
  min-height: 180px;
  color: #d7d7d7;

  /* Match parent's rounded corners at bottom */
  -webkit-border-bottom-left-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;

  background: #2a2a2a;
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(#303030),
      to(#1f1f1f));
}

/* Hide scrollbar for iOS 4/WebKit */
.itunesbox-body::-webkit-scrollbar,
.changelog-body::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent;
}

.itunesbox-body .intro {
  color: #d7d7d7;
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   FEATURE TABS (Tab navigation for screenshots)
   -------------------------------------------------------------------------- */
.features-tabs {
  margin: 0;
  padding: 0;
  list-style: none;
  zoom: 1;
  height: 37px;
  background: #f2f2f2;
}

.features-tabs li {
  float: left;
  width: 25%;
  height: 37px;
  position: relative;
  border-right: 1px solid #d6d6d6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.features-tabs li.last {
  border-right: none;
}

.features-tabs li a {
  display: block;
  height: 37px;
  line-height: 37px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  color: #666;
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(#fff),
      to(#ececec));
}

.features-tabs li .pointer {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -9.5px;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #2f2f2f;
}

/* Active tab states */
#itunes #features-nav #fn-itunes a,
#photostream #features-nav #fn-photostream a,
#documents #features-nav #fn-documents a,
#ccm #features-nav #fn-ccm a {
  height: 37px;
  margin-bottom: -1px;
  border-bottom-color: #3a3a3a;
  color: #fff;
  cursor: default;
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(#999),
      to(#444));
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.52) inset;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.52) inset;
}

#itunes #fn-itunes .pointer,
#photostream #fn-photostream .pointer,
#documents #fn-documents .pointer,
#ccm #fn-ccm .pointer {
  display: block;
}

/* --------------------------------------------------------------------------
   FEATURE PANELS (Screenshot display area)
   -------------------------------------------------------------------------- */
.features-panels .panel {
  display: none;
  padding-top: 18px;
  overflow: hidden;
}

#itunes #panel-itunes,
#photostream #panel-photostream,
#documents #panel-documents,
#ccm #panel-ccm {
  display: block;
}

.features-panels img {
  display: absolute;
  height: 600px;
  left: 1px;
  border: 0;
  overflow: hidden;
}

.features .features-panels .panel {
  background: none !important;
  border: 0 !important;
  padding: 0;
  margin: 0;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  -webkit-border-radius: 0 !important;
  border-radius: 0 !important;
}

/* Screenshot container */
.screenshots-body {
  padding: 0;
  min-height: 217px;
  width: 100%;
}

.screenshots-body .features {
  margin: 0;
  width: 100%;
}

.screenshots-body .features-tabs {
  display: table;
  table-layout: fixed;
  width: 100%;
  position: relative;
  top: -1px;
}

.changelog-body {
  padding: 0;
  height: 230px;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  -webkit-border-bottom-left-radius: 7px;
  -webkit-border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  background: #2a2a2a;
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(#303030),
      to(#1f1f1f));
}

/* Changelog entry */
.changelog-entry {
  padding: 14px 16px;
  border-bottom: 1px solid #3a3a3a;
}

.changelog-entry:last-child {
  border-bottom: none;
}

.changelog-entry.current {
  background: #333;
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(#3a3a3a),
      to(#2d2d2d));
  background: -webkit-linear-gradient(#3a3a3a, #2d2d2d);
  background: linear-gradient(#3a3a3a, #2d2d2d);
}

/* Version header row */
.changelog-version {
  margin-bottom: 10px;
  overflow: hidden;
  zoom: 1;
}

/* Version badge */
.version-badge {
  display: inline-block;
  padding: 0.5px 4px;
  margin-right: 10px;
  font-size: 12px;
  font-weight: bold;
  color: #ccc;
  background: #444;
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(#555),
      to(#3a3a3a));
  background: -webkit-linear-gradient(#555, #3a3a3a);
  background: linear-gradient(#555, #3a3a3a);
  border: 1px solid #222;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-shadow: rgba(0, 0, 0, 0.5) 0 -1px 0;
}

.version-badge.current {
  color: #fff;
  background: #4a90d9;
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(#5da4e6),
      to(#3d7fc4));
  background: -webkit-linear-gradient(#5da4e6, #3d7fc4);
  background: linear-gradient(#5da4e6, #3d7fc4);
  border-color: #2a5a8a;
}

/* Version date */
.version-date {
  font-size: 11px;
  color: #888;
}

/* Latest tag */
.version-tag {
  float: right;
  padding: 0 4px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  background: #5cb85c;
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(#6dcf6d),
      to(#4cae4c));
  background: -webkit-linear-gradient(#6dcf6d, #4cae4c);
  background: linear-gradient(#6dcf6d, #4cae4c);
  border: 1px solid #3d8b3d;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0;
}

/* Changelog list items */
.changelog-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.changelog-list li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 16px;
  color: #bbb;
}

.changelog-list li:last-child {
  margin-bottom: 0;
}

.changelog-list li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #666;
}

.changelog-entry.current .changelog-list li {
  color: #ddd;
}

.changelog-entry.collapsed:hover {
  opacity: 1;
}

.panel-misctweaks {
  background: #fff;
}

.panel-misctweaks .carousel-container {
  margin: -17px -8px -10px;
  width: calc(100% + 16px);
  padding-bottom: 0;
}

.showcase-section {
  position: relative;
  padding: 0px 17px;
  overflow: hidden;
  zoom: 1;
}

.showcase-section:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.showcase-section.layout-image-left .showcase-image {
  float: left;
  width: 45%;
  text-align: center;
  padding-right: 3%;
}

.showcase-section.layout-image-left .showcase-text {
  float: right;
  width: 52%;
  text-align: left;
  padding-top: 30px;
}

.showcase-section.layout-image-right .showcase-image {
  float: right;
  width: 45%;
  text-align: center;
  padding-left: 3%;
}

.showcase-section.layout-image-right .showcase-text {
  float: left;
  width: 52%;
  text-align: left;
  padding-top: 30px;
}

.showcase-separator-horizontal {
  position: absolute;
  top: 260px;
  left: 60px;
  right: 60px;
  height: 1px;
  margin-top: -0.5px;
  z-index: 10;

  background: #d6d6d6;
  background: -webkit-gradient(linear,
      left top,
      right top,
      from(rgba(214, 214, 214, 0)),
      color-stop(0.1, rgba(214, 214, 214, 0.3)),
      color-stop(0.5, rgba(214, 214, 214, 0.8)),
      color-stop(0.9, rgba(214, 214, 214, 0.3)),
      to(rgba(214, 214, 214, 0)));
  background: -webkit-linear-gradient(left,
      rgba(214, 214, 214, 0) 0%,
      rgba(214, 214, 214, 0.3) 10%,
      rgba(214, 214, 214, 0.8) 50%,
      rgba(214, 214, 214, 0.3) 90%,
      rgba(214, 214, 214, 0) 100%);
  background: linear-gradient(to right,
      rgba(214, 214, 214, 0) 0%,
      rgba(214, 214, 214, 0.3) 10%,
      rgba(214, 214, 214, 0.8) 50%,
      rgba(214, 214, 214, 0.3) 90%,
      rgba(214, 214, 214, 0) 100%);
}

/* Shadow extending down from the line */
.showcase-separator-horizontal::after {
  content: "";
  position: absolute;
  top: 1px;
  left: -60px;
  right: -60px;
  height: 200px;
  background: url(../../assets/images/page-assets/shared/overview-divider-down.jpg) no-repeat center top;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: -1;
}

.showcase-image {
  position: relative;
  z-index: 2;
}

.showcase-image img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border: 0;

  -webkit-filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.15));
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.15));
}

/* Device screenshot sizing */
.showcase-image.size-phone img {
  margin-top: -60px;
  max-height: 390px;
  width: auto;
}

.showcase-image.size-tablet img {
  max-height: 350px;
  width: auto;
}

.showcase-image.size-wide img {
  max-width: 90%;
  height: auto;
}

.showcase-text {
  position: relative;
  z-index: 2;
}

.showcase-headline {
  font-family: "Myriad Set Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 34.5px !important;
  font-weight: 300 !important;
  line-height: 1.15 !important;
  color: #1d1d1f !important;
  letter-spacing: -0.6px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.showcase-headline strong {
  font-weight: 400 !important;
}

.showcase-body {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #666;
  margin: 0 0 18px;
}

.showcase-link {
  display: inline-block;
  font-size: 14px;
  color: #08c;
  text-decoration: none;
  padding-right: 14px;
  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSIxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMS40MTQgMEwwIDEuNDE0IDQuNTg2IDYgMCAxMC41ODYgMS40MTQgMTIgNy40MTQgNnoiIGZpbGw9IiMwMDg4Y2MiLz48L3N2Zz4=') no-repeat right center;
  background-size: 6px 10px;

  -webkit-transition: color 0.15s ease-out;
  transition: color 0.15s ease-out;
}

.showcase-link:hover {
  color: #005999;
  text-decoration: none;
}

.carousel-slide {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  width: 100%;
  min-width: 100%;
  min-height: 530px;
  text-align: center;
  padding: 10px 20px 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.carousel-dots {
  position: absolute;
  bottom: 12px;
  width: 100%;
  margin: 0;
  z-index: 100;
}

/* Top section - clips from container top to separator */
.showcase-section.layout-image-right {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: 220px;
  overflow: hidden;
  padding: 40px 30px;
}

.showcase-section.layout-image-left {
  position: absolute;
  top: 261px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding: 40px 30px;
}

.showcase-section {
  zoom: 1;
}

.showcase-section:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* Keep your existing layout styles */
.showcase-section.layout-image-right .showcase-image {
  float: right;
  width: 45%;
  text-align: center;
  padding-left: 3%;
}

.showcase-section.layout-image-right .showcase-text {
  float: left;
  width: 52%;
  text-align: left;
  padding-top: 30px;
}

.showcase-section.layout-image-left .showcase-image {
  float: left;
  text-align: center;
  padding-right: 3%;
}

.showcase-section.layout-image-left .showcase-text {
  float: right;
  width: 52%;
  text-align: left;
  padding-top: 30px;
}

.showcase-section.layout-image-left .showcase-image.size-phone img {
  margin-top: -80px;
}