.foca-layout { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 100px; padding-bottom: 48px; }
.foca-sidebar { position: sticky; top: 96px; max-height: calc(100svh - 120px); overflow: auto; padding: 8px 12px 12px 0; }
.foca-sidebar-title { margin: 0 0 20px; font: 700 15px/1.4 var(--layout-ui); }
.foca-mobile-contents { display: none; }
.foca-sidebar nav { display: grid; }
.foca-sidebar nav a { border-left: 2px solid #e7e4eb; padding: 8px 0 8px 10px; color: #66616d; font: 400 12px/1.5 var(--layout-ui); text-decoration: none; }
.foca-sidebar nav a:hover { background: #f7f5fa; color: #342949; }
.foca-sidebar nav a[aria-current] { border-left-color: #7351bd; background: #f1edf8; color: #342949; font-weight: 700; }
.foca-sidebar a:focus-visible, .foca-mobile-contents :focus-visible { outline: 2px solid #7351bd; outline-offset: 2px; }
.foca-content { min-width: 0; }
.foca-image-retry { padding: 8px 12px; margin: 8px 0; border: 1px solid #aaa; border-radius: 4px; background: #fff; color: #222; font: 400 13px/1.5 var(--layout-ui); cursor: pointer; }
.foca-content [id] { scroll-margin-top: 110px; }
.foca-page .foca-content .landing-session { padding: 48px 32px; border-radius: 4px; }
.foca-page .foca-content .columns-3 { gap: 24px; }
.foca-page .foca-content .col-image { width: 100%; }
.foca-page .foca-content .hero-mockup { aspect-ratio: 1; height: auto; }
.foca-page .foca-content .myheading1 { font-size: clamp(30px, 3vw, 46px); }
.foca-page .foca-content .text-block-21 { font-size: 15px; }
.foca-page .foca-content .store-badges { flex-wrap: wrap; gap: 12px; }
.foca-page .foca-content .store-badges a { margin: 0; }
.foca-page .foca-content .store-badges img { width: 125px; height: auto; }
.foca-page .foca-content .intro-section, .foca-page .foca-content .case-container { width: 100%; max-width: none; padding: 48px 0; margin: 0; }
.foca-page .foca-content .intro-section { flex-direction: column; gap: 32px; }
.foca-page .foca-content .intro-meta { flex-basis: auto; width: 100%; display: grid; grid-template-columns: 1fr 1.5fr 1fr; grid-template-rows: auto 1fr; grid-auto-flow: column; column-gap: 24px; padding-bottom: 24px; border-bottom: 1px solid #ebe8ee; }
.foca-page .foca-content .intro-meta p { margin-bottom: 16px; }
.foca-page .foca-content .heading-14, .foca-page .foca-content .section-title, .foca-page .foca-content .narrative-block > .heading { font-size: clamp(28px, 2.7vw, 38px); }
.foca-page .foca-content .narrative-block, .foca-page .foca-content .labeled-row { margin: 56px 0; padding-top: 28px; border-top: 1px solid #ebe8ee; }
.foca-page .foca-content .labeled-row { flex-direction: column; gap: 24px; }
.foca-page .foca-content .label-col { flex-basis: auto; margin: 0; width: 100%; }
.foca-page .foca-content .label-col .sub { max-width: 64ch; font-size: 16px; }
.foca-page .foca-content .content-col { width: 100%; min-width: 0; }
.foca-page .foca-content .narrative-row { gap: 28px; }
.foca-page .foca-content .icon-col { flex: 0 0 80px; }
.foca-page .foca-content .icon-col img { width: 64px; }
.foca-page .foca-content .feature-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; margin: 48px 0; padding: 32px 24px; background: #f8f7fa; }
.foca-page .foca-content .feature-row .shots, .foca-page .foca-content .feature-row .copy { width: auto; min-width: 0; max-width: 100%; margin: 0; }
.foca-page .foca-content .feature-row .shots { display: flex; gap: 12px; }
.foca-page .foca-content .feature-row .shots img { width: calc(50% - 6px); height: auto; object-fit: contain; }
.foca-page .foca-content .shot-strip { width: 100%; max-width: none; padding: 32px 24px; margin: 32px 0; }
.foca-page .foca-content .strip-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.foca-page .foca-content .strip-row img { width: 100%; max-width: 100%; height: auto; }
@media (max-width: 1000px) {
  .foca-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; }
  .foca-page .foca-content .columns-3, .foca-page .foca-content .feature-row { grid-template-columns: 1fr; }
  .foca-page .foca-content .col-image { max-width: 380px; margin: auto; }
  .foca-page .foca-content .feature-row .shots { max-width: 380px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .foca-layout { display: block; padding-top: 84px; }
  .foca-sidebar { display: none; }
  .foca-mobile-contents { display: block; position: static; margin-top: 24px; border-block: 1px solid #e7e4eb; font-family: var(--layout-ui); }
  .foca-mobile-contents summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; }
  .foca-mobile-contents summary::-webkit-details-marker { display: none; }
  .foca-mobile-contents summary::after { content: ''; width: 7px; height: 7px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
  .foca-mobile-contents[open] summary::after { transform: rotate(225deg); }
  .foca-mobile-contents nav { display: grid; grid-template-columns: 1fr; padding-bottom: 12px; }
  .foca-mobile-contents nav a { padding: 12px 8px; color: #66616d; font-size: 13px; line-height: 1.5; text-decoration: none; }
  .foca-mobile-contents nav a:hover, .foca-mobile-contents nav a[aria-current] { background: #f1edf8; color: #342949; }
  .foca-content [id] { scroll-margin-top: 88px; }
  .foca-page .foca-content .landing-session { padding: 28px 20px; }
  .foca-page .foca-content .feature-row, .foca-page .foca-content .shot-strip { padding: 24px 16px; }
  .foca-page .foca-content .strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foca-page .foca-content .intro-meta { display: block; }
}
@media print { .foca-sidebar, .foca-mobile-contents { display: none; } .foca-layout { display: block; padding-top: 0; } }