/* AI prompting guide (ai-prompting-guide.php) */

.guide-head { max-width: 62rem; padding-top: .5rem; }
.guide-head .eyebrow { color: var(--accent, #ff2587); }
.guide-head .eyebrow i { display: inline-block; width: .55rem; height: .55rem; margin-right: .5rem; border-radius: 50%; background: var(--accent, #ff2587); }
.guide-head h1 { margin: .4rem 0 1rem; font: 900 clamp(2.3rem, 6.5vw, 5rem)/.98 Arial, sans-serif; letter-spacing: -.05em; }
.guide-head h1 em { font-style: italic; }
.guide-byline { margin-top: 1rem; color: #8d8d97; font-size: .86rem; }
.guide-byline a { color: #fff; }

.guide-toc { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 1.4rem; }
.guide-toc a { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border: 1px solid #ffffff2e; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 700; font-size: .88rem; }
.guide-toc a span { color: var(--accent, #ff2587); font-size: .75rem; }
.guide-toc a:hover, .guide-toc a:focus-visible { border-color: var(--accent, #ff2587); background: #ffffff0d; }

.guide-short { max-width: 52rem; margin: 0 0 2.5rem; padding: 1.3rem 1.5rem; border: 1px solid #ffffff26; border-left: 3px solid var(--accent, #ff2587); border-radius: 0 1rem 1rem 0; background: #111116; }
.guide-short h2 { margin: 0 0 .6rem; font: 900 1.3rem/1.1 Arial, sans-serif; }
.guide-short ol { margin: 0; padding-left: 1.3rem; color: #d6d6dd; line-height: 1.7; }
.guide-short b { color: #fff; }

.guide-article { max-width: 52rem; }
.guide-group { position: relative; padding: 2.2rem 0 1rem; border-top: 1px solid #ffffff1f; scroll-margin-top: 90px; }
.guide-group-num { margin: 0; color: var(--accent, #ff2587); font: 900 .8rem/1 Arial, sans-serif; letter-spacing: .16em; }
.guide-group > h2 { margin: .35rem 0 1.2rem; font: 900 clamp(1.7rem, 4.5vw, 2.6rem)/1.05 Arial, sans-serif; letter-spacing: -.04em; }
.guide-qa { padding: 1.1rem 0 1.3rem; border-bottom: 1px solid #ffffff12; scroll-margin-top: 90px; }
.guide-qa:last-of-type { border-bottom: 0; }
.guide-qa h3 { margin: 0 0 .5rem; font: 800 1.2rem/1.3 Arial, sans-serif; color: #fff; }
.guide-qa p { margin: .5rem 0; color: #c5c5ce; font-size: 1rem; line-height: 1.75; }
.guide-qa .guide-answer { color: #fff; font-size: 1.05rem; }

.guide-prompt { margin: 1rem 0 .4rem; overflow: hidden; border: 1px solid #ffffff26; border-radius: .9rem; background: #0b0b0f; }
.guide-prompt figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem .8rem; border-bottom: 1px solid #ffffff1a; background: #131318; color: #fff; font-weight: 700; font-size: .85rem; }
.guide-prompt figcaption span { padding: .12rem .5rem; border-radius: 999px; background: var(--accent-fill, #e0106c); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.guide-prompt figcaption button { margin-left: auto; min-height: 34px; padding: .3rem .9rem; border: 1px solid #ffffff38; border-radius: 999px; background: transparent; color: #fff; font-weight: 700; font-size: .8rem; cursor: pointer; }
.guide-prompt figcaption button:hover, .guide-prompt figcaption button:focus-visible { border-color: var(--accent, #ff2587); }
.guide-prompt pre { margin: 0; padding: .9rem 1rem; white-space: pre-wrap; overflow-wrap: anywhere; color: #e8e8ee; font: 500 .86rem/1.65 ui-monospace, Menlo, Consolas, monospace; }

.guide-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 1.2rem 0 .5rem; }
.guide-gallery a { position: relative; display: block; overflow: hidden; border-radius: .9rem; border: 1px solid #ffffff1f; aspect-ratio: 4 / 5; background: #111116; }
.guide-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.guide-gallery a:hover img { transform: scale(1.04); }
.guide-gallery a span { position: absolute; left: .6rem; bottom: .6rem; padding: .25rem .6rem; border-radius: 999px; background: #000000a8; color: #fff; font-size: .75rem; font-weight: 700; }
.guide-gallery p { grid-column: 1 / -1; margin: .3rem 0 0; color: #a9a9b3; font-size: .9rem; }
.guide-gallery p a, .guide-film a, .guide-inline-link a { position: static; display: inline; border: 0; aspect-ratio: auto; background: none; color: #fff; font-weight: 700; }
.guide-film { margin: 1.2rem 0 .5rem; overflow: hidden; border: 1px solid #ffffff1f; border-radius: 1rem; background: #111116; }
.guide-film video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.guide-film figcaption { padding: .6rem .8rem; color: #a9a9b3; font-size: .85rem; }
.guide-inline-link { margin: 1rem 0 0; }
.guide-end p { color: #c5c5ce; line-height: 1.75; }
.guide-note { margin-top: 1.6rem; color: #8d8d97 !important; font-size: .85rem; }

@media (max-width: 700px) {
  .guide-qa h3 { font-size: 1.1rem; }
  .guide-prompt pre { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .guide-gallery img { transition: none; } }

/* How we keep up with AI (staying-ahead.php) */
.ahead-grid { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem; }
.ahead-grid li { padding: .9rem 1rem; border: 1px solid #ffffff1f; border-radius: .9rem; background: #ffffff06; }
.ahead-grid b { display: block; margin-bottom: .25rem; color: #fff; font-size: 1rem; }
.ahead-grid span { color: #b9b9c3; font-size: .9rem; line-height: 1.5; }
.ahead-timeline { list-style: none; margin: 1.2rem 0 0; padding: 0 0 0 1.2rem; border-left: 2px solid var(--accent, #ff2587); }
.ahead-timeline li { position: relative; padding: 0 0 1.2rem 1rem; }
.ahead-timeline li::before { content: ''; position: absolute; left: -1.62rem; top: .35rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent, #ff2587); box-shadow: 0 0 0 4px #0a0a0d; }
.ahead-timeline time { color: var(--accent, #ff2587); font: 800 .78rem/1 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.ahead-timeline p { margin: .35rem 0 0 !important; color: #e4e4ea !important; }
.ahead .guide-group a:not(.button):not(.case-study-ghost) { color: #fff; font-weight: 700; }

/* Social media content (social-media-content.php) */
.social .studio-promise { margin-top: 1.6rem; }
.social-reel { display: flex; gap: .8rem; margin: 2rem 0 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.social-reel::-webkit-scrollbar { display: none; }
.social-phone { position: relative; flex: 0 0 min(46vw, 15rem); aspect-ratio: 9 / 16; overflow: hidden; scroll-snap-align: start; border: 3px solid #26262e; border-radius: 1.6rem; background: #111116; box-shadow: 0 18px 40px #0000008c; }
.social-phone video { width: 100%; height: 100%; object-fit: cover; }
.social-phone span { position: absolute; left: .7rem; right: .7rem; bottom: .8rem; color: #fff; font: 800 .8rem/1.25 Arial, sans-serif; text-shadow: 0 1px 6px #000; overflow-wrap: anywhere; }
.social-checked { color: #8d8d97; font-size: .88rem; }
.social-platforms { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .7rem; }
.social-platforms li { min-width: 0; padding: 1rem 1.05rem; border: 1px solid #ffffff1f; border-radius: 1rem; background: #ffffff06; }
.social-platforms h3 { margin: 0 0 .5rem; font: 900 1.15rem/1.2 Arial, sans-serif; color: #fff; }
.social-platforms p { margin: .35rem 0 0 !important; font-size: .92rem !important; line-height: 1.55 !important; color: #c5c5ce; }
.social-platforms .social-spec { color: #e4e4ea !important; }
.social-platforms .social-spec b { display: inline-block; min-width: 4.2rem; color: var(--accent, #ff2587); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.social-shapes { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; align-items: end; }
.social-shapes li { display: grid; justify-items: center; gap: .35rem; text-align: center; min-width: 0; }
.social-shapes i { display: block; border: 2px solid var(--accent, #ff2587); border-radius: .4rem; background: #ff258714; }
.social-shapes .s-916 { width: 2.6rem; height: 4.6rem; }
.social-shapes .s-45 { width: 3.6rem; height: 4.5rem; }
.social-shapes .s-11 { width: 4rem; height: 4rem; }
.social-shapes .s-169 { width: 5.2rem; height: 2.9rem; }
.social-shapes b { color: #fff; font-size: .95rem; }
.social-shapes span { color: #a9a9b3; font-size: .78rem; line-height: 1.35; overflow-wrap: anywhere; }
@media (max-width: 520px) { .social-shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.2rem; } }

/* Most viewed (most-viewed.php) */
.top-section { margin: 2.4rem 0 1rem; padding-top: 2rem; border-top: 1px solid #ffffff1f; scroll-margin-top: 90px; }
.top-section h2 { margin: 0 0 1.2rem; font: 900 clamp(1.7rem, 4.5vw, 2.6rem)/1.05 Arial, sans-serif; letter-spacing: -.04em; }
.top-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 13rem), 1fr)); gap: .9rem; }
.top-grid li { min-width: 0; }
.top-grid a { display: block; color: #fff; text-decoration: none; }
.top-media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid #ffffff1f; border-radius: 1rem; background: #111116; }
.top-grid-films .top-media { aspect-ratio: 9 / 16; }
.top-media img, .top-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.top-grid a:hover .top-media img, .top-grid a:hover .top-media video { transform: scale(1.04); }
.top-rank { position: absolute; left: .55rem; top: .5rem; z-index: 2; color: #fff; font: 900 2.4rem/1 Arial, sans-serif; letter-spacing: -.05em; text-shadow: 0 2px 14px #000c; }
.top-grid li:first-child .top-rank { color: var(--accent, #ff2587); }
.top-play { position: absolute; right: .6rem; bottom: .6rem; z-index: 2; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--accent-fill, #e0106c); color: #fff; font-size: .8rem; }
.top-grid strong { display: block; margin: .55rem .15rem 0; font: 800 .95rem/1.3 Arial, sans-serif; overflow-wrap: anywhere; }
.top-grid small { display: block; margin: .15rem .15rem 0; color: #a9a9b3; font-size: .8rem; }
.top .guide-toc { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .top-media img, .top-media video { transition: none; } }
.top .guide-toc a[aria-current="page"] { border-color: var(--accent, #ff2587); background: var(--accent-fill, #e0106c); }
.top .guide-toc a[aria-current="page"] span { color: #fff; }
.top .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Price builder (price-builder.php) */
.pb-form { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem 3rem; align-items: start; margin-top: 1.5rem; }
.pb-section { grid-column: 1; min-width: 0; padding: 1.6rem 0; border-top: 1px solid #ffffff1f; }
.pb-section-head h2 { margin: .3rem 0 .3rem; font: 900 clamp(1.6rem, 4.5vw, 2.4rem)/1.05 Arial, sans-serif; letter-spacing: -.04em; }
.pb-section-head > p:last-child { margin: 0 0 1rem; color: #a9a9b3; }
.pb-item { margin: 0 0 .8rem; padding: 1rem 1.05rem 1.1rem; border: 1px solid #ffffff26; border-radius: 1.1rem; background: #111116; transition: opacity .2s ease, border-color .2s ease; }
.pb-item.is-off { opacity: .55; }
.pb-item:not(.is-off) { border-color: #ff258766; }
.pb-item-top { display: flex; align-items: center; gap: .8rem; }
.pb-item-name { flex: 1; min-width: 0; }
.pb-item-name h3 { margin: 0; font: 800 1.08rem/1.2 Arial, sans-serif; color: #fff; }
.pb-item-name p { margin: .2rem 0 0 !important; color: #c8c8d0; font-size: .82rem !important; line-height: 1.35 !important; }
.pb-item-cost { color: #fff; font: 900 1.35rem/1 Arial, sans-serif; white-space: nowrap; }
.pb-switch { position: relative; flex: 0 0 auto; width: 48px; height: 28px; }
.pb-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.pb-switch span { position: absolute; inset: 0; border-radius: 999px; background: #3a3a44; transition: background .2s ease; }
.pb-switch span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.pb-switch input:checked + span { background: var(--accent-fill, #e0106c); }
.pb-switch input:checked + span::after { transform: translateX(20px); }
.pb-switch input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.pb-slider-row { display: flex; align-items: center; gap: .9rem; margin-top: 1rem; }
.pb-count { min-width: 2.2rem; text-align: center; color: var(--accent, #ff2587); font: 900 1.6rem/1 Arial, sans-serif; }
.pb-slider-row input[type=range] { --fill: 0%; flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.pb-slider-row input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--accent-fill, #e0106c) var(--fill), #34343e var(--fill)); }
.pb-slider-row input[type=range]::-moz-range-track { height: 8px; border-radius: 999px; background: #34343e; }
.pb-slider-row input[type=range]::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--accent-fill, #e0106c); }
.pb-slider-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border: 3px solid #fff; border-radius: 50%; background: var(--accent-fill, #e0106c); box-shadow: 0 4px 14px #0009; }
.pb-slider-row input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border: 3px solid #fff; border-radius: 50%; background: var(--accent-fill, #e0106c); }
.pb-slider-row input[type=range]:disabled { cursor: default; }
.pb-slider-row input[type=range]:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 8px; }
.pb-ticks { display: flex; justify-content: space-between; margin: -4px 3.1rem 0 6px; color: #6f6f79; font-size: .72rem; }
.pb-note { margin: .6rem 0 0 !important; color: #b9b9c3; font-size: .88rem !important; line-height: 1.5 !important; }
.pb-web { display: grid; gap: .6rem; }
.pb-web label { position: relative; display: block; cursor: pointer; }
.pb-web input { position: absolute; opacity: 0; }
.pb-web label > span { display: grid; gap: .25rem; padding: .95rem 1.05rem; border: 1px solid #ffffff26; border-radius: 1rem; background: #111116; transition: border-color .2s ease, background .2s ease; }
.pb-web b { color: #fff; font-size: 1.05rem; }
.pb-web em { color: var(--accent, #ff2587); font-style: normal; font-weight: 800; }
.pb-web small { color: #b9b9c3; font-size: .86rem; line-height: 1.45; }
.pb-web input:checked + span { border-color: var(--accent, #ff2587); background: #ff258714; box-shadow: inset 0 0 0 1px var(--accent, #ff2587); }
.pb-web input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.pb-web-link { margin: .9rem 0 0; }
.pb-web-link a { color: #fff; font-weight: 700; }
.pb-total { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 90px; padding: 1.3rem; border: 1px solid #ff258766; border-radius: 1.2rem; background: linear-gradient(180deg, #1a0c14, #111116); box-shadow: 0 20px 50px #0008; }
.pb-total-label { margin: 0 0 .8rem; color: var(--accent, #ff2587); font: 800 .7rem/1 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.pb-bars { display: flex; gap: 3px; height: 30px; margin-bottom: 1rem; overflow: hidden; border-radius: 8px; }
.pb-bars[hidden] { display: none; }
.pb-bars span { display: grid; place-items: center; min-width: 0; overflow: hidden; color: #fff; font: 800 .68rem/1 Arial, sans-serif; white-space: nowrap; transition: flex-grow .3s ease; }
.pb-total-rows p { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; margin: 0; padding: .55rem 0; border-bottom: 1px solid #ffffff14; color: #c5c5ce; }
.pb-total-rows p[hidden] { display: none; }
.pb-total-rows b { color: #fff; font: 900 1.3rem/1 Arial, sans-serif; white-space: nowrap; }
.pb-total-rows .pb-month b { color: var(--accent, #ff2587); font-size: 1.9rem; }
.pb-total .button { width: 100%; margin-top: 1.1rem; }
.pb-small { margin: .7rem 0 0; color: #8d8d97; font-size: .78rem; line-height: 1.45; }
.pb-more { margin: 1.2rem 0 0; color: #8d8d97; }
.pb-more a { color: #fff; font-weight: 700; }
@media (max-width: 900px) {
  .pb-form { grid-template-columns: minmax(0, 1fr); }
  .pb-total { grid-column: 1; grid-row: auto; position: sticky; bottom: 0; top: auto; z-index: 5; margin: 0 -16px; padding: .9rem 16px calc(.9rem + env(safe-area-inset-bottom)); border-radius: 1.1rem 1.1rem 0 0; border-width: 1px 0 0; }
  .pb-total-label, .pb-bars, .pb-small { display: none !important; }
  .pb-total-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .8rem; }
  .pb-total-rows p { display: grid; gap: .25rem; border: 0; padding: 0; font-size: .75rem; }
  .pb-total-rows b { font-size: 1.15rem; }
  .pb-total-rows .pb-month b { font-size: 1.15rem; }
  .pb-total-rows p[data-pb-web-row] { grid-column: 1 / -1; display: flex; padding-top: .4rem; }
  .pb-total-rows p[data-pb-web-row][hidden] { display: none; }
  .pb-total .button { margin-top: .7rem; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .pb-item, .pb-switch span, .pb-switch span::after, .pb-bars span { transition: none; } }

/* Price builder: the "mixing desk" — tall columns you slide up and down */
.pb-desk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.pb-col { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0; padding: .9rem .5rem 1rem; }
.pb-col .pb-item-cost { font-size: clamp(1.15rem, 4.5vw, 1.6rem); margin-bottom: .6rem; }
.pb-track { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 6.5rem; height: clamp(220px, 46vh, 340px); padding: 6px; border-radius: 16px; background: #0a0a0d; box-shadow: inset 0 0 0 1px #ffffff1a; cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.pb-track:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pb-seg { position: relative; flex: 1; min-height: 0; border-radius: 8px; background: #23232b; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.pb-seg i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ffffffa8; font: 700 .68rem/1 Arial, sans-serif; font-style: normal; pointer-events: none; }
.pb-seg.is-lit { background: linear-gradient(180deg, #ff5ac8, var(--accent-fill, #e0106c)); box-shadow: 0 0 14px #ff258766; }
.pb-seg.is-lit i { color: #0b0b10; } /* dark numbers read clearly on every lit colour */
.pb-col[data-id="stories"] .pb-seg.is-lit { background: linear-gradient(180deg, #c49bff, #8a4dff); box-shadow: 0 0 14px #a767ff66; }
.pb-col[data-id="videos"] .pb-seg.is-lit { background: linear-gradient(180deg, #8cecff, #1cb8e6); box-shadow: 0 0 14px #40d9ff66; }
.pb-col.is-off .pb-track { opacity: .55; }
.pb-col .pb-count { margin: .6rem 0 .1rem; font-size: 2rem; }
.pb-col h3 { margin: 0; font: 800 .95rem/1.2 Arial, sans-serif; color: #fff; }
.pb-each { margin: .25rem 0 .7rem !important; color: #a9a9b3; font-size: .74rem !important; line-height: 1.3 !important; }
.pb-legend { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .35rem; color: #b9b9c3; font-size: .86rem; line-height: 1.45; }
.pb-legend b { color: #fff; }
.pb-hint { margin: .6rem 0 0 !important; color: #8d8d97 !important; font-size: .82rem !important; }
@media (max-width: 360px) { .pb-desk { gap: .4rem; } .pb-col { padding: .7rem .3rem .9rem; } .pb-each { font-size: .68rem !important; } }
@media (prefers-reduced-motion: reduce) { .pb-seg { transition: none; } }
@media (max-width: 900px) { .pb-track { height: clamp(190px, 36vh, 300px); } .pb-section:first-child { scroll-margin-bottom: 180px; } }

/* Price builder v3: sliders across the page, everything on one page */
.pb .guide-head { padding-top: 0; }
.pb .guide-head h1 { margin-bottom: .5rem; }
.pb .guide-head .detail-lead { margin: 0; font-size: 1rem; }
.pb-form { margin-top: 1rem; gap: 1rem 2.4rem; }
.pb-section { padding: 1rem 0 .6rem; }
.pb-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin-bottom: .7rem; }
.pb-section-head .guide-group-num { margin: 0; }
.pb-section-head h2 { margin: 0; font-size: clamp(1.35rem, 3.6vw, 1.9rem); }
.pb-section-head > p:last-child { margin: 0; flex-basis: 100%; font-size: .9rem; }
.pb-rows { display: grid; gap: .6rem; }
.pb-row { margin: 0; padding: .75rem .9rem .85rem; }
.pb-row-head { display: flex; align-items: center; gap: .7rem; }
.pb-row .pb-item-name h3 { font-size: 1rem; }
.pb-row .pb-item-name p { font-size: .78rem !important; }
.pb-row-note { color: #8d8d97; }
.pb-row .pb-count { min-width: 2rem; margin: 0; font-size: 1.5rem; }
.pb-row .pb-item-cost { min-width: 4.2rem; text-align: right; font-size: 1.3rem; margin: 0; }
.pb-row .pb-track { flex-direction: row; width: 100%; max-width: none; height: 46px; margin-top: .65rem; padding: 5px; gap: 4px; cursor: ew-resize; touch-action: pan-y; }
.pb-row .pb-seg { flex: 1; min-width: 0; border-radius: 7px; }
.pb-row .pb-seg i { font-size: .78rem; }
.pb-row[data-id="stories"] .pb-seg.is-lit { background: linear-gradient(90deg, #8a4dff, #c49bff); box-shadow: 0 0 12px #a767ff55; }
.pb-row[data-id="videos"] .pb-seg.is-lit { background: linear-gradient(90deg, #1cb8e6, #8cecff); box-shadow: 0 0 12px #40d9ff55; }
.pb-row .pb-seg.is-lit { background: linear-gradient(90deg, var(--accent-fill, #e0106c), #ff5ac8); }
.pb-row.is-off .pb-track { opacity: .5; }
.pb-hint { margin: .5rem 0 0 !important; }
.pb-web { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.pb-web label > span { padding: .7rem .8rem; gap: .15rem; height: 100%; }
.pb-web b { font-size: .95rem; }
.pb-web em { font-size: .85rem; }
.pb-web small { font-size: .76rem; line-height: 1.4; }
.pb-web-none span { align-content: center; }
.pb-web-link { margin: .6rem 0 0; font-size: .9rem; }
.pb-total { padding: 1.1rem; }
.pb > .studio-promise { margin-top: 1.2rem; }
@media (min-width: 901px) { .pb-total { top: 80px; } }
@media (max-width: 600px) {
  .pb-row-note { display: none; }
  .pb-web small { display: none; }
  .pb-row .pb-track { height: 42px; }
}
.pb-web label.is-featured { grid-column: 1 / -1; }
.pb-web label.is-featured > span { border-color: #ff258799; background: linear-gradient(135deg, #2a0d1c, #111116); }
.pb-flag { justify-self: start; padding: .15rem .55rem; border-radius: 999px; background: var(--accent-fill, #e0106c); color: #fff; font: 800 .62rem/1.4 Arial, sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }

/* Free AI tools (free-ai-tools.php) */
.tools-caveat { max-width: 52rem; margin: 1rem 0 0; padding: .8rem 1rem; border-left: 3px solid var(--accent, #ff2587); background: #ffffff08; border-radius: 0 .8rem .8rem 0; color: #d6d6dd; font-size: .95rem; line-height: 1.6; }
.tools-intro { color: #d6d6dd !important; font-size: 1.02rem; line-height: 1.7; }
.tools-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .7rem; }
.tools-list a { display: flex; flex-direction: column; height: 100%; padding: 1rem 1.05rem; border: 1px solid #ffffff1f; border-radius: 1rem; background: #111116; color: #fff; text-decoration: none; transition: border-color .2s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.tools-list a:hover, .tools-list a:focus-visible { border-color: var(--accent, #ff2587); transform: translateY(-2px); }
.tools-name { font: 900 1.1rem/1.2 Arial, sans-serif; }
.tools-url { margin-top: .2rem; color: var(--accent, #ff2587); font-size: .8rem; font-weight: 700; overflow-wrap: anywhere; }
.tools-desc { margin: .55rem 0 .8rem; color: #c5c5ce; font-size: .9rem; line-height: 1.5; }
.tools-go { margin-top: auto; color: #fff; font-weight: 800; font-size: .85rem; }
.tools-aside { margin: 1rem 0 0 !important; color: #b9b9c3 !important; }
.tools-aside a { color: #fff; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .tools-list a { transition: none; } }
.tools-first { margin-top: 1.4rem; }
.tools-maker { margin-top: .15rem; color: #8d8d97; font-size: .78rem; }
.tools-desc b, .tools-good b { color: #fff; }
.tools-good { margin: -.3rem 0 .7rem; color: #c5c5ce; font-size: .88rem; line-height: 1.45; }
.tools-flags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .8rem; }
.tools-flags i { padding: .18rem .55rem; border-radius: 999px; font: 700 .7rem/1.3 Arial, sans-serif; font-style: normal; }
.tools-flags .is-ok { background: #1f3b2a; color: #8ff0b0; }
.tools-flags .is-no { background: #3b1f27; color: #ff9bb4; }
.tools-flags .is-check, .tools-flags .is-warn { background: #3a321c; color: #ffd98a; }