/* Free prompt reference: 1280 px canvas, three 389.33 px cards with 24 px gaps. */
.free-page { background: var(--page); padding-bottom: 40px; }
.free-width { width: calc(100% - 64px); max-width: 1216px; margin-inline: auto; }
.free-hero { padding: 28px 24px 68px; text-align: center; background: url('../images/free-prompts/hero-glow.png') no-repeat center -232px / 848px 448px; }
.free-hero h1 { font: 800 56px/56px var(--heading-font); letter-spacing: -.02em; }
.free-hero h1 span { background: linear-gradient(100deg, #008b9a, #006f4c 65%, #2c8730); background-clip: text; -webkit-text-fill-color: transparent; }
.free-hero p { font-size: 16px; line-height: 24px; margin: 16px auto 0; max-width: 740px; }
.free-library > h2 { font: 700 40px/48px var(--heading-font); letter-spacing: -.025em; margin-bottom: 40px; }
.free-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.free-prompt-card { position: relative; overflow: hidden; padding: 24px; border-radius: 14px; background: white; box-shadow: 0 1px 2px #18213612; --free-accent: #006e91; --free-tag: #e3f3ff; --free-gradient: linear-gradient(90deg,#00b1df,#00734e); }
.free-prompt-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--free-gradient); }
.free-card-video { --free-accent: #008261; --free-tag: #bcfbe0; --free-gradient: linear-gradient(90deg,#007f57,#adff35); }
.free-card-copy { --free-accent: #537d08; --free-tag: #caf98b; --free-gradient: linear-gradient(90deg,#abff30,#00a9df); }
.free-card-social { --free-accent: #00a7dc; --free-tag: #c4e7ff; --free-gradient: linear-gradient(90deg,#00afdf,#a5ff33,#65fabc); }
.free-card-youtube { --free-accent: #00866a; --free-tag: #bcfbe0; --free-gradient: linear-gradient(90deg,#60ffc0,#00658b,#00a7df); }
.free-card-ecommerce { --free-accent: #537d08; --free-tag: #caf98b; --free-gradient: linear-gradient(90deg,#75b200,#00a9df); }
.free-card-badges { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 20px; }
.free-category { display: inline-flex; align-items: center; gap: 3px; border-radius: 20px; background: #e9edff; padding: 2px 8px; white-space: nowrap; font: 600 12px/16px var(--heading-font); }
.free-category .line-icon { color: var(--free-accent); width: 14px; height: 14px; }
.free-card-badges .tool-badge { position: static; color: var(--free-accent); background: var(--free-tag); padding: 2px 8px; border-radius: 5px; font: 700 10px/14px var(--heading-font); letter-spacing: .02em; white-space: nowrap; }
.free-prompt-card h3 { font: 600 18px/26px var(--heading-font); letter-spacing: -.01em; margin-top: 16px; }
.free-card-description { font-size: 12px; line-height: 18px; margin-top: 4px; min-height: 36px; }
.free-preview { position: relative; height: 192px; overflow: hidden; margin-top: 16px; border-radius: 8px; background: #e9edff; }
.free-preview > img { width: 100%; height: 100%; object-fit: cover; }
.free-image-caption { position: absolute; inset: auto 0 0; padding: 24px 8px 8px; background: linear-gradient(transparent,#151b2fbb); color: white; font: 500 10px/14px var(--heading-font); letter-spacing: .02em; }
.free-preview-copy { height: 86px; padding: 8px; }
.free-code-heading { display: flex; align-items: center; gap: 4px; height: 14px; color: #7d8793; font: 600 10px/14px var(--heading-font); letter-spacing: .04em; }
.free-code-heading i { width: 8px; height: 8px; border-radius: 50%; background: #89959a; }
.free-code-heading span { margin-left: 4px; }
.free-preview-copy p { font: 700 10px/14px var(--heading-font); letter-spacing: .02em; color: var(--ink); }
.free-preview-copy strong { color: #00779d; }
.free-inputs { margin-top: 16px; }
.free-inputs h4 { font: 600 10px/14px var(--font); letter-spacing: .01em; color: var(--body); margin-bottom: 6px; }
.free-inputs > div { display: flex; flex-wrap: wrap; gap: 4px 6px; line-height: 18px; }
.free-inputs span { display: inline-block; background: #e9edff; border-radius: 3px; padding: 2px 8px; color: var(--ink); font: 700 10px/14px var(--heading-font); letter-spacing: .015em; }
.free-card-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; height: 28px; }
.free-card-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 3px; font: 600 12px/18px var(--heading-font); }
.free-card-actions button:first-child { color: var(--body); }
.free-card-actions button:last-child { background: #e9edff; border-radius: 24px; padding: 5px 16px; }
.free-card-actions .line-icon { width: 14px; height: 14px; }
.free-slide-deck { display: flex; justify-content: center; align-items: center; gap: 8px; height: 100%; }
.free-slide-deck > div { position: relative; background: white; border-radius: 4px; width: 48px; height: 64px; padding: 4px; color: #0087b4; }
.free-slide-deck > div:nth-child(2) { color: #008966; }
.free-slide-deck > div:nth-child(3) { color: #64891c; }
.free-slide-deck i { display: block; height: 8px; width: 100%; background: #d1e7ed; }
.free-slide-deck > div:nth-child(2) i:first-child { background: #cbe7df; }
.free-slide-deck > div:nth-child(3) i:first-child { background: #dde5ce; }
.free-slide-deck i:nth-child(2) { width: 28px; height: 5px; margin-top: 4px; background: #d5d9f5; }
.free-slide-deck span { position: absolute; left: 4px; bottom: 8px; font-size: 8px; line-height: 12px; }
.free-preview-youtube { display: flex; align-items: center; background: #f3f2ff; padding: 8px; }
.free-ctr { width: 100%; font: 700 10px/14px var(--heading-font); letter-spacing: .01em; }
.free-ctr > div:first-child { display: flex; justify-content: space-between; color: var(--body); margin-bottom: 4px; }
.free-ctr strong { color: #008366; }
.free-ctr-track { height: 8px; background: #e7eafe; border-radius: 8px; overflow: hidden; }
.free-ctr-track span { display: block; height: 100%; width: 94%; background: linear-gradient(90deg,#00acdd,#48daa2); }
.free-ctr p { font: inherit; margin-top: 8px; }
.free-preview-ecommerce { display: grid; align-content: center; padding: 8px; }
.free-product-benefits { display: grid; gap: 6px; }
.free-product-benefits p { display: flex; align-items: center; gap: 8px; padding: 6px; background: white; border-radius: 4px; font: 700 10px/14px var(--heading-font); }
.free-product-benefits .line-icon { width: 14px; height: 14px; color: #608c15; }
.free-card-ecommerce .free-inputs { margin-top: 12px; }
.free-first-run { position: relative; width: calc(100% - 192px); max-width: 1088px; min-height: 196px; margin: 80px auto 0; border-radius: 12px; padding: 40px; overflow: hidden; background: #e9edff url('../images/free-prompts/note-glow.png') no-repeat calc(100% + 144px) center / 448px 448px; }
.free-first-run > .line-icon { display: block; width: 14px; height: 14px; color: #00856d; }
.free-first-run h2 { font: 700 28px/36px var(--heading-font); letter-spacing: -.02em; margin-top: 8px; }
.free-first-run p { font-size: 14px; line-height: 22px; margin-top: 12px; }
.free-start { display: flex; flex-direction: column; align-items: center; width: calc(100% - 48px); max-width: 592px; padding: 40px 24px; margin: 80px auto 0; border-radius: 12px; background: linear-gradient(#d0d0cf,#bfc0d0); box-shadow: inset 0 3px 7px white; }
.free-start-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #00a5d333; color: #006e91; }
.free-start-icon .line-icon { width: 28px; height: 28px; }
.free-start > div { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.free-start .button { font-size: 14px; line-height: 20px; min-height: 36px; padding: 8px 24px; }
.free-start .button-gradient { min-width: 216px; }
.free-faq { max-width: 704px; width: calc(100% - 48px); margin: 40px auto 0; }
.free-faq > h2 { text-align: center; font: 700 28px/36px var(--heading-font); letter-spacing: -.02em; margin-bottom: 24px; }
.free-faq > div { display: grid; gap: 8px; }
.free-faq details { padding: 16px; border-radius: 8px; background: white; }
.free-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font: 700 18px/26px var(--heading-font); letter-spacing: -.01em; list-style: none; }
.free-faq summary::-webkit-details-marker { display: none; }
.free-faq summary::after { content: ''; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); width: 7px; height: 7px; transform: rotate(45deg); margin-right: 4px; flex-shrink: 0; }
.free-faq details[open] summary::after { transform: rotate(225deg); }
.free-faq details p { margin-top: 16px; font-size: 14px; line-height: 22px; }

@media (max-width: 1100px) {
    .free-width { width: calc(100% - 48px); }
    .free-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .free-first-run { width: calc(100% - 96px); }
    .free-desktop-break { display: none; }
    .free-hero p { max-width: 690px; }
}
@media (max-width: 700px) {
    .free-hero { padding-top: 36px; padding-bottom: 48px; background-position: center -180px; }
    .free-hero h1 { font-size: 40px; line-height: 46px; }
    .free-hero p { font-size: 14px; line-height: 23px; }
    .free-library > h2 { font-size: 32px; line-height: 40px; margin-bottom: 28px; }
    .free-grid { grid-template-columns: 1fr; gap: 20px; }
    .free-first-run { margin-top: 48px; padding: 28px; width: calc(100% - 48px); }
    .free-first-run h2 { font-size: 26px; line-height: 34px; }
    .free-start { margin-top: 48px; }
    .free-start > div { flex-wrap: wrap; }
    .free-faq > h2 { font-size: 25px; line-height: 34px; }
    .free-faq summary { font-size: 16px; line-height: 24px; }
}
@media (max-width: 400px) {
    .free-width, .free-first-run, .free-start, .free-faq { width: calc(100% - 32px); }
    .free-hero { padding-inline: 16px; }
    .free-hero h1 { font-size: 34px; line-height: 40px; }
    .free-prompt-card { padding: 20px; }
    .free-card-badges { gap: 4px; }
    .free-category { font-size: 10px; padding-inline: 6px; }
    .free-card-badges .tool-badge { font-size: 9px; padding-inline: 5px; }
    .free-preview-copy { height: auto; min-height: 86px; }
    .free-first-run { padding: 24px; }
}