/* Open Eyes: Page A header design from Claude Design (handoff 2026-10-20), page-owned for post 1703730.
   Brand coral #ff5248 stays on filled buttons (Aaron 2026-10-09); #e0463d for small accent text on white.
   Scope: body.single-tutorial.postid-1703730 ("B" below). Loaded from the breadcrumb module. */

/* ---------- 1. header: the theme's own free hero stays (Aaron 2026-10-21: "make it the same that it was before");
   the page script only adds "Lightroom Mobile" to the facts line ---------- */
@media (max-width: 999px) {
  /* the top section stacks: image first, then the title column (the theme's order:50 / 30 rules put it last) */
  body.single-tutorial.postid-1703730 .cb-grid .parent.row > .left-col { order: -1 !important; margin-bottom: 20px !important; }
  body.single-tutorial.postid-1703730 .cb-grid .parent.row > .left-col > .cb-module { position: static !important; }
}

/* ---------- 2. white top section ---------- */
/* breadcrumb: theme styling, untouched */

/* H1 (the NEW badge keeps the theme styling) */
body.single-tutorial.postid-1703730 .cb-module-free-tutorial-overview ul.tutorial-overview-list .tutorial-title h1 {
  font-family: Lato, sans-serif !important; font-size: 38px !important; line-height: 1.14 !important; font-weight: 900 !important; letter-spacing: -.01em !important; color: #17181b !important; text-wrap: pretty; margin: 12px 0 0 !important; padding: 0 !important; text-align: left !important;
}
  display: inline-block; vertical-align: middle; margin: -4px 0 0 8px; padding: 4px 7px; border-radius: 3px; background: #8cc63f !important; color: #17181b !important;
  font: 900 11px/1 Lato, sans-serif !important; letter-spacing: .04em; text-transform: uppercase; font-style: normal !important; width: auto !important; height: auto !important;
}
body.single-tutorial.postid-1703730 .ft-dl a.ft-dl__btn { padding: 0 14px; }

/* byline row: avatar + name left, three round icon buttons right */
body.single-tutorial.postid-1703730 ul.tutorial-overview-list:has(> li.favorite) {
  display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important;
  margin: 0 0 14px !important; padding: 0 !important; border-top: 0 !important; border-bottom: 0 !important;
}
body.single-tutorial.postid-1703730 ul.tutorial-overview-list > li.tutorial-title { flex: 0 0 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; order: 0; }
body.single-tutorial.postid-1703730 ul.tutorial-overview-list:has(> li.favorite) { flex-wrap: wrap !important; }
body.single-tutorial.postid-1703730 ul.tutorial-overview-list > li.tutorial-title { border-bottom: 0 !important; padding-bottom: 0 !important; margin: 0 0 12px !important; }
body.single-tutorial.postid-1703730 ul.tutorial-overview-list > li.tutorial-title h1 { margin-bottom: 18px !important; }
body.single-tutorial.postid-1703730 ul.tutorial-overview-list:has(> li.favorite) > li.tutorial-author { display: flex !important; align-items: center !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; order: 1; }
body.single-tutorial.postid-1703730 ul.tutorial-overview-list:has(> li.favorite) > li.tutorial-author img { width: 44px !important; height: 44px !important; margin-right: 12px !important; }
body.single-tutorial.postid-1703730 ul.tutorial-overview-list .tutorial-author-by { font-family: Lato, sans-serif !important; font-size: 15px !important; line-height: 1.35 !important; color: #6b7076 !important; }
body.single-tutorial.postid-1703730 ul.tutorial-overview-list .tutorial-author-by a { color: #17181b !important; text-decoration: none !important; }
body.single-tutorial.postid-1703730 ul.tutorial-overview-list .tutorial-author-by strong { font-weight: 900 !important; color: #17181b !important; }
body.single-tutorial.postid-1703730 ul.tutorial-overview-list .tutorial-author-by > span { display: block; font-size: 13px !important; color: #6b7076 !important; white-space: nowrap; }
body.single-tutorial.postid-1703730 ul.tutorial-overview-list .tutorial-author-by > span em { font-style: normal !important; }
body.single-tutorial.postid-1703730 ul.tutorial-overview-list .tutorial-author-by br { display: none; }
body.single-tutorial.postid-1703730 .ft-actions { border: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; list-style: none !important; order: 2; }
body.single-tutorial.postid-1703730 .ft-actions::before { content: none !important; }
body.single-tutorial.postid-1703730 ul.tutorial-overview-list > li.favorite, body.single-tutorial.postid-1703730 ul.tutorial-overview-list > li.ft-share-slot { display: none !important; }
body.single-tutorial.postid-1703730 .ft-actions .ft-ibtn, body.single-tutorial.postid-1703730 .ft-actions .ft-share__btn, body.single-tutorial.postid-1703730 .ft-actions a.add-to-favorites {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
  border: 1px solid #dadde1 !important; border-radius: 50% !important; background: #fff !important; color: #17181b !important; cursor: pointer; box-shadow: none !important; text-decoration: none !important; position: relative;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
body.single-tutorial.postid-1703730 .ft-actions .ft-ibtn, body.single-tutorial.postid-1703730 .ft-actions .ft-share__btn, body.single-tutorial.postid-1703730 .ft-actions a.add-to-favorites { transition: border-color .18s ease, color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease !important; }
body.single-tutorial.postid-1703730 .ft-actions .ft-ibtn:hover, body.single-tutorial.postid-1703730 .ft-actions .ft-share__btn:hover, body.single-tutorial.postid-1703730 .ft-actions a.add-to-favorites:hover { background: #ff5248 !important; border-color: #ff5248 !important; color: #fff !important; transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 18px rgba(255,82,72,.3) !important; }
body.single-tutorial.postid-1703730 .ft-actions a.add-to-favorites:hover i { color: #fff !important; }
body.single-tutorial.postid-1703730 .ft-actions .ft-ibtn:active, body.single-tutorial.postid-1703730 .ft-actions .ft-share__btn:active, body.single-tutorial.postid-1703730 .ft-actions a.add-to-favorites:active { transform: translateY(0) scale(.96); }
body.single-tutorial.postid-1703730 .ft-actions a.add-to-favorites.is_added { background: #ff5248 !important; border-color: #ff5248 !important; animation: ftPop .35s ease; }
body.single-tutorial.postid-1703730 .ft-actions a.add-to-favorites.is_added i { color: #fff !important; }
@keyframes ftPop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
body.single-tutorial.postid-1703730 .ft-actions .ft-ibtn:focus-visible, body.single-tutorial.postid-1703730 .ft-actions .ft-share__btn:focus-visible, body.single-tutorial.postid-1703730 .ft-actions a.add-to-favorites:focus-visible { outline: 2px solid #ff5248 !important; outline-offset: 2px !important; }
body.single-tutorial.postid-1703730 .ft-actions .ft-ibtn > svg, body.single-tutorial.postid-1703730 .ft-actions .ft-share__btn > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.single-tutorial.postid-1703730 .ft-actions .ft-share__btn[aria-expanded="true"] { border-color: #17181b !important; }
body.single-tutorial.postid-1703730 .ft-actions .ft-share--head { position: relative !important; height: 44px !important; }
body.single-tutorial.postid-1703730 .ft-actions .ft-share__panel { left: auto !important; right: 0 !important; }
body.single-tutorial.postid-1703730 .ft-actions a.add-to-favorites i { font-size: 18px !important; line-height: 1 !important; color: #ff5248 !important; margin: 0 !important; }
body.single-tutorial.postid-1703730 .ft-actions a.add-to-favorites .tooltip { display: none !important; }
body.single-tutorial.postid-1703730 .ft-actions .ft-copy.is-done { border-color: #1e7d45 !important; color: #1e7d45 !important; }
body.single-tutorial.postid-1703730 .ft-actions .ft-tip {
  position: absolute; right: 0; top: calc(100% + 8px); padding: 6px 10px; border-radius: 6px; background: #17181b; color: #fff; font: 700 12px/1 Lato, sans-serif; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 50;
}
body.single-tutorial.postid-1703730 .ft-actions .ft-tip.is-on { opacity: 1; }

/* description lead + practice card (same markup in the guest and member rows) */
body.single-tutorial.postid-1703730 .cb-module.grid-right p.ft-lead { font-family: Lato, sans-serif !important; font-size: 17px !important; line-height: 1.65 !important; color: #3c4046 !important; margin: 0 0 28px !important; }
body.single-tutorial.postid-1703730 .ft-dl { background: #f6f7f8; border-radius: 12px; padding: 26px; font-family: Lato, sans-serif; scroll-margin-top: 150px; }
body.single-tutorial.postid-1703730 .ft-dl p { margin: 0; font-family: Lato, sans-serif; }
body.single-tutorial.postid-1703730 .ft-dl__eyebrow { font-size: 12px !important; font-weight: 900 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: #e0463d !important; margin-bottom: 8px !important; }
body.single-tutorial.postid-1703730 .ft-dl__title { font-size: 24px !important; font-weight: 900 !important; line-height: 1.15 !important; color: #17181b !important; margin-bottom: 8px !important; }
body.single-tutorial.postid-1703730 .ft-dl__text { font-size: 15px !important; line-height: 1.55 !important; color: #50555b !important; margin-bottom: 18px !important; }
body.single-tutorial.postid-1703730 .ft-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
body.single-tutorial.postid-1703730 .ft-dl__row { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #eceef0; border-radius: 10px; padding: 12px; }
body.single-tutorial.postid-1703730 .ft-dl__row + .ft-dl__row { margin-top: 10px; }
body.single-tutorial.postid-1703730 .ft-dl__thumbs { display: flex; flex: none; }
body.single-tutorial.postid-1703730 .ft-dl__thumbs img { width: 52px !important; height: 52px !important; border-radius: 6px; border: 2px solid #fff; object-fit: cover; margin: 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
body.single-tutorial.postid-1703730 .ft-dl__thumbs img + img { margin-left: -18px !important; }
body.single-tutorial.postid-1703730 .ft-dl__tile { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 8px; background: #fdecec; color: #e0463d; }
body.single-tutorial.postid-1703730 .ft-dl__tile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.single-tutorial.postid-1703730 .ft-dl__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.single-tutorial.postid-1703730 .ft-dl__name { font-size: 15px; font-weight: 900; color: #17181b; line-height: 1.2; }
body.single-tutorial.postid-1703730 .ft-dl__sub { font-size: 13px; color: #6b7076; line-height: 1.2; }
body.single-tutorial.postid-1703730 .ft-dl a.ft-dl__btn {
  flex: none; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 6px;
  font: 900 13px/1 Lato, sans-serif !important; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; box-shadow: none !important; margin: 0 !important; width: auto !important; min-width: 0 !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
body.single-tutorial.postid-1703730 .ft-dl a.ft-dl__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.single-tutorial.postid-1703730 .ft-dl a.ft-dl__btn--dark { background: #17181b !important; color: #fff !important; border: 1px solid #17181b !important; }
body.single-tutorial.postid-1703730 .ft-dl a.ft-dl__btn--dark:hover { background: #ff5248 !important; border-color: #ff5248 !important; color: #fff !important; }
body.single-tutorial.postid-1703730 .ft-dl a.ft-dl__btn--line { background: #fff !important; color: #17181b !important; border: 1px solid #c9cdd2 !important; }
body.single-tutorial.postid-1703730 .ft-dl a.ft-dl__btn--line:hover { border-color: #ff5248 !important; color: #e0463d !important; }
body.single-tutorial.postid-1703730 .ft-dl a.ft-dl__btn:focus-visible { outline: 2px solid #ff5248; outline-offset: 2px; }
body.single-tutorial.postid-1703730 .ft-dl__foot { font-size: 13px !important; line-height: 1.5 !important; color: #6b7076 !important; margin-top: 16px !important; }
body.single-tutorial.postid-1703730 .ft-dl__foot a { color: #e0463d !important; text-decoration: none !important; border-bottom: 1px solid rgba(255,82,72,.35); }
@media (max-width: 480px) {
  body.single-tutorial.postid-1703730 .ft-dl { padding: 20px 16px; }
  body.single-tutorial.postid-1703730 .ft-dl__row { flex-wrap: wrap; }
  body.single-tutorial.postid-1703730 .ft-dl a.ft-dl__btn { flex: 1 1 100%; }
}
/* the old modules whose content moved: PDF card, description, newsletter, image source (same ids logged in or out) */
body.single-tutorial.postid-1703730 #cb-module-6, body.single-tutorial.postid-1703730 #cb-module-7, body.single-tutorial.postid-1703730 #cb-module-8, body.single-tutorial.postid-1703730 #cb-module-9 { display: none !important; }
body.single-tutorial.postid-1703730 #cb-module-4, body.single-tutorial.postid-1703730 #cb-module-5 { margin-bottom: 0 !important; }

/* slider column: the theme caption style (uppercase, a short line each side) stays; the slide gets rounded corners */
body.single-tutorial.postid-1703730 .cb-module.grid-left figure.ph-compare--slide .ph-slide { border-radius: 10px; overflow: hidden; }

/* ---------- 3. section nav pills: as they were (shared CSS) ---------- */

/* ---------- 4. article + sidebar ---------- */
body.single-tutorial.postid-1703730 .free-description h2 { font-size: 30px !important; line-height: 1.2 !important; font-weight: 900 !important; border-left: 0 !important; padding-left: 0 !important; margin-left: 0 !important; }
body.single-tutorial.postid-1703730 .free-description h2::before, body.single-tutorial.postid-1703730 .free-description h3::before { display: none !important; content: none !important; }
body.single-tutorial.postid-1703730 .free-description h3.section-heading { border-left: 0 !important; padding-left: 0 !important; font-size: 26px !important; font-weight: 900 !important; line-height: 1.2 !important; }
body.single-tutorial.postid-1703730 .free-description h3.section-heading .ft-step { display: inline-block; vertical-align: 3px; margin-right: 12px; font: 900 13px/1 Lato, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #e0463d; }
body.single-tutorial.postid-1703730 .free-description > p:first-of-type::first-letter, body.single-tutorial.postid-1703730 .free-description p.ft-drop::first-letter { float: none !important; font-size: inherit !important; line-height: inherit !important; margin: 0 !important; padding: 0 !important; font-weight: inherit !important; color: inherit !important; }
body.single-tutorial.postid-1703730 .free-description .ft-box--takeaways { background: #f6f7f8 !important; border: 0 !important; border-radius: 12px !important; padding: 26px 28px !important; }
body.single-tutorial.postid-1703730 .free-description img, body.single-tutorial.postid-1703730 .free-description figure img, body.single-tutorial.postid-1703730 .free-description video { border-radius: 10px; }
body.single-tutorial.postid-1703730 .ft-source { margin: 40px 0 0; padding-top: 20px; border-top: 1px solid #eceef0; font-family: Lato, sans-serif; }
body.single-tutorial.postid-1703730 .ft-source__label { margin: 0 0 6px !important; font: 900 12px/1.3 Lato, sans-serif !important; letter-spacing: .1em; text-transform: uppercase; color: #6b7076 !important; }
body.single-tutorial.postid-1703730 .ft-source p:not(.ft-source__label) { margin: 0 !important; font-size: 14px !important; line-height: 1.5 !important; color: #50555b !important; }
body.single-tutorial.postid-1703730 .ft-source a { color: #50555b !important; text-decoration: underline !important; border: 0 !important; }

/* sidebar: the "In this tutorial" card keeps the theme styling; only the newsletter card below is new */
body.single-tutorial.postid-1703730 .tutorial-sidebar .ft-side-news { background: #f6f7f8 !important; border: 0 !important; margin-top: 16px !important; }
body.single-tutorial.postid-1703730 .ft-side-news p { font-family: Lato, sans-serif !important; margin: 0 !important; }
body.single-tutorial.postid-1703730 .ft-side-news__eyebrow { font-size: 12px !important; font-weight: 900 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: #6b7076 !important; margin-bottom: 8px !important; }
body.single-tutorial.postid-1703730 .ft-side-news__title { font-size: 18px !important; font-weight: 900 !important; line-height: 1.2 !important; color: #17181b !important; margin-bottom: 6px !important; }
body.single-tutorial.postid-1703730 .ft-side-news__text { font-size: 14px !important; line-height: 1.5 !important; color: #50555b !important; margin-bottom: 14px !important; }
body.single-tutorial.postid-1703730 .ft-side-news .sendlane-form, body.single-tutorial.postid-1703730 .ft-side-news .slf-widget, body.single-tutorial.postid-1703730 .ft-side-news .slf-widget__layout, body.single-tutorial.postid-1703730 .ft-side-news .slf-form { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
body.single-tutorial.postid-1703730 .ft-side-news .slf-form .form-element[sl-form-element-type="text"] { display: none !important; }
body.single-tutorial.postid-1703730 .ft-side-news .slf-form .form-element { margin: 0 0 10px !important; padding: 0 !important; width: 100% !important; }
body.single-tutorial.postid-1703730 .ft-side-news .slf-form .form-element:last-child { margin-bottom: 0 !important; }
body.single-tutorial.postid-1703730 .ft-side-news .slf-form label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.single-tutorial.postid-1703730 .ft-side-news .slf-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) { display: block !important; width: 100% !important; height: 44px !important; padding: 0 14px !important; margin: 0 !important; border: 1px solid #c9cdd2 !important; border-radius: 6px !important; background: #fff !important; font: 400 15px/1 Lato, sans-serif !important; color: #17181b !important; box-shadow: none !important; }
body.single-tutorial.postid-1703730 .ft-side-news .slf-form input:focus { border-color: #17181b !important; outline: 0 !important; }
body.single-tutorial.postid-1703730 .ft-side-news .slf-form button, body.single-tutorial.postid-1703730 .ft-side-news .slf-form [type="submit"] { display: block !important; width: 100% !important; height: 44px !important; margin: 0 !important; padding: 0 16px !important; border: 0 !important; border-radius: 6px !important; background: #17181b !important; color: #fff !important; font: 900 13px/1 Lato, sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase !important; cursor: pointer; box-shadow: none !important; }
body.single-tutorial.postid-1703730 .ft-side-news .slf-form button:hover, body.single-tutorial.postid-1703730 .ft-side-news .slf-form [type="submit"]:hover { background: #ff5248 !important; }
body.single-tutorial.postid-1703730 .ft-side-news .slf-form button *, body.single-tutorial.postid-1703730 .ft-side-news .slf-form [type="submit"] * { color: #fff !important; font: inherit !important; margin: 0 !important; }
body.single-tutorial.postid-1703730 .ft-side-news .slf-form .form-element[sl-form-element-type="button"] > div, body.single-tutorial.postid-1703730 .ft-side-news .slf-form .form-element[sl-form-element-type="input"] > div { width: 100% !important; margin: 0 !important; padding: 0 !important; }

/* ---------- phone sizes (last, so they win over the base rules above) ---------- */
@media (max-width: 767px) {
  body.single-tutorial.postid-1703730 .cb-module-free-tutorial-overview ul.tutorial-overview-list .tutorial-title h1 { font-size: 30px !important; line-height: 1.15 !important; }
  body.single-tutorial.postid-1703730 .free-description h2 { font-size: 26px !important; }
  body.single-tutorial.postid-1703730 .free-description h3.section-heading { font-size: 22px !important; }
  body.single-tutorial.postid-1703730 .ft-dl__title { font-size: 22px !important; }
}

/* ---------- narrow screens: the sidebar's newsletter card follows the article (the shared CSS hides the whole sidebar
   under 1000px; the phone already has its own contents list near the top, so the TOC card stays hidden there) ---------- */
@media (max-width: 999px) {
  body.single-tutorial.postid-1703730 .cb-module.tutorial-sidebar { display: block !important; position: static !important; width: auto !important; margin: 8px 15px 0 !important; padding: 0 !important; }
  body.single-tutorial.postid-1703730 .cb-module.tutorial-sidebar .tutorial-sidebar { position: static !important; margin: 0 !important; }
  body.single-tutorial.postid-1703730 .cb-module.tutorial-sidebar .sidebar-card-toc { display: none !important; }
  body.single-tutorial.postid-1703730 .tutorial-sidebar .ft-side-news { margin-top: 0 !important; }
}

/* the download icon bobs on hover, like the newer tutorials' download buttons */
@keyframes ftDlBob { 0% { transform: translateY(0); } 40% { transform: translateY(3px); } 100% { transform: translateY(0); } }
body.single-tutorial.postid-1703730 .ft-dl a.ft-dl__btn:hover svg, body.single-tutorial.postid-1703730 .ft-dl a.ft-dl__btn:focus-visible svg { animation: ftDlBob .5s ease-in-out; }
@media (prefers-reduced-motion: reduce) { body.single-tutorial.postid-1703730 .ft-dl a.ft-dl__btn:hover svg { animation: none; } }

/* the practice-files card lifts on hover, like the earlier download card */
body.single-tutorial.postid-1703730 .ft-dl { transition: transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) {
  body.single-tutorial.postid-1703730 .ft-dl:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(22,25,28,.05), 0 14px 30px rgba(22,25,28,.12); }
}
@media (prefers-reduced-motion: reduce) { body.single-tutorial.postid-1703730 .ft-dl, body.single-tutorial.postid-1703730 .ft-dl:hover { transition: none; transform: none; } }
/* no full-width rule between the top section and the article (Aaron 2026-10-21) */
body.single-tutorial.postid-1703730 #cb-module-10.section-divider { display: none !important; }
body.single-tutorial.postid-1703730 #cb-module-11.free-description { padding-top: 0 !important; }
body.single-tutorial.postid-1703730 .free-description > h2:first-child { margin-top: 0 !important; }

/* the two runs on Aaron's face sit side by side (Aaron 2026-10-21) */
body.single-tutorial.postid-1703730 .free-description .ft-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 24px 0 32px; align-items: start; }
body.single-tutorial.postid-1703730 .free-description .ft-pair > figure.ph-compare--slide { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; grid-template-columns: minmax(0, 1fr) !important; }
body.single-tutorial.postid-1703730 .free-description .ft-pair > figure.ph-compare--slide img { width: 100% !important; height: auto !important; }
@media (max-width: 600px) { body.single-tutorial.postid-1703730 .free-description .ft-pair { grid-template-columns: 1fr; } }

/* favorites: an inline heart (outline, filled white on coral once saved) instead of the icon font */
body.single-tutorial.postid-1703730 .ft-actions a.add-to-favorites i { display: none !important; }
body.single-tutorial.postid-1703730 .ft-actions a.add-to-favorites svg.ft-heart { width: 19px; height: 19px; fill: none; stroke: #ff5248; stroke-width: 1.9; transition: fill .18s ease, stroke .18s ease, transform .18s ease; }
body.single-tutorial.postid-1703730 .ft-actions a.add-to-favorites:hover svg.ft-heart { stroke: #fff; }
body.single-tutorial.postid-1703730 .ft-actions a.add-to-favorites.is_added svg.ft-heart { fill: #fff; stroke: #fff; }
/* captions under the paired sliders wrap instead of running into each other */
body.single-tutorial.postid-1703730 .free-description .ft-pair figure.ph-compare--slide .ph-compare__caption { grid-template-columns: minmax(0, 1fr) !important; margin-top: 8px !important; }
body.single-tutorial.postid-1703730 .free-description .ft-pair figure.ph-compare--slide .ph-compare__label--after { white-space: normal !important; text-align: center !important; justify-content: center !important; line-height: 1.5 !important; font-size: 10px !important; letter-spacing: .08em !important; }
body.single-tutorial.postid-1703730 .free-description .ft-pair figure.ph-compare--slide .ph-compare__label--after::before, body.single-tutorial.postid-1703730 .free-description .ft-pair figure.ph-compare--slide .ph-compare__label--after::after { display: none !important; }

/* the PDF row is a jump target for the sticky bar's PDF Guide pill */
body.single-tutorial.postid-1703730 .ft-dl__row--pdf { scroll-margin-top: 150px; }

/* hover: the share icon goes white like the others; the author block gets no hover tint */
body.single-tutorial.postid-1703730 .ft-actions .ft-share__btn:hover, body.single-tutorial.postid-1703730 .ft-actions .ft-share__btn:hover svg, body.single-tutorial.postid-1703730 .ft-actions .ft-share__btn:hover svg.ft-share__line { color: #fff !important; stroke: #fff !important; fill: none !important; }
body.single-tutorial.postid-1703730 .ft-actions .ft-share__btn[aria-expanded="true"] { background: #17181b !important; border-color: #17181b !important; color: #fff !important; }
body.single-tutorial.postid-1703730 .ft-actions .ft-share__btn[aria-expanded="true"] svg { stroke: #fff !important; }
body.single-tutorial.postid-1703730 ul.tutorial-overview-list > li.tutorial-author, body.single-tutorial.postid-1703730 ul.tutorial-overview-list > li.tutorial-author:hover, body.single-tutorial.postid-1703730 ul.tutorial-overview-list > li.tutorial-author a:hover, body.single-tutorial.postid-1703730 ul.tutorial-overview-list > li.tutorial-author > a:hover { background: transparent !important; box-shadow: none !important; }

/* the share menu: solid brand logos, tighter rows (Aaron 2026-10-21) */
body.single-tutorial.postid-1703730 .ft-actions .ft-share__panel { width: 236px !important; padding: 6px !important; border-radius: 12px !important; }
body.single-tutorial.postid-1703730 .ft-actions .ft-share__panel svg { width: 18px !important; height: 18px !important; fill: currentColor !important; stroke: none !important; stroke-width: 0 !important; }
body.single-tutorial.postid-1703730 .ft-actions .ft-share__panel svg.ft-share__line { fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round; stroke-linejoin: round; }
body.single-tutorial.postid-1703730 .ft-actions .ft-share__panel .ft-share__item { min-height: 36px !important; padding: 0 10px !important; gap: 10px !important; font-size: 14px !important; border-radius: 8px !important; color: #17181b !important; }
body.single-tutorial.postid-1703730 .ft-actions .ft-share__panel .ft-share__item:hover { background: #f3f4f6 !important; color: #e0463d !important; }
body.single-tutorial.postid-1703730 .ft-actions .ft-share__panel li.ft-share__sep { padding-bottom: 3px !important; margin-bottom: 3px !important; }
body.single-tutorial.postid-1703730 .ft-actions .ft-share__panel .ft-share__more { font-weight: 700 !important; }
/* the menu rows inherit the overview list's li rules (flex, min-height): reset them */
body.single-tutorial.postid-1703730 .ft-actions .ft-share__list { display: block !important; margin: 0 !important; padding: 0 !important; }
body.single-tutorial.postid-1703730 .ft-actions .ft-share__list li { display: block !important; flex: none !important; width: auto !important; max-width: none !important; min-height: 0 !important; height: auto !important; line-height: normal !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
body.single-tutorial.postid-1703730 .ft-actions .ft-share__list li.ft-share__sep { border-bottom: 1px solid #e1e4e8 !important; padding-bottom: 3px !important; margin-bottom: 3px !important; }
/* step label stays on one line ("STEP 4"), headings fill the width instead of balancing onto two lines */
body.single-tutorial.postid-1703730 .free-description h3.section-heading .ft-step { display: inline-block !important; white-space: nowrap !important; width: auto !important; margin: 0 12px 0 0 !important; }
body.single-tutorial.postid-1703730 .free-description h3.section-heading, body.single-tutorial.postid-1703730 .free-description h2 { text-wrap: wrap !important; }
@media (max-width: 767px) {
  body.single-tutorial.postid-1703730 .free-description h3.section-heading { display: block !important; }
  body.single-tutorial.postid-1703730 .free-description h3.section-heading .ft-step { display: block !important; margin: 0 0 6px !important; }
}