/* ---------------------------------------------------------------------------
   One type scale for /software.
   Measured at 1280px before this: eleven different body sizes between 10.9px
   and 17.3px with no scale between them, the two main explainer paragraphs
   running to 96 and 99 characters a line, and three section headings (51px,
   55px, 58px) set larger than the page's own promise at 44px - the most
   important sentence on the page was the smallest of the four.

   Rules below: nothing that forms a sentence goes under 15px; section headings
   stay under the hero promise; prose stops near 66 characters.
--------------------------------------------------------------------------- */
.bible-software-page {
  --shine-lead: clamp(1.05rem, .35vw + .97rem, 1.15rem);
  --shine-body: clamp(1rem, .18vw + .96rem, 1.06rem);
  --shine-sub: .96rem;
  --shine-label: .76rem;
  --shine-measure: 66ch;
  --shine-h2: clamp(1.95rem, 3.1vw, 2.6rem);
  --shine-h3: clamp(1.28rem, 1.7vw, 1.62rem);
  --shine-h4: 1.3rem;
}

.shine-product-hero {
  display: grid;
  width: min(1480px, calc(100% - 48px));
  min-height: auto;
  grid-template-columns: minmax(460px, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(36px, 4vw, 64px);
  overflow: hidden;
  margin: 24px auto 0;
  padding: clamp(42px, 5vw, 68px);
  border: 1px solid #dbe2dd;
  border-radius: 32px;
  background: linear-gradient(135deg, #f8f7f2 0%, #f2f4ef 100%);
}

.shine-product-hero-copy {
  width: auto;
  max-width: 610px;
  align-self: center;
  margin: 0;
  padding: 0;
  text-align: left;
}

.shine-product-lockup {
  display: flex;
  justify-content: flex-start;
}

.shine-product-lockup h1 {
  display: flex;
  align-items: baseline;
  gap: .36em;
  margin: 0;
  color: #17221d;
  font-size: clamp(1.65rem, 2.7vw, 2.45rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.shine-product-lockup h1 small {
  font: inherit;
  font-size: .56em;
  font-weight: 780;
  letter-spacing: .16em;
}

.shine-product-eyebrow {
  margin-top: 20px;
  color: #08785c;
}

.shine-product-promise {
  max-width: 590px;
  margin: 14px 0 0;
  color: #17221d;
  font: 720 clamp(2.6rem, 3.45vw, 4rem)/1.02 Arial, Helvetica, sans-serif;
  letter-spacing: -.048em;
}

.shine-product-hero-copy > p.shine-product-intro {
  max-width: 610px;
  margin: 18px 0 0;
  color: #34463d;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.62;
}

.shine-free-promise {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid #c7d9cf;
  border-left: 3px solid #08785c;
  border-radius: 12px;
  background: rgba(255, 255, 255, .78);
  color: #264137;
  text-align: left;
}

.shine-free-promise > span {
  color: #08785c;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.shine-free-promise strong { color: #17221d; font-size: .95rem; }
.shine-free-promise p { margin: 4px 0 0; color: #64746c; font-size: .81rem; line-height: 1.5; }

.shine-guide-cta {
  display: grid;
  width: 100%;
  min-height: 62px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 16px 0 0;
  padding: 9px 13px;
  border: 1px solid #cbdad3;
  border-radius: 16px;
  background: rgba(255, 255, 255, .74);
  color: #173b61;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(27, 52, 41, .07);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.shine-guide-cta:hover {
  border-color: #77aa96;
  box-shadow: 0 16px 34px rgba(27, 52, 41, .11);
  transform: translateY(-2px);
}

.shine-guide-cta:focus-visible {
  outline: 3px solid rgba(23, 59, 97, .26);
  outline-offset: 4px;
}

.shine-guide-cta > span:not(.shine-guide-icon) {
  display: grid;
  gap: 3px;
}

.shine-guide-cta small {
  color: #668075;
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.shine-guide-cta strong {
  font-size: .98rem;
  line-height: 1.3;
}

.shine-guide-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: #173b61;
  color: #fff;
}

.shine-guide-icon svg,
.shine-guide-cta > svg {
  width: 20px;
  height: 20px;
}

.shine-download-heading {
  margin-top: 24px;
  text-align: left;
}

.shine-platform-downloads {
  display: grid;
  max-width: none;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
  margin-top: 13px;
}

.shine-platform-download {
  display: grid;
  min-height: 88px;
  grid-template-columns: 42px minmax(0, 1fr) 34px;
  align-items: center;
  border-radius: 15px;
  gap: 11px;
  padding: 12px;
}

.shine-platform-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.shine-platform-action {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.shine-platform-copy strong {
  display: block;
  font-size: 1rem;
  line-height: 1.18;
}

/* The app is a branded destination, not a third computer installer. */
.shine-platform-download.is-mobile {
  grid-column: 1 / -1;
  min-height: 108px;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 158px);
  gap: 18px;
  padding: 13px 16px;
  background: linear-gradient(105deg, #071f3e, #0d4777);
  color: #fff;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .28), 0 12px 28px rgba(13, 71, 119, .22);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.shine-platform-download.is-mobile:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22), 0 16px 34px rgba(17, 90, 142, .28);
}

.shine-mobile-brand {
  display: grid;
  min-width: 0;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.shine-mobile-logo {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .24);
}

.shine-platform-download.is-mobile .shine-platform-copy small {
  color: #7fe7ff;
}

.shine-platform-download.is-mobile .shine-platform-copy > span {
  color: rgba(255, 255, 255, .76);
}

.shine-platform-store-badge {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7px;
  justify-self: end;
}

.shine-platform-download.is-android {
  grid-column: 1 / -1;
  min-height: 108px;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 158px);
  gap: 18px;
  padding: 13px 16px;
  background: linear-gradient(105deg, #185e47, #16805b);
  color: #fff;
  text-decoration: none;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2), 0 12px 28px rgba(19, 103, 74, .19);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.shine-platform-download.is-android:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16), 0 16px 34px rgba(19, 103, 74, .25);
}

.shine-platform-download.is-android .shine-platform-copy small {
  color: #b6f2d0;
}

.shine-platform-android-badge {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  justify-self: end;
  border: 1px solid #aeb8b0;
  border-radius: 7px;
  background: #0a100c;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.shine-platform-android-badge .shine-android-robot {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  color: #76df9e;
}

.shine-platform-android-badge > span {
  display: grid;
  gap: 0;
  text-align: left;
}

.shine-platform-android-badge small {
  font-size: .55rem;
  font-weight: 750;
  letter-spacing: .08em;
  line-height: 1.1;
}

.shine-platform-android-badge strong {
  font-size: 1.26rem;
  font-weight: 700;
  line-height: 1.05;
}

.shine-platform-download.is-android:focus-visible,
.shine-android-primary:focus-visible,
.shine-android-back:focus-visible { outline: 3px solid #a8e8bd; outline-offset: 3px; }

.bible-android-page { background: #f8faf7; }

.shine-android-main {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 80px;
}

.shine-android-breadcrumb,
.shine-android-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #436956;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}

.shine-android-breadcrumb a { color: inherit; text-decoration: none; }
.shine-android-breadcrumb a:hover,
.shine-android-back:hover { text-decoration: underline; }
.shine-android-breadcrumb svg,
.shine-android-back svg { width: 16px; height: 16px; }

.shine-android-hero {
  position: relative;
  display: grid;
  min-height: 360px;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: center;
  gap: 35px;
  overflow: hidden;
  margin-top: 20px;
  padding: clamp(30px, 5vw, 58px);
  border-radius: 28px;
  background: radial-gradient(circle at 85% 10%, rgba(155, 240, 181, .27), transparent 35%), linear-gradient(125deg, #102d24, #116143);
  color: #fff;
  box-shadow: 0 25px 45px rgba(12, 75, 50, .17);
}

.shine-android-hero-copy { position: relative; z-index: 1; max-width: 650px; }
.shine-android-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #aeedc5; font-size: .75rem; font-weight: 850; letter-spacing: .1em; }
.shine-android-eyebrow svg { width: 18px; height: 18px; }
.shine-android-hero h1 { margin: 17px 0 12px; font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 1.02; letter-spacing: -.05em; }
.shine-android-hero p { max-width: 52ch; margin: 0; color: rgba(255, 255, 255, .84); font-size: clamp(1rem, 1.5vw, 1.17rem); line-height: 1.6; }
.shine-android-hero-copy > small { display: block; margin-top: 14px; color: rgba(255, 255, 255, .72); font-size: .78rem; }

.shine-android-primary {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding: 0 20px;
  border-radius: 13px;
  background: #b9f7c9;
  color: #123b28;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .16);
  transition: background 180ms ease, transform 180ms ease;
}

.shine-android-primary:hover { background: #dbffe2; transform: translateY(-2px); }
.shine-android-primary svg { width: 20px; height: 20px; }
.shine-android-primary .shine-android-robot { width: 25px; height: 25px; flex: 0 0 25px; color: #176e4c; }
.shine-android-hero-mark { display: grid; width: 190px; height: 190px; justify-self: center; place-content: center; gap: 12px; border: 1px solid rgba(218, 255, 227, .43); border-radius: 48px; background: rgba(255, 255, 255, .09); text-align: center; transform: rotate(-8deg); box-shadow: 0 20px 40px rgba(0, 0, 0, .12); }
.shine-android-hero-mark img { display: block; width: 132px; height: 132px; border-radius: 31px; box-shadow: 0 16px 28px rgba(0, 0, 0, .24); }

.shine-android-steps { margin-top: 64px; }
.shine-android-section-heading > span { color: #16805b; font-size: .75rem; font-weight: 850; letter-spacing: .13em; }
.shine-android-section-heading h2 { margin: 7px 0 12px; color: #172b20; font-size: clamp(2rem, 3.3vw, 2.7rem); letter-spacing: -.04em; }
.shine-android-section-heading > p { max-width: 72ch; margin: 0 0 24px; color: #516557; line-height: 1.6; }
.shine-android-steps ol { display: grid; max-width: 920px; padding: 0; list-style: none; }
.shine-android-steps li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 20px; padding: 22px 4px; border-top: 1px solid #dbe8df; }
.shine-android-steps li:last-child { border-bottom: 1px solid #dbe8df; }
.shine-android-step-number { display: inline-grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: #e2f6e9; color: #126747; font-weight: 900; }
.shine-android-steps h3 { margin: 0 0 6px; color: #1b3427; font-size: 1.15rem; }
.shine-android-steps p { max-width: 78ch; margin: 0; color: #516557; font-size: .95rem; line-height: 1.65; }
.shine-android-help { margin-top: 54px; }
.shine-android-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 26px; }
.shine-android-help article { padding-top: 18px; border-top: 3px solid #16805b; }
.shine-android-help h3 { margin: 0 0 8px; color: #1b3427; font-size: 1.08rem; }
.shine-android-help p { margin: 0; color: #516557; font-size: .94rem; line-height: 1.65; }
.shine-android-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 38px; padding: 27px; border: 1px solid #cfe0d3; border-radius: 18px; background: #f0f7f0; }
.shine-android-details > div { display: flex; align-items: flex-start; gap: 13px; }
.shine-android-details svg { flex: 0 0 23px; width: 23px; height: 23px; color: #16805b; }
.shine-android-details h2 { margin: 0 0 8px; color: #1b3427; font-size: 1.06rem; }
.shine-android-details p { margin: 0; color: #526759; font-size: .9rem; line-height: 1.65; }
.shine-android-integrity { margin: 24px 0 30px; color: #697c6f; font-size: .72rem; line-height: 1.6; }
.shine-android-integrity code { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .shine-android-hero { grid-template-columns: 1fr; }
  .shine-android-hero-mark { display: none; }
  .shine-android-help-grid, .shine-android-details { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .shine-android-main { width: min(100% - 28px, 1080px); padding-bottom: 48px; }
  .shine-android-hero { min-height: 0; border-radius: 20px; }
  .shine-android-primary { width: 100%; justify-content: center; padding-inline: 12px; font-size: .9rem; }
  .shine-android-primary svg:last-child { display: none; }
  .shine-android-steps { margin-top: 46px; }
  .shine-android-details { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .shine-platform-download.is-android,
  .shine-android-primary { transition: none; }
}

.shine-product-hero-links {
  justify-content: flex-start;
  align-items: center;
  gap: 18px;
  margin-top: 13px;
}

.shine-benefits-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #08785c;
  font-size: .8rem;
  font-weight: 820;
  text-decoration: none;
}

.shine-benefits-link:hover { color: #075f4a; text-decoration: underline; text-underline-offset: 4px; }
.shine-benefits-link:focus-visible { outline: 3px solid rgba(8, 120, 92, .22); outline-offset: 4px; }
.shine-benefits-link svg { width: 15px; height: 15px; }
.shine-benefits-link span { font-size: 1rem; line-height: 1; }

.shine-product-hero-visual {
  position: relative;
  display: grid;
  width: auto;
  min-width: 0;
  min-height: 560px;
  align-content: center;
  margin: 0;
  padding: clamp(28px, 3vw, 48px);
  overflow: hidden;
  border: 1px solid #d9e1e8;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 24px 62px rgba(21, 46, 72, .08);
}

.shine-product-hero-visual img {
  width: 100%;
  max-width: 920px;
  justify-self: center;
  filter: drop-shadow(0 26px 34px rgba(22, 45, 67, .18));
}

.shine-product-hero-visual figcaption {
  position: absolute;
  bottom: 22px;
  left: 50%;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.shine-product-hero-visual figcaption span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid #d4dde4;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #173b61;
  font-size: .72rem;
  font-weight: 780;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(25, 49, 73, .1);
}

.shine-product-hero-visual figcaption svg {
  width: 15px;
  height: 15px;
  color: #08785c;
}

.shine-feature-nav {
  position: sticky;
  z-index: 8;
  top: 68px;
  display: flex;
  width: 100%;
  min-height: 68px;
  align-items: center;
  gap: 20px;
  padding: 9px max(20px, calc((100vw - 1380px) / 2));
  border-block: 1px solid #d5ddd8;
  background: rgba(250, 250, 247, .94);
  box-shadow: 0 8px 24px rgba(18, 35, 27, .05);
  backdrop-filter: blur(14px);
}

.shine-feature-nav > strong {
  flex: 0 0 auto;
  color: #17221d;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.shine-feature-nav > div {
  display: flex;
  min-width: 0;
  flex: 1;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.shine-feature-nav > div::-webkit-scrollbar { display: none; }

.shine-feature-nav a {
  display: inline-flex;
  min-height: 42px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border-radius: 10px;
  color: #4f6258;
  font-size: .78rem;
  font-weight: 760;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.shine-feature-nav a:hover,
.shine-feature-nav a:focus-visible { background: #e7f2ed; color: #08785c; transform: translateY(-1px); }
.shine-feature-nav svg { width: 17px; height: 17px; }

#compatibility,
#ultra,
#products,
#workflow,
#bible,
#tools,
#showcase,
#mobile { scroll-margin-top: 150px; }

.shine-commerce-overview {
  width: min(1380px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(74px, 8vw, 112px) 0;
  border-bottom: 1px solid #d9e0dc;
}

.shine-plans-heading { max-width: 860px; }
.shine-plans-heading h2,
.shine-store-catalog > header h2 {
  margin: 0;
  color: #17221d;
  font: 730 clamp(2.5rem, 4.4vw, 4.6rem)/.99 Arial, Helvetica, sans-serif;
  letter-spacing: -.052em;
}

.shine-plans-heading > p:last-child,
.shine-store-catalog > header > p:last-child {
  max-width: 760px;
  margin: 22px 0 0;
  color: #596b61;
  font-size: 1.04rem;
  line-height: 1.68;
}

.shine-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  margin-top: 46px;
  border: 1px solid #cad5cf;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(23, 59, 45, .08);
  overflow: hidden;
}

.shine-plan {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 520px;
  padding: 34px 30px 28px;
  flex-direction: column;
  color: #17221d;
}

.shine-plan + .shine-plan { border-left: 1px solid #d9e0dc; }
.shine-plan.is-recommended { background: #123d31; color: #fff; }
.shine-plan.is-recommended::before { position: absolute; inset: 0 0 auto; height: 5px; background: #8dd8bb; content: ""; }
.shine-plan-name { display: flex; min-height: 29px; align-items: center; justify-content: space-between; gap: 12px; }
.shine-plan-name > strong { font-size: 1.14rem; letter-spacing: -.02em; }
.shine-plan-name > span { padding: 5px 8px; border-radius: 999px; background: #dff5ec; color: #123d31; font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.shine-plan.is-ultra-tier .shine-plan-name > strong { display: inline-flex; align-items: center; gap: 7px; color: #9a6900; }
.shine-ultra-crown { color: #d49a13; font-size: 1.2em; line-height: 1; }
.shine-plan-price { display: flex; min-height: 82px; margin-top: 18px; align-items: baseline; gap: 9px; }
.shine-plan-price > b { font: 760 clamp(2.5rem, 4vw, 4rem)/.95 Arial, Helvetica, sans-serif; letter-spacing: -.065em; }
.shine-plan-price > span { max-width: 150px; color: #6b7971; font-size: .72rem; font-weight: 750; line-height: 1.35; }
.shine-plan.is-recommended .shine-plan-price > span { color: #dceee7; }
.shine-plan-note { min-height: 48px; margin: 0; color: #5d6e65; font-size: .88rem; line-height: 1.52; }
.shine-plan.is-recommended .shine-plan-note { color: rgba(255, 255, 255, .74); }
.shine-plan-inherits { margin: 22px 0 0; color: #173b61; font-size: .74rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.shine-plan.is-recommended .shine-plan-inherits { color: #a9e5cf; }
.shine-plan ul { display: grid; margin: 22px 0 30px; padding: 0; gap: 14px; list-style: none; }
.shine-plan li { display: grid; grid-template-columns: 19px minmax(0, 1fr); gap: 9px; color: #34463d; font-size: .84rem; line-height: 1.45; }
.shine-plan-check { color: #08785c; font-size: 1rem; font-weight: 950; line-height: 1.2; }
.shine-plan li a { color: inherit; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(8, 120, 92, .35); text-underline-offset: 3px; }
.shine-plan li a:hover { text-decoration-color: currentColor; }
.shine-plan-feature-emphasis strong { color: #075f4a; font-weight: 900; }
.shine-plan.is-recommended li { color: rgba(255, 255, 255, .9); }
.shine-plan.is-recommended .shine-plan-check { color: #a9e5cf; }
.shine-plan.is-recommended li a { text-decoration-color: rgba(169, 229, 207, .55); }
.shine-plan-action > a,
.shine-store-product > div > a {
  display: inline-flex;
  width: fit-content;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 0 14px;
  border-radius: 10px;
  background: #168b62;
  color: #fff;
  font-size: .82rem;
  font-weight: 850;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}

.shine-plan-action > a:hover,
.shine-store-product > div > a:hover { background: #0f704e; transform: translateY(-1px); }
.shine-plan-action > a:focus-visible,
.shine-store-product > div > a:focus-visible { outline: 3px solid rgba(29, 128, 92, .25); outline-offset: 4px; }
.shine-plan-action { display: grid; margin-top: auto; gap: 10px; }
.shine-plan-action > a { width: 100%; min-height: 48px; justify-content: center; }
.shine-plan.is-recommended .shine-plan-action > a { background: #fff; color: #123d31; }
.shine-plan.is-recommended .shine-plan-action > a:hover { background: #eaf7f2; }
.shine-plan-action > a svg,
.shine-store-product > div > a svg { width: 16px; height: 16px; }
.shine-plan-action > small { min-height: 1em; color: #66776e; font-size: .68rem; font-weight: 750; text-align: center; }
.shine-plan.is-recommended .shine-plan-action > small { color: rgba(255, 255, 255, .7); }
.shine-plan-footnote { max-width: 820px; margin: 21px 0 0; color: #66776e; font-size: .78rem; line-height: 1.55; }

.shine-store-catalog {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(74px, 8vw, 112px) 0;
}

.shine-store-catalog > header { max-width: 900px; }

/* Five plugins used to occupy 3,900px as full-width alternating rows, each
   heading set at up to 55px - a catalogue you scroll past rather than compare.
   As a grid the five are visible together, and each thumbnail opens full size. */
/* Three across at most: a wider card keeps each plugin thumbnail large enough
   to recognise before anyone clicks to read it. */
.shine-store-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
  margin-top: 42px;
}

.shine-store-product {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #d9e0dc;
  border-radius: 20px;
  background: #fff;
}

.shine-store-product figure { margin: 0; padding: 14px 14px 0; }
.shine-store-product figure .shine-shot { border-radius: 12px; }
/* Letterboxed rather than cropped: the plugin dialogs are different shapes and
   none of them should lose an edge in a uniform card. */
.shine-store-product figure img { aspect-ratio: 16 / 10; object-fit: contain; background: #eef3ef; }
.shine-store-product > div { display: grid; align-content: start; max-width: none; padding: 18px 20px 22px; }
.shine-store-product h3 { margin: 0; color: #173b61; font: 750 var(--shine-h4)/1.16 Arial, Helvetica, sans-serif; letter-spacing: -.025em; }
.shine-store-product > div > p { margin: 10px 0 0; color: #5d6e65; font-size: var(--shine-sub); line-height: 1.6; }
.shine-store-product dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0 0; border-block: 1px solid #d9e0dc; }
.shine-store-product dl div { display: grid; gap: 4px; padding: 12px 10px 12px 0; }
.shine-store-product dl div + div { padding-left: 12px; border-left: 1px solid #d9e0dc; }
.shine-store-product dt { color: #6c7a72; font-size: var(--shine-label); font-weight: 850; letter-spacing: .07em; line-height: 1.35; text-transform: uppercase; }
.shine-store-product dd { margin: 0; color: #17221d; font-size: .96rem; font-weight: 800; }

.shine-store-access-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid #d9e0dc; }
.shine-store-access-notes article { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; padding: 25px 26px 25px 0; }
.shine-store-access-notes article + article { padding-left: 26px; border-left: 1px solid #d9e0dc; }
.shine-store-access-notes svg { width: 22px; height: 22px; color: #08785c; }
.shine-store-access-notes strong { color: #173b61; font-size: .94rem; }
.shine-store-access-notes p { margin: 5px 0 0; color: #66776e; font-size: .84rem; line-height: 1.55; }

.shine-product-main .shine-system-support { padding-block: clamp(48px, 5.5vw, 74px); }
.shine-purpose-workflow { padding-block: clamp(62px, 7vw, 94px); }

.shine-purpose-workflow {
  display: block;
  width: min(1380px, calc(100% - 40px));
}

.shine-purpose-workflow .shine-purpose-copy h2 {
  max-width: 900px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(2.5rem, 4.3vw, 4.5rem);
  font-weight: 760;
  letter-spacing: -.055em;
  line-height: .98;
}

.shine-purpose-workflow .shine-purpose-copy > p:not(.bible-kicker) {
  max-width: 780px;
  margin: 24px 0 0;
  color: #56675e;
  font-size: 1.04rem;
  line-height: 1.72;
}

.shine-purpose-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 32px;
  border-block: 1px solid #d9e0dc;
}

.shine-purpose-points article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 19px 0;
}

.shine-purpose-points article + article {
  border-left: 1px solid #d9e0dc;
}

.shine-purpose-points article:not(:first-child) { padding-left: 22px; }
.shine-purpose-points article:not(:last-child) { padding-right: 22px; }

.shine-purpose-points article > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: #eaf3ee;
  color: #08785c;
}

.shine-purpose-points article:last-child > span {
  background: #173b61;
  color: #fff;
}

.shine-purpose-points svg {
  width: 20px;
  height: 20px;
}

.shine-purpose-points strong {
  color: #17221d;
  font-size: .98rem;
}

.shine-purpose-points article p {
  margin: 5px 0 0;
  color: #64746c;
  font-size: .9rem;
  line-height: 1.58;
}

.shine-purpose-guide {
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 12px 15px;
  border: 1px solid #cad8d1;
  border-radius: 13px;
  background: #fff;
  color: #173b61;
  font-size: .88rem;
  font-weight: 780;
  text-decoration: none;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.shine-purpose-guide:hover {
  border-color: #78a995;
  box-shadow: 0 12px 28px rgba(23, 59, 97, .09);
  transform: translateY(-2px);
}

.shine-purpose-guide:focus-visible {
  outline: 3px solid rgba(23, 59, 97, .25);
  outline-offset: 3px;
}

.shine-purpose-guide svg {
  width: 18px;
  height: 18px;
}

.shine-purpose-demo {
  position: static;
  min-width: 0;
  margin-top: 44px;
}

.shine-bible-depth {
  width: min(1380px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(70px, 8vw, 108px) 0;
  border-top: 1px solid #d9e0dc;
}

.shine-bible-depth > header { max-width: 920px; }
.shine-bible-depth h2 {
  max-width: 840px;
  margin: 0;
  color: #17221d;
  font: 720 clamp(2.45rem, 4.5vw, 4.8rem)/1 Arial, Helvetica, sans-serif;
  letter-spacing: -.052em;
}
.shine-bible-depth > header > p:last-child { max-width: 820px; margin: 22px 0 0; color: #5b6d63; font-size: 1.02rem; line-height: 1.7; }

.shine-bible-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, .55fr);
  align-items: stretch;
  gap: 0;
  margin-top: 38px;
  border-block: 1px solid #d8dfda;
}

.shine-bible-main-visual { margin: 0; padding: 24px 30px 24px 0; border-right: 1px solid #d8dfda; }
.shine-bible-main-visual img { display: block; width: 100%; border: 1px solid #d8dfda; box-shadow: 0 18px 44px rgba(23, 40, 31, .09); }
.shine-bible-main-visual figcaption { margin-top: 10px; color: #6b7971; font-size: .77rem; }

.shine-bible-methods { display: grid; align-content: center; }
.shine-bible-methods article { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; padding: 16px 0 16px 24px; }
.shine-bible-methods article + article { border-top: 1px solid #e0e5e2; }
.shine-bible-methods svg { width: 20px; color: #08785c; }
.shine-bible-methods div { display: grid; gap: 4px; }
.shine-bible-methods strong { color: #17221d; font-size: .9rem; }
.shine-bible-methods span { color: #68776f; font-size: .8rem; line-height: 1.48; }

.shine-bible-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.shine-bible-proof figure { margin: 0; overflow: hidden; border: 1px solid #d8dfda; background: #fff; }
.shine-bible-proof img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.shine-bible-proof figcaption { display: grid; grid-template-columns: auto 1fr; gap: 15px; padding: 13px 15px; color: #68776f; font-size: .78rem; }
.shine-bible-proof figcaption strong { color: #173b61; }

.shine-feature-story article { gap: clamp(34px, 5vw, 72px); padding: clamp(54px, 6vw, 82px) 0; }
.shine-feature-story h2 { font-family: Arial, Helvetica, sans-serif; font-size: clamp(2rem, 3.3vw, 3.45rem); font-weight: 720; letter-spacing: -.045em; }
.shine-feature-story article p:not(.bible-kicker) { margin-top: 15px; font-size: .98rem; line-height: 1.66; }

.shine-system-depth { padding: clamp(64px, 7vw, 96px) 0; }
.shine-system-depth > header { margin-bottom: 34px; }
.shine-system-depth h2 { max-width: 900px; font-family: Arial, Helvetica, sans-serif; font-size: clamp(2.35rem, 4vw, 4.2rem); font-weight: 720; letter-spacing: -.05em; }
.shine-system-depth-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shine-system-depth-list > div { grid-template-columns: 34px minmax(0, 1fr); padding: 22px 20px; }
.shine-system-depth-list > div + div { border-left: 0; }
.shine-system-depth-list > div:nth-child(even) { border-left: 1px solid #d9e0dc; }
.shine-system-depth-list > div:nth-child(n + 3) { border-top: 1px solid #d9e0dc; }
.shine-system-depth-list > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; }

.shine-product-showcase {
  width: min(1180px, calc(100% - 40px));
  padding: clamp(64px, 7vw, 96px) 0;
}

.shine-product-showcase > header {
  max-width: 760px;
  margin-bottom: 28px;
}

.shine-product-showcase h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(2.35rem, 3.7vw, 3.8rem);
  font-weight: 720;
  letter-spacing: -.045em;
  line-height: 1.02;
}

.shine-product-showcase > header > p:not(.bible-kicker) {
  max-width: 650px;
  margin-top: 16px;
  font-size: 1.04rem;
  line-height: 1.6;
}

/* The walkthrough was a five-second carousel in a fixed 470-560px tall frame:
   two of the three views were always hidden, and the visible one sat at about
   half its own pixel width beside a caption panel. It is now three open bands,
   each screenshot as wide as the column allows. */
.shine-tour {
  display: grid;
  gap: clamp(30px, 4vw, 54px);
  margin-top: 8px;
}

.shine-tour-step {
  display: grid;
  gap: 18px;
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid #d9e0dc;
}

.shine-tour-step:first-child {
  padding-top: 0;
  border-top: 0;
}

.shine-tour-copy { max-width: var(--shine-measure); }

.shine-tour-label {
  display: inline-flex;
  margin: 0;
  align-items: center;
  gap: 8px;
  color: #08785c;
  font-size: var(--shine-label);
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.shine-tour-label svg { width: 16px; height: 16px; }

.shine-tour-copy h3 {
  margin: 11px 0 0;
  color: #17221d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--shine-h3);
  font-weight: 720;
  letter-spacing: -.03em;
  line-height: 1.14;
  text-wrap: balance;
}

.shine-tour-copy > p {
  margin: 12px 0 0;
  max-width: var(--shine-measure);
  color: #56675e;
  font-size: var(--shine-body);
  line-height: 1.68;
}

.shine-tour-figure { margin: 0; }

/* The Mobile App view is a 720 x 1560 phone capture. It gets a phone-shaped
   frame beside its copy instead of being cropped into the landscape box the
   two desktop views use. */
.shine-tour-step.is-portrait {
  grid-template-columns: minmax(240px, .95fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 58px);
}

.shine-tour-step.is-portrait .shine-tour-figure { justify-self: center; }

/* ---------------------------------------------------------------------------
   Screenshots open at full size.
   A 1600px-wide capture of the program laid out at 400-600px renders the
   program's own text about three pixels tall, so the reader can tell something
   is there and nothing more. Every screenshot is a button, and the file's real
   dimensions are on the <img> so its box is reserved before it decodes.
--------------------------------------------------------------------------- */
.shine-shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d7dfda;
  border-radius: 18px;
  background: #eef3ef;
  cursor: zoom-in;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.shine-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shine-shot:hover {
  border-color: #08785c;
  box-shadow: 0 18px 44px rgba(23, 40, 31, .16);
  transform: translateY(-2px);
}

.shine-shot:focus-visible {
  outline: 3px solid rgba(8, 120, 92, .42);
  outline-offset: 3px;
}

.shine-shot.is-portrait {
  width: min(100%, 320px);
  margin-inline: auto;
  border-radius: 26px;
}

.shine-shot-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(10, 30, 22, .84);
  color: #fff;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.shine-shot-hint svg { width: 15px; height: 15px; }

.shine-shot:hover .shine-shot-hint,
.shine-shot:focus-visible .shine-shot-hint {
  opacity: 1;
  transform: none;
}

/* Touch has no hover state, so the zoom stays visible or nobody finds it. */
@media (hover: none) {
  .shine-shot-hint { opacity: 1; transform: none; }
  .shine-shot:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shine-shot,
  .shine-shot-hint { transition: none; }
  .shine-shot:hover { transform: none; }
}

.shine-shot-viewer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  padding: clamp(14px, 3vw, 44px);
  place-items: center;
  background: rgba(6, 16, 12, .9);
  overscroll-behavior: contain;
}

.shine-shot-viewer[hidden] { display: none; }
html.has-shot-open { overflow: hidden; }

.shine-shot-viewer-frame {
  display: grid;
  max-width: 100%;
  max-height: 100%;
  gap: 14px;
  justify-items: center;
}

.shine-shot-viewer-frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .52);
}

.shine-shot-viewer-caption {
  max-width: 68ch;
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: .94rem;
  line-height: 1.5;
  text-align: center;
}

.shine-shot-viewer-close {
  position: absolute;
  top: clamp(10px, 2vw, 24px);
  right: clamp(10px, 2vw, 24px);
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.shine-shot-viewer-close:hover { background: rgba(255, 255, 255, .2); }
.shine-shot-viewer-close:focus-visible { outline: 3px solid #7fd4b4; outline-offset: 3px; }
.shine-product-final { grid-template-columns: minmax(280px, .56fr) minmax(0, 1fr); padding-block: clamp(56px, 7vw, 86px); }
/* The landing artwork is a tall poster that already carries its own headline,
   subtitle and feature pills. Showing the whole thing repeated the message the
   copy beside it states, and left the real phone UI small inside a giant
   vertical column. The visual below is a window cropped to the phone, so the
   screenshot is never regenerated or stretched - only masked. */
.shine-mobile-feature { position: relative; overflow: hidden; align-items: center; border-radius: 30px; background: radial-gradient(circle at 18% 18%, rgba(35, 145, 255, .25), transparent 32%), linear-gradient(135deg, #061a36 0%, #082957 58%, #0b4480 100%); color: #fff; }
.shine-mobile-feature { grid-template-columns: minmax(0, .46fr) minmax(0, 1fr); }
.shine-mobile-feature::after { position: absolute; right: -12%; bottom: -48%; width: 540px; height: 540px; border: 1px solid rgba(77, 174, 255, .22); border-radius: 50%; content: ""; pointer-events: none; }
.shine-mobile-feature-visual { position: relative; z-index: 1; display: block; width: min(100%, 320px); aspect-ratio: 37 / 70; justify-self: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); border-radius: 28px; background: #071c3e; box-shadow: 0 34px 70px rgba(0, 0, 0, .34); transition: transform 160ms ease, box-shadow 160ms ease; }
.shine-mobile-feature-visual:hover { transform: translateY(-3px); box-shadow: 0 40px 82px rgba(0, 0, 0, .4); }
.shine-mobile-feature-visual:focus-visible { outline: 3px solid #52b7ff; outline-offset: 5px; }
/* 943x1637 poster, cropped to the phone at x 98..653, y 505..1555. The width is
   943/555 of the window; the offsets are those pixels expressed against the
   scaled image's own box, which is what a percentage translate resolves
   against. Tuned on screenshots so the device sits centred in the window. */
.shine-mobile-feature-visual img { position: absolute; top: 0; left: 0; display: block; width: 169.9%; height: auto; max-width: none; transform: translate(-10.4%, -30.9%); }
.shine-mobile-feature-copy { position: relative; z-index: 1; }
.shine-mobile-feature .bible-kicker { color: #55b9ff; }
.shine-product-final h2 { max-width: 760px; font-family: Arial, Helvetica, sans-serif; font-size: clamp(2.4rem, 4vw, 4.25rem); font-weight: 720; letter-spacing: -.05em; }
.shine-mobile-feature-copy > p:not(.bible-kicker) { max-width: 690px; color: rgba(255, 255, 255, .8); line-height: 1.7; }
.shine-mobile-feature-actions { display: flex; margin-top: 28px; align-items: center; flex-wrap: wrap; gap: 20px; }
.shine-app-store-badge { display: inline-flex; width: 190px; max-width: 100%; border-radius: 12px; transition: transform 160ms ease, box-shadow 160ms ease; }
.shine-app-store-badge:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .25); }
.shine-app-store-badge:focus-visible { outline: 3px solid #52b7ff; outline-offset: 5px; }
.shine-app-store-badge img { display: block; width: 100%; height: auto; }
.shine-mobile-feature .bible-account-link { color: #fff; }

.shine-purpose-demo figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid #d7dfda;
  border-radius: 20px 20px 0 0;
  background: #fff;
  box-shadow: 0 30px 70px rgba(23, 40, 31, .12);
}

.shine-purpose-demo img {
  display: block;
  width: 100%;
  height: auto;
}

.shine-purpose-demo figcaption {
  padding: 13px 17px;
  color: #51655b;
  background: #fff;
  font-size: .8rem;
  line-height: 1.45;
}

.shine-purpose-action-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #d7dfda;
  border-top: 0;
  border-radius: 0 0 20px 20px;
  background: #f5f7f5;
}

.shine-purpose-action-rail span {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #617168;
}

.shine-purpose-action-rail span + span {
  border-left: 1px solid #d7dfda;
}

.shine-purpose-action-rail svg {
  width: 18px;
  height: 18px;
}

.shine-purpose-action-rail small {
  font-size: .73rem;
  font-weight: 820;
}

.shine-purpose-action-rail .is-send {
  color: #fff;
  background: #173b61;
}

@media (prefers-reduced-motion: no-preference) {
  .shine-product-lockup,
  .shine-product-promise,
  .shine-product-intro,
  .shine-product-remote-intro,
  .shine-guide-cta,
  .shine-platform-downloads {
    animation: shine-download-rise .48s both;
  }

  .shine-free-promise { animation: shine-download-rise .48s 130ms both; }

  .shine-product-intro { animation-delay: 70ms; }
  .shine-product-promise { animation-delay: 45ms; }
  .shine-product-remote-intro { animation-delay: 110ms; }
  .shine-guide-cta { animation-delay: 150ms; }
  .shine-platform-downloads { animation-delay: 190ms; }
  .shine-product-hero-visual { animation: shine-product-arrive .65s .16s both; }
  .shine-purpose-action-rail span { animation: shine-workflow-step 6.3s infinite; }
  .shine-purpose-action-rail span:nth-child(2) { animation-delay: 2.1s; }
  .shine-purpose-action-rail span:nth-child(3) { animation-delay: 4.2s; }
  .shine-purpose-demo figure { animation: shine-purpose-settle .65s both; animation-timeline: view(); animation-range: entry 15% cover 34%; }
  .shine-bible-main-visual,
  .shine-bible-proof figure { animation: shine-purpose-settle .65s both; animation-timeline: view(); animation-range: entry 12% cover 32%; }

  @keyframes shine-download-rise {
    from { opacity: 0; transform: translateY(10px); }
  }

  @keyframes shine-product-arrive {
    from { opacity: 0; transform: translateY(18px) scale(.985); }
  }

  @keyframes shine-workflow-step {
    0%, 27% { box-shadow: inset 0 -4px 0 #3d93d3; filter: brightness(1.06); }
    34%, 100% { box-shadow: none; filter: none; }
  }

  @keyframes shine-purpose-settle {
    from { opacity: .45; transform: translateY(18px) scale(.985); }
  }
}

@media (max-width: 1100px) {
  .shine-product-hero {
    width: calc(100% - 40px);
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 48px;
  }

  .shine-product-hero-copy {
    width: 100%;
    max-width: 760px;
    justify-self: center;
  }

  .shine-product-hero-visual {
    width: 100%;
    min-height: 500px;
  }

  .shine-plan { padding-inline: 24px; }
}

@media (max-width: 820px) {
  .shine-product-hero { width: calc(100% - 28px); min-height: auto; grid-template-columns: 1fr; gap: 0; margin-top: 14px; padding: 0; border-radius: 24px; }
  .shine-product-hero-copy { width: calc(100% - 28px); max-width: none; margin: 0 auto; padding: 40px 0 34px; }
  .shine-product-lockup h1 { font-size: clamp(1.45rem, 7vw, 2.25rem); }
  .shine-product-promise { font-size: clamp(2.5rem, 11vw, 4rem); }
  .shine-product-hero-copy > p.shine-product-intro { font-size: 1.04rem; }
  .shine-platform-downloads { grid-template-columns: 1fr; margin-top: 18px; }
  /* The product is the first thing a phone visitor sees; desktop retains its
     copy-left, visual-right composition above this breakpoint. */
  .shine-product-hero-visual { order: -1; width: 100%; min-height: 390px; margin: 0; padding: 32px 0 54px 14px; border-radius: 24px 24px 0 0; }
  .shine-product-hero-visual img { width: 100%; }
  .shine-product-showcase { width: calc(100% - 28px); }
  .shine-commerce-overview,
  .shine-store-catalog { width: calc(100% - 28px); }
  .shine-plan-grid { grid-template-columns: 1fr; max-width: 680px; }
  .shine-plan { min-height: 0; }
  .shine-plan + .shine-plan { border-top: 1px solid #d9e0dc; border-left: 0; }
  .shine-plan-note { min-height: 0; }
  .shine-store-products { grid-template-columns: 1fr; max-width: 560px; }
  .shine-tour-step.is-portrait { grid-template-columns: 1fr; }
  .shine-purpose-workflow { width: calc(100% - 28px); }
  .shine-purpose-points { grid-template-columns: 1fr; }
  .shine-purpose-points article:not(:first-child) { padding-left: 0; }
  .shine-purpose-points article:not(:last-child) { padding-right: 0; }
  .shine-purpose-points article + article { border-top: 1px solid #d9e0dc; border-left: 0; }
  .shine-feature-nav { top: 60px; padding-inline: 14px; }
  .shine-feature-nav > strong { display: none; }
  .shine-bible-depth { width: calc(100% - 28px); }
  .shine-bible-workspace { grid-template-columns: 1fr; }
  .shine-bible-main-visual { padding: 18px 0; border-right: 0; border-bottom: 1px solid #d8dfda; }
  .shine-bible-methods article { padding-left: 0; }
  .shine-bible-proof { grid-template-columns: 1fr; }
  .shine-system-depth-list { grid-template-columns: 1fr; }
  .shine-system-depth-list > div:nth-child(even) { border-left: 0; }
  .shine-system-depth-list > div:nth-child(n + 2) { border-top: 1px solid #d9e0dc; }
  .shine-system-depth-list > div:last-child:nth-child(odd) { grid-column: auto; }
  .shine-product-final { grid-template-columns: 1fr; }
  .shine-mobile-feature-visual { order: -1; }
  .shine-mobile-feature-copy { order: 0; }
  .shine-product-final > img { max-height: 520px; }
}

@media (max-width: 480px) {
  .shine-product-hero-copy { width: calc(100% - 28px); }
  .shine-free-promise { grid-template-columns: 1fr; gap: 7px; padding: 13px 14px; }
  .shine-feature-nav a { min-height: 40px; padding-inline: 9px; }
  .shine-product-lockup h1 { align-items: center; gap: .24em; letter-spacing: .08em; }
  .shine-product-lockup h1 small { letter-spacing: .1em; }
  .shine-guide-cta { grid-template-columns: 42px minmax(0, 1fr) auto; padding-inline: 12px; }
  .shine-guide-icon { width: 42px; height: 42px; }
  .shine-platform-download { grid-template-columns: 48px minmax(0, 1fr) 38px; padding-inline: 13px; }
  .shine-platform-icon { width: 48px; height: 48px; }
  .shine-platform-action { width: 38px; height: 38px; }
  .shine-platform-download.is-mobile,
  .shine-platform-download.is-android { grid-template-columns: 1fr; gap: 12px; padding: 15px; }
  .shine-platform-store-badge { width: 154px; justify-self: start; margin-left: 71px; }
  .shine-platform-android-badge { width: 154px; justify-self: start; margin-left: 71px; }
  .shine-product-hero-links { gap: 14px; }
  .shine-store-access-notes { grid-template-columns: 1fr; }
  .shine-store-access-notes article,
  .shine-store-access-notes article + article { padding: 19px 0; border-top: 1px solid #d9e0dc; border-left: 0; }
  .shine-store-access-notes article:first-child { border-top: 0; }
  .shine-plan { padding: 28px 22px 24px; }
  .shine-plan-price { min-height: 68px; }
  .shine-store-product figure { padding: 12px 12px 0; }
  .shine-store-product dl { grid-template-columns: 1fr; }
  .shine-store-product dl div + div { padding-left: 0; border-top: 1px solid #d9e0dc; border-left: 0; }
  .shine-product-hero-visual { min-height: 310px; padding-bottom: 58px; }
  .shine-product-hero-visual figcaption { width: calc(100% - 24px); justify-content: center; white-space: normal; }
  .shine-purpose-action-rail span { min-height: 54px; gap: 6px; }
  .shine-purpose-action-rail small { font-size: .66rem; }
  .shine-shot-viewer-frame img { max-height: calc(100vh - 170px); }
}

/* ---------------------------------------------------------------------------
   The scale, applied.
   Last in the file so these win over the per-section sizes above at the same
   specificity. Each section heading drops under the hero promise, every
   sentence-length string comes up to at least 15px, and the two long explainer
   paragraphs are cut from 96 and 99 characters a line to 66.
--------------------------------------------------------------------------- */
.bible-software-page .shine-purpose-workflow .shine-purpose-copy h2,
.bible-software-page .shine-bible-depth h2,
.bible-software-page .shine-system-depth h2,
.bible-software-page .shine-product-showcase h2,
.bible-software-page .shine-plans-heading h2,
.bible-software-page .shine-store-catalog > header h2,
.bible-software-page .shine-feature-story h2,
.bible-software-page .shine-system-support h2,
.bible-software-page .shine-product-final h2 {
  font-size: var(--shine-h2);
  letter-spacing: -.035em;
  line-height: 1.1;
  text-wrap: balance;
}

.bible-software-page .shine-purpose-workflow .shine-purpose-copy h2,
.bible-software-page .shine-bible-depth h2,
.bible-software-page .shine-system-depth h2,
.bible-software-page .shine-product-final h2 {
  max-width: 34ch;
}

/* Section intros: one size, one measure. */
.bible-software-page .shine-purpose-workflow .shine-purpose-copy > p:not(.bible-kicker),
.bible-software-page .shine-bible-depth > header > p:last-child,
.bible-software-page .shine-product-showcase > header > p:not(.bible-kicker),
.bible-software-page .shine-plans-heading > p:last-child,
.bible-software-page .shine-store-catalog > header > p:last-child,
.bible-software-page .shine-system-support > header > p:last-child,
.bible-software-page .shine-system-depth > header > p:last-child,
.bible-software-page .shine-mobile-feature-copy > p:not(.bible-kicker) {
  max-width: var(--shine-measure);
  font-size: var(--shine-lead);
  line-height: 1.68;
}

/* Supporting text inside lists and cards. 12.8px and 13.4px were below the
   point where this is comfortably readable. */
.bible-software-page .shine-bible-methods strong { font-size: 1rem; }
.bible-software-page .shine-bible-methods span,
.bible-software-page .shine-system-depth-list span,
.bible-software-page .shine-store-access-notes p,
.bible-software-page .shine-plan-note,
.bible-software-page .shine-plan li,
.bible-software-page .shine-feature-story article p:not(.bible-kicker),
.bible-software-page .shine-purpose-points article p,
.bible-software-page .shine-system-row p {
  font-size: var(--shine-sub);
  line-height: 1.6;
}

.bible-software-page .shine-system-depth-list span,
.bible-software-page .shine-store-access-notes p,
.bible-software-page .shine-system-row p,
.bible-software-page .shine-plan-footnote,
.bible-software-page .shine-system-note {
  max-width: var(--shine-measure);
}

.bible-software-page .shine-plan-footnote,
.bible-software-page .shine-system-note { font-size: .88rem; line-height: 1.6; }
.bible-software-page .shine-bible-main-visual figcaption,
.bible-software-page .shine-purpose-demo figcaption { font-size: .84rem; line-height: 1.55; }
.bible-software-page .shine-bible-proof figcaption { font-size: .86rem; }
.bible-software-page .shine-bible-proof figcaption span { color: #68776f; }

/* Where a figure already draws the frame, the zoom button must not draw a
   second one - it inherits the figure's box and only contributes the hint and
   the hover state. */
.shine-product-hero-visual .shine-shot,
.shine-purpose-demo .shine-shot,
.shine-bible-main-visual .shine-shot,
.shine-bible-proof .shine-shot {
  border: 0;
  border-radius: inherit;
  background: none;
}

.shine-product-hero-visual .shine-shot:hover,
.shine-purpose-demo .shine-shot:hover,
.shine-bible-main-visual .shine-shot:hover,
.shine-bible-proof .shine-shot:hover {
  box-shadow: none;
  transform: none;
}

.shine-product-hero-visual .shine-shot {
  max-width: 920px;
  justify-self: center;
}

.shine-product-hero-visual .shine-shot img {
  filter: drop-shadow(0 26px 34px rgba(22, 45, 67, .18));
}

.shine-bible-proof .shine-shot img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

/* Focus + Songs: the screenshots were 784px and 406px wide for 1600px files.
   Copy above, screenshot across the column, so both are readable. */
.bible-software-page .shine-feature-story article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.bible-software-page .shine-feature-story article > div { max-width: var(--shine-measure); }
.bible-software-page .shine-feature-story h2 { max-width: 30ch; }

/* The hero photo is a product render that already carries its own white margin
   around the two devices, so the card's 48px of padding and the 920px cap were
   spending the same space twice: the image rendered 497px wide from a 1672px
   file. Slightly more column, less inner padding, and the height set by the
   picture instead of a 560px floor that left dead white below it. */
.bible-software-page .shine-product-hero { grid-template-columns: minmax(420px, .76fr) minmax(0, 1.24fr); }

.bible-software-page .shine-product-hero-visual {
  min-height: 0;
  padding: clamp(14px, 1.5vw, 26px);
  padding-bottom: clamp(56px, 5vw, 72px);
}

.bible-software-page .shine-product-hero-visual .shine-shot { max-width: none; }
/* The render already carries its own soft shadow under the devices. */
.bible-software-page .shine-product-hero-visual .shine-shot img { filter: none; }

/* Four surfaces are named now that the phone is in the picture, and four chips
   wrapped onto a second line that then sat over the laptop. Tighter chips keep
   the row on one line inside the space reserved below the image. */
/* It was positioned `left: 50%` with a -50% translate and no `right`, so its
   shrink-to-fit width was only the half of the card to the right of centre -
   about 303px. Three chips fitted; the fourth wrapped onto the laptop. */
.bible-software-page .shine-product-hero-visual figcaption {
  right: 10px;
  left: 10px;
  justify-content: center;
  gap: 6px;
  transform: none;
}

.bible-software-page .shine-product-hero-visual figcaption span {
  min-height: 30px;
  gap: 6px;
  padding: 0 9px;
  font-size: .69rem;
}

.bible-software-page .shine-product-hero-visual figcaption svg { width: 14px; height: 14px; }

@media (max-width: 1100px) {
  .bible-software-page .shine-product-hero { grid-template-columns: 1fr; }
  .bible-software-page .shine-product-hero-visual { min-height: 0; }
}

/* On a phone the hero photo had 325px for a 1672px render of two devices, and
   the four chips wrapped onto it. The picture takes the full card width and the
   chips flow underneath, where they can wrap without covering anything. */
@media (max-width: 820px) {
  .bible-software-page .shine-product-hero-visual {
    padding: 18px 14px 22px;
    border-radius: 24px 24px 0 0;
  }

  .bible-software-page .shine-product-hero-visual figcaption {
    position: static;
    right: auto;
    left: auto;
    margin-top: 16px;
    flex-wrap: wrap;
  }
}