/* Shared visual package catalogue and real demo previews. */
.studio:has(.studio-home-catalog), .studio:has(.studio-visual-catalog) { background: #f7f7f2; }
.studio-home-catalog .studio-hero { padding-block: 32px 28px; }
.studio-home-catalog .studio-hero h1 { font-size: clamp(36px, 4.5vw, 62px); line-height: 1.04; letter-spacing: -.05em; }
.studio-home-catalog .studio-hero-note { margin-top: 14px !important; }
.home-offers { position: relative; padding-top: 22px; border-top: 0; }
.catalog-anchor { position: absolute; top: 0; scroll-margin-top: 20px; }
.home-offers .home-section-heading { align-items: center; margin-bottom: 24px; }
.home-offers .home-section-heading h2 { font-size: clamp(23px, 2.5vw, 34px); }
.home-offers-intro { max-width: 660px; margin-top: 12px; font-size: 13px; line-height: 1.65; color: #63675e; }
.home-offers .home-section-heading > a { flex-shrink: 0; }
.home-offers .home-section-heading .studio-eyebrow { color: #706e66; font-size: 10px; }
.visual-package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
.visual-package.home-offer-card { display: flex; flex-direction: column; padding: 0; background: #fff; border: 1px solid #e3e3db; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 28px #242a2010; }
.visual-package-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px; }
.visual-package-name { font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.visual-package-header .studio-status { display: inline-block; color: #6d7068; font-size: 10px; margin-top: 5px; }
.visual-package-price { text-align: right; }
.visual-package-price > p { font-size: clamp(22px, 2.5vw, 31px); letter-spacing: -.045em; line-height: 1.1; font-weight: 500; }
.visual-package-price > span { color: #75766c; font-size: 10px; }
.demo-gallery { display: flex; flex-direction: column; padding: 24px 28px 16px; background: #eeede6; gap: 14px; }
[data-visual-package="business"] .demo-gallery { background: #e0e8e3; }
[data-visual-package="catalog"] .demo-gallery { background: #ece5db; }
.demo-panel { order: 1; min-width: 0; }
.demo-window { overflow: hidden; border: 1px solid #242a2020; border-radius: 9px; background: #fff; box-shadow: 0 10px 26px #262b251a; }
.demo-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: #fcfcf9; color: #7e8077; font-size: 9px; gap: 12px; border-bottom: 1px solid #2222220f; }
.demo-window-dots { display: flex; gap: 4px; }
.demo-window-dots i { width: 5px; height: 5px; border-radius: 50%; background: #d4d6cd; }
.demo-screenshot { display: block; aspect-ratio: 1.43; overflow: hidden; background: #faf9f4; }
.demo-screenshot img { display: block; width: 100%; max-width: none; height: auto; transition: transform .35s ease; }
a.demo-screenshot:hover img { transform: translateY(-8px); }
.demo-caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 16px; min-height: 60px; }
.demo-caption > div { flex: 1 1 100%; }
.demo-caption strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.demo-caption div > span { display: block; color: #696c63; font-size: 11px; margin-top: 2px; }
.demo-open { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; background: var(--experience-panel); color:var(--studio-ink); padding: 12px 16px; min-height:46px; border: 1px solid var(--studio-line); border-radius: 8px; font-weight: 600; }
.demo-open:hover { background: #1e2924; color: #fff; }
.demo-open-preview { background: #ce4316; border-color: #ce4316; color: #fff; }
.demo-open-preview:hover { background: #b63710; }
.demo-open-choice:hover { background:var(--studio-soft); color:var(--studio-ink); }
.demo-tabs { order: 2; display: flex; gap: 8px; padding-top: 2px; }
.demo-choice { flex: 1; min-width: 0; cursor: pointer; text-align: left; padding: 10px 12px; border: 1px solid #49544238; border-radius: 7px; color: #3f493d; font: inherit; font-size: 11px; background: #ffffff45; }
.demo-choice span, .demo-choice small { display: block; }
.demo-choice small { font-size: 9px; margin-top: 2px; opacity: .8; }
.demo-choice[aria-pressed="true"] { background: #1e3028; color: #fff; border-color: #1e3028; }
.demo-unavailable { color: #71736a; font-size: 11px; }
.demo-placeholder { display: grid; justify-items: center; text-align: center; padding: 36px 20px; gap: 10px; color: #5c665a; }
.demo-placeholder-symbol { width: 70px; }
.demo-placeholder-symbol svg { display: block; width: 100%; }
.demo-placeholder strong { font-weight: 500; font-size: 21px; }
.demo-placeholder p { font-size: 13px; max-width: 300px; }
.visual-package-copy { padding: 24px 28px 26px; display: flex; flex-direction: column; flex: 1; }
.visual-package-category { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #a24528; }
.studio .visual-package-copy h3 { font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -.035em; line-height: 1.15; margin-block: 9px 12px; }
.visual-package-description { font-size: 13px; color: #63675e; line-height: 1.65; }
.visual-package-scope { font-size: 10px; line-height: 1.5; margin-top: 12px !important; color: #777b71; }
.visual-package-bottom { margin-top: auto; padding-top: 22px; }
.visual-package-details.home-offer-link { display: flex; justify-content: space-between; align-items: center; border: 1px solid #d7dbd1; border-radius: 7px; padding: 12px 15px; color: #27352c; font-size: 12px; font-weight: 600; }
.visual-package-details:hover { background: #f1f3ec; text-decoration: none; }
.visual-package-bottom small { display: block; margin-top: 8px; font-size: 10px; color: #81847a; }
.visual-costs { margin-top: 15px; font-size: 11px; color: #656d61; }
.visual-costs > summary { cursor: pointer; }
.visual-costs[open] > summary { margin-bottom: 14px; }
.visual-package-wide.home-offer-card { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; }
.visual-package-wide .demo-gallery { grid-column: 1; grid-row: 1 / 3; padding: 30px; }
.visual-package-wide .visual-package-header { grid-column: 2; align-self: start; padding: 32px 32px 10px; }
.visual-package-wide .visual-package-copy { grid-column: 2; padding: 10px 32px 32px; }
.visual-package-wide .demo-screenshot { aspect-ratio: 1.5; }
.future-offers { margin-top: 50px; padding: 34px; border-radius: 18px; background: #1d2b25; color: #f5f6ed; }
.studio .future-offers-heading h2 { font-size: clamp(25px, 3vw, 36px); letter-spacing: -.035em; margin-block: 12px; }
.future-offers-heading > p:last-child { font-size: 13px; color: #b8c2b6; max-width: 600px; }
.future-offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.future-offer { display: flex; flex-direction: column; padding: 23px; border: 1px solid #ffffff25; border-radius: 10px; }
.future-offer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.future-offer-top h3 { font-size: 14px; letter-spacing: .04em; }
.future-offer-top span { font-size: 9px; color: #b9c7b4; }
.future-offer > p { font-size: 12px; color: #b8c2b6; margin-block: 16px 20px; }
.future-offer > strong { font-weight: 400; font-size: 23px; margin-top: auto; letter-spacing: -.025em; }
.future-offer > small { font-size: 9px; color: #afbaab; margin-top: 4px; }
.future-offer > a { display: flex; justify-content: space-between; font-size: 11px; margin-top: 20px; border-top: 1px solid #ffffff20; padding-top: 14px; }
.visual-catalog-heading { padding-bottom: 40px; max-width: 850px; }
.studio .visual-catalog-heading h1 { font-size: clamp(40px, 5vw, 68px); line-height: 1.02; letter-spacing: -.05em; margin-block: 22px; }
.visual-catalog-heading h1 em { font-family: Georgia, serif; font-weight: 400; }
.visual-catalog-heading > p:last-child { font-size: 15px; color: #686d62; max-width: 590px; }
.studio-visual-catalog { padding-top: 38px; }
.package-preview-lead { margin-block: 0 50px; border-radius: 16px; overflow: hidden; max-width: 900px; }
.package-preview-lead .demo-screenshot { aspect-ratio: 1.8; }
@media (max-width: 760px) {
    .visual-package-grid { grid-template-columns: 1fr; gap: 24px; }
    .visual-package-wide.home-offer-card { grid-column: auto; display: flex; }
    .visual-package-wide .visual-package-header { order: 0; padding: 23px; }
    .visual-package-wide .demo-gallery { order: 1; padding: 22px; }
    .visual-package-wide .visual-package-copy { order: 2; padding: 23px; }
    .home-offers .home-section-heading { align-items: start; gap: 6px; }
    .demo-gallery { padding: 20px; }
    .visual-package-header, .visual-package-copy { padding: 22px; }
    .future-offer-grid { grid-template-columns: 1fr; }
    .future-offers { padding: 25px; }
    .demo-caption { gap: 8px; }
    .demo-open { padding: 9px 11px; gap: 8px; }
    .demo-caption strong { font-size: 14px; }
    .demo-screenshot, .visual-package-wide .demo-screenshot { aspect-ratio: 1.32; }
}
@media (prefers-reduced-motion: reduce) { .demo-screenshot img { transition: none; } a.demo-screenshot:hover img { transform: none; } }
.demo-try { flex-basis:100%; width:100%; font-size:14px; color:var(--studio-muted); border-top:1px solid var(--studio-line); }
.demo-try summary { min-height:44px; padding-block:10px; cursor:pointer; }
.demo-try ul { list-style:none; padding:0 0 8px; margin:0; }
.demo-try a { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:44px; color:var(--studio-ink); text-decoration:underline; text-underline-offset:4px; }
.studio-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }