/* Hebrew AI battle additions to /guides/_shared/guide.css. */
html { scroll-padding-block-start: 100px; }
h1, h2, h3, h4, p, label, li, figcaption, summary { overflow-wrap: anywhere; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, label, figcaption, summary, blockquote { text-wrap: pretty; }
bdi { white-space: nowrap; }
.battle-hero { grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(28px, 5vw, 72px); }
.battle-hero h1 { font-size: clamp(34px, 4.3vw, 56px); }
.verdict { margin-block: 0 30px; padding: 16px 22px; background: var(--soft); border-inline-start: 3px solid var(--color-primary); border-radius: 4px 12px 12px 4px; font: 700 24px/1.45 Rubik, Arial, sans-serif; }
.verdict span { display: block; font: 700 16px/1.5 Assistant, sans-serif; color: var(--color-primary); margin-block-end: 4px; }
.podium { padding: 22px; background: var(--color-bg); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 50px var(--shade); }
.podium ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.podium li { display: grid; grid-template-columns: 36px 132px minmax(0, 1fr); gap: 14px; align-items: center; padding-block-end: 16px; border-block-end: 1px solid var(--line); }
.podium li:last-child { padding-block-end: 0; border-block-end: 0; }
.rank { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); font: 700 18px Rubik, sans-serif; }
.podium li:nth-child(2) .rank { background: color-mix(in srgb, var(--color-primary) 60%, var(--color-bg)); }
.podium li:nth-child(3) .rank { background: color-mix(in srgb, var(--color-text) 35%, var(--color-bg)); }
.podium img { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #0d0c14; }
.podium b { display: block; font: 700 19px/1.35 Rubik, sans-serif; }
.podium li span:not(.rank) { display: block; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.podium figcaption { margin-block-start: 16px; font-size: 15px; text-align: center; }
.guide-section { padding-block: 72px; }
.band { background: var(--color-bg-alt); padding-block: 72px; }
.section-lead { max-inline-size: 72ch; font-size: 20px; margin-block: 16px 8px; }
.rule-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-block: 32px 40px; }
.rule-grid article { border-block-start: 2px solid var(--line); padding-block-start: 20px; }
.feature-number { font: 700 15px Rubik, sans-serif; color: var(--color-primary); }
.rule-grid h3 { margin-block: 14px 10px; font-size: 23px; }
.rule-grid p { font-size: 18px; }
.prompt-list { margin-block-end: 20px; }
.prompt-list .prompt-intro { margin-block: 0 8px; }
.prompt-list .prompt-code pre { font-size: 17px; line-height: 1.75; }
.versus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-block: 32px 24px; }
.contender { display: flex; flex-direction: column; gap: 14px; min-inline-size: 0; padding: 24px; background: var(--color-bg); border: 1px solid var(--line); border-radius: 18px; }
.contender h3 { font-size: 22px; padding-block-end: 12px; border-block-end: 1px solid var(--line); }
.contender blockquote { margin: 0; padding: 12px 16px; font-size: 19px; line-height: 1.55; font-weight: 600; }
.contender > p { font-size: 18px; line-height: 1.6; }
.score { font-size: 16px !important; color: var(--ink-soft); }
.score b { color: var(--color-text); font-size: 18px; }
.contender .score { margin-block-start: auto; padding-block-start: 4px; }
.shot { inline-size: 100%; block-size: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--color-bg); }
.open-live { font-weight: 700; font-size: 18px; align-self: start; }
.all-copy { border-block-start: 1px solid var(--line); padding-block-start: 6px; }
.all-copy summary { font-weight: 700; font-size: 17px; color: var(--color-primary); padding-block: 10px; }
.all-copy .copy-label { font-weight: 700; font-size: 15px; color: var(--ink-soft); margin-block: 14px 4px; }
.all-copy ol { margin: 0; padding-inline-start: 22px; font-size: 17px; line-height: 1.55; display: grid; gap: 6px; }
.all-copy p:not(.copy-label) { font-size: 17px; line-height: 1.6; }
.banner-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-block: 30px 56px; }
.banner-list figcaption, .render-list figcaption { margin-block-start: 12px; font-size: 17px; }
.banner-list figcaption b, .banner-list figcaption span, .render-list figcaption b, .render-list figcaption span { display: block; }
.banner-list figcaption b, .render-list figcaption b { font: 700 19px/1.4 Rubik, sans-serif; color: var(--color-text); margin-block-end: 4px; }
.sub-heading { font-size: clamp(24px, 2.4vw, 30px); margin-block: 0 12px; }
.anim-rows { display: grid; gap: 30px; margin-block: 28px 24px; }
.anim-rows h4 { font: 700 20px/1.4 Rubik, sans-serif; margin: 0 0 12px; }
.anim-rows h4 span { display: block; font: 400 16px/1.5 Assistant, sans-serif; color: var(--ink-soft); margin-block-start: 2px; }
.frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.frames img { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; }
.dark-band { background: var(--color-text); color: var(--color-bg); }
.dark-band .eyebrow { color: color-mix(in srgb, var(--color-primary) 45%, var(--color-bg)); }
.dark-band .small-note, .dark-band .section-lead { color: color-mix(in srgb, var(--color-bg) 80%, transparent); }
.render-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-block: 32px 24px; }
.render-list img { inline-size: 100%; block-size: auto; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--color-bg) 20%, transparent); background: #000; }
.render-list figcaption { color: color-mix(in srgb, var(--color-bg) 82%, transparent); }
.render-list figcaption b { color: var(--color-bg); }
.judge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-block: 30px 56px; }
.judge-grid article { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--color-bg); }
.judge-who { font: 700 18px/1.4 Rubik, sans-serif; }
.judge-saw { font-size: 17px; color: var(--ink-soft); margin-block: 6px 14px; }
.judge-pick { font: 700 26px/1.3 Rubik, sans-serif; color: var(--color-primary); }
.judge-note { font-size: 16px; color: var(--ink-soft); margin-block-start: 4px; }
.table-scroll { overflow-x: auto; margin-block: 18px 16px; border: 1px solid var(--line); border-radius: 14px; }
.score-table { inline-size: 100%; min-inline-size: 760px; border-collapse: collapse; font-size: 17px; }
.score-table th, .score-table td { padding: 12px 14px; text-align: center; border-block-end: 1px solid var(--line); white-space: nowrap; }
.score-table thead th { font-size: 15px; background: var(--color-bg-alt); vertical-align: bottom; white-space: normal; }
.score-table th[scope="row"], .score-table td:nth-child(2) { text-align: start; }
.score-table tbody tr:last-child > * { border-block-end: 0; }
.score-table tbody tr:nth-child(2n) > * { border-block-end-width: 2px; }
.score-table small { display: block; font-size: 13px; color: var(--ink-soft); font-weight: 400; }
.score-table td small { color: var(--color-danger); }
.judges-wrong { margin-block-start: 48px; padding: 30px; background: var(--soft); border-radius: 18px; }
.judges-wrong h3 { font-size: 27px; margin-block-end: 14px; }
.judges-wrong p { font-size: 19px; margin-block: 10px; }
.judges-wrong ul { margin-block: 8px 16px; padding-inline-start: 24px; font-size: 19px; display: grid; gap: 4px; }
.business-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; }
.takeaways { margin: 0; padding: 28px; padding-inline-start: 52px; background: var(--color-bg); border: 1px solid var(--line); border-radius: 20px; display: grid; gap: 18px; font-size: 19px; line-height: 1.55; }
.takeaways strong { display: block; font: 700 21px/1.4 Rubik, sans-serif; margin-block-end: 2px; }
.takeaways li::marker { color: var(--color-primary); font-weight: 700; }
.faq.guide-section { padding-block: 72px; }
.work-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; padding-block: 8px 64px; text-align: center; }
.work-cta p { font: 700 clamp(24px, 2.6vw, 30px)/1.35 Rubik, Arial, sans-serif; max-inline-size: none; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 5px; }
@media (max-width: 1000px) {
  .rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .versus, .banner-list, .render-list, .judge-grid { grid-template-columns: 1fr; max-inline-size: 620px; }
  .battle-hero { grid-template-columns: 1fr; }
  .podium { max-inline-size: 560px; }
  .business-layout { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 650px) {
  .topbar nav { flex-wrap: wrap; justify-content: center; gap: 12px 18px; }
  .battle-hero h1 { font-size: 33px; }
  .verdict { font-size: 21px; padding: 14px 16px; }
  .podium { padding: 16px; }
  .podium li { grid-template-columns: 30px 96px minmax(0, 1fr); gap: 10px; }
  .rank { inline-size: 30px; block-size: 30px; font-size: 16px; }
  .podium b { font-size: 17px; }
  .podium li span:not(.rank) { font-size: 15px; }
  .rule-grid { gap: 22px 16px; }
  .rule-grid h3 { font-size: 20px; }
  .rule-grid p { font-size: 17px; }
  .guide-section, .band, .faq.guide-section { padding-block: 48px; }
  .section-lead { font-size: 19px; }
  .contender { padding: 18px; }
  .frames { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-block-end: 6px; }
  .frames img { flex: 0 0 82%; scroll-snap-align: start; }
  .judges-wrong { padding: 22px; }
  .judges-wrong h3 { font-size: 24px; }
  .takeaways { padding: 22px; padding-inline-start: 42px; font-size: 18px; }
  .takeaways strong { font-size: 19px; }
  .work-cta { padding-block: 0 48px; }
  .prompt-list .prompt-code pre { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }