.sales-page { --sales-green:#1d3e36; --sales-gold:#ffd487; --sales-cream:#fff6e5; background:var(--paper); color:var(--ink); overflow-x:clip; }
.sales-nav,.sales-hero,.sales-section,.sales-stage-section,.sales-rehearsal,.sales-footer { width:min(1320px,calc(100% - 6vw)); margin-inline:auto; }
.sales-nav { display:flex; align-items:center; justify-content:space-between; gap:var(--space); padding-block:var(--space-md); border-bottom:1px solid var(--line); }
.sales-brand { color:var(--sales-green); font:850 clamp(1.05rem,2.2vw,1.6rem)/1 var(--body); text-decoration:none; white-space:nowrap; }
.sales-brand small { color:var(--orange-dark); font-size:.65em; }
.sales-nav nav { display:flex; flex-wrap:wrap; gap:var(--space-md); font-size:.8rem; font-weight:750; }
.sales-nav nav a { text-decoration:none; }
.sales-nav nav a:hover { color:var(--orange-dark); }
.sales-hero { display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:3vw; padding-block:clamp(2rem,6vw,5rem); }
.sales-kicker { color:var(--orange-dark); font-size:.75rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.sales-hero h1 { margin:var(--space-md) 0; color:var(--sales-green); font:850 clamp(3rem,6.2vw,6rem)/1.02 var(--body); letter-spacing:-.065em; }
.sales-hero h1 em { color:var(--orange-dark); font-style:normal; }
.sales-hero-copy>p { max-width:38rem; font-size:clamp(1rem,1.6vw,1.18rem); line-height:1.65; color:var(--muted); }
@media(min-width:621px) { .sales-screen-line { display:block; } }
.sales-actions { display:flex; flex-wrap:wrap; gap:var(--space-sm); margin-top:var(--space-md); }
.sales-actions .button { font-size:.82rem; text-align:center; }
.sales-free { display:block; color:var(--muted); margin-top:var(--space-sm); font-size:.75rem; }
.sales-facts { display:flex; flex-wrap:wrap; gap:var(--space-sm); margin-top:var(--space-lg); }
.sales-facts span { padding:.5rem .7rem; border:1px solid var(--line); border-radius:var(--pill); font-size:.73rem; }
.sales-hero-art { min-width:0; min-height:32rem; position:relative; display:grid; place-items:center; border-radius:3rem; background:radial-gradient(ellipse at 50% 40%,#ffe9b8,#e5cbaa); }
.sales-hero-art>img { width:108%; max-width:none; object-fit:contain; filter:drop-shadow(0 1rem 1rem #775a3333); }
.sales-stamp { position:absolute; z-index:1; top:1.2rem; left:1.2rem; padding:1rem; background:var(--sales-green); color:var(--sales-gold); border-radius:50%; transform:rotate(-10deg); font-weight:850; text-align:center; font-size:.8rem; }
.sales-art-label { position:absolute; right:var(--space); bottom:var(--space); border-radius:var(--radius); padding:.8rem 1rem; color:var(--sales-cream); background:var(--sales-green); font-size:.82rem; font-weight:750; }
.sales-section { padding-block:clamp(2.5rem,6vw,5.5rem); }
.sales-section-heading h2 { font:850 clamp(2rem,4vw,3.7rem)/1.08 var(--body); letter-spacing:-.05em; color:var(--sales-green); margin:var(--space) 0; }
.sales-section-heading>p { max-width:40rem; color:var(--muted); line-height:1.65; }
.sales-how { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-md); list-style:none; padding:0; margin:var(--space-lg) 0 0; }
.sales-how li { background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-md); }
.sales-how li>b { display:block; color:var(--orange-dark); font-size:2.5rem; font-weight:850; }
.sales-how h3,.sales-trick-grid h3 { font-size:1.15rem; margin:var(--space) 0 var(--space-sm); }
.sales-how p,.sales-trick-grid p { color:var(--muted); font-size:.92rem; line-height:1.6; margin:0; }
.sales-stage-section { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:3vw; padding-block:var(--space-lg); }
.sales-stage { min-width:0; border-radius:var(--radius-lg); padding:var(--space-md); color:var(--sales-cream); background:linear-gradient(#40271722,#40271799),url('../../hall-fair.webp') center/cover #503627; box-shadow:var(--shadow); }
.sales-example { display:block; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.sales-lanes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-sm); margin-top:var(--space); }
.sales-lane { min-width:0; text-align:center; }
.sales-lane>strong { display:block; color:#9ed4ff; font-size:.9rem; }
.sales-lane[data-color='1']>strong { color:#ffa68e; }
.sales-lane[data-color='2']>strong { color:#b6e4a5; }
.sales-lane img { width:100%; height:13rem; object-fit:contain; }
.sales-lane>b { display:block; background:#302319ed; padding:.7rem .2rem; border-radius:.7rem; font-size:1.7rem; }
.sales-lane small { font-size:.6em; }
.sales-trick-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-md); margin-top:var(--space-lg); }
.sales-trick-grid article { padding:var(--space-md); border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--line); }
.sales-trick-grid article>span,.sales-trick-grid article>img { display:block; height:4rem; width:4rem; font-size:3rem; object-fit:contain; }
.sales-demo-note { color:var(--muted); margin-top:var(--space-md); }
.sales-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-md); margin-top:var(--space-lg); }
.sales-plans article { min-width:0; display:flex; flex-direction:column; gap:var(--space); padding:var(--space-lg); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--white); }
.sales-plans h3 { margin:0; font-size:1.15rem; }
.sales-plan-pricing { display:grid; gap:.4rem; }
.sales-plan-pricing>strong { font-size:2.9rem; line-height:1.1; letter-spacing:-.045em; color:var(--sales-green); }
.sales-plan-offer { display:flex; align-items:center; flex-wrap:wrap; gap:.7rem; }
.sales-plan-offer del { position:relative; color:var(--muted); font-size:1.12rem; line-height:1.4; font-weight:650; text-decoration:none; }
.sales-plan-offer del::after { content:""; position:absolute; left:-3%; top:50%; width:106%; height:2px; background:var(--orange-dark); transform:rotate(-12deg); pointer-events:none; }
.sales-plan-offer>span { padding:.22rem .5rem; border-radius:var(--pill); background:var(--sales-gold); color:var(--sales-green); font-size:.68rem; font-weight:800; }
.sales-plans p { color:var(--muted); font-size:.92rem; line-height:1.5; flex:1; }
.sales-plans .button { font-size:.78rem; text-align:center; }
.sales-plans .sales-plan-featured { border:2px solid var(--orange); box-shadow:var(--shadow); }
.sales-terms { color:var(--muted); font-size:.76rem; line-height:1.6; max-width:65rem; margin-top:var(--space-md); }
.sales-rehearsal { display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); padding:var(--space-lg); box-sizing:border-box; border-radius:var(--radius-lg); color:var(--sales-cream); background:var(--sales-green); }
.sales-rehearsal h2 { margin:0; font-size:1.4rem; }
.sales-rehearsal p { max-width:42rem; margin-bottom:0; color:#d7e3d8; font-size:.92rem; line-height:1.6; }
.sales-rehearsal .button { flex:none; font-size:.8rem; text-align:center; }
.sales-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space); color:var(--muted); padding-block:var(--space-lg); font-size:.75rem; }
@media(max-width:900px) { .sales-hero { grid-template-columns:1fr 1fr; }.sales-hero-art { min-height:25rem; }.sales-stage-section { grid-template-columns:1fr; }.sales-plans article { padding:var(--space-md); }.sales-rehearsal { flex-direction:column; align-items:flex-start; } }
@media(max-width:620px) { .sales-nav { align-items:flex-start; flex-direction:column; }.sales-nav nav { gap:var(--space);font-size:.74rem; }.sales-hero { grid-template-columns:1fr; padding-block:var(--space-lg);gap:var(--space-lg); }.sales-hero h1 { font-size:clamp(2.7rem,11.3vw,4rem); }.sales-hero-art { min-height:22rem; }.sales-hero-art>img { width:100%; }.sales-stamp { left:.7rem;top:.7rem;font-size:.72rem; }.sales-how,.sales-trick-grid,.sales-plans { grid-template-columns:1fr; }.sales-actions .button { width:100%; }.sales-lane img { height:9rem; }.sales-lane>b { font-size:1.35rem; }.sales-lane>strong { font-size:.76rem; }.sales-rehearsal { padding:var(--space-md); }.sales-rehearsal .button { width:100%; } }

/* Keep the slogan above the goat illustration. */
.sales-hero-art { grid-template-rows:auto minmax(0,1fr); gap:1rem; }
.sales-stamp { position:relative; top:auto; left:auto; justify-self:start; margin:-1.6rem 0 0 1.2rem; }
@media(max-width:620px) { .sales-stamp { top:auto; left:auto; margin:-1.1rem 0 0 .7rem; } }
@font-face { font-family:'Sales Rubik'; font-style:italic; font-weight:900; font-display:swap; src:url('../combo-v3/rubik-black-italic-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Sales Rubik'; font-style:italic; font-weight:900; font-display:swap; src:url('../combo-v3/rubik-black-italic-latin.woff2') format('woff2'); }
.sales-brand { display:flex; align-items:center; gap:10px; white-space:normal; }
.sales-brand-mascot { position:relative; display:block; width:58px; height:58px; flex:none; overflow:hidden; border-radius:50%; background:#ffe4a5; }
.sales-brand-mascot img { position:absolute; width:337%; max-width:none; left:-37%; top:-5%; }
.sales-brand-name { font:italic 900 clamp(19px,2vw,26px)/.99 'Sales Rubik',sans-serif; letter-spacing:-.035em; color:#1d3e36; }
.sales-brand-name small { position:relative; top:-.45em; margin-left:.12em; font-size:.47em; color:#b53913; letter-spacing:-.02em; }
.sales-onboarding .sales-section-heading h2,.sales-tricks .sales-section-heading h2 { margin-top:0; }
.sales-how li { display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:12px; }
.sales-how li>b { font-size:1.5rem; }
.sales-how h3 { margin:0 0 4px; }
.sales-trick-grid article { display:grid; grid-template-columns:55px minmax(0,1fr); align-items:center; gap:12px; }
.sales-trick-grid article>img { width:55px; height:55px; }
.sales-trick-grid h3 { margin:0 0 4px; }
.sales-tricks .sales-actions { display:flex; justify-content:center; margin-top:28px; }
.sales-tricks .sales-actions .sales-demo-cta { display:flex; align-items:center; justify-content:center; width:min(100%,560px); min-height:60px; font-size:20px; font-weight:850; box-shadow:0 5px 0 #853318; }
.sales-game-preview { margin:0; padding:0; background:#17372e; border-radius:18px; overflow:hidden; }
.sales-game-preview>img { display:block; width:100%; height:auto; }
.sales-game-preview figcaption { padding:9px 14px; color:#f9e9c4; font-size:12px; font-weight:650; }
@media(max-width:620px) {
  .sales-nav { padding-block:12px; gap:12px; }
  .sales-brand-mascot { width:50px; height:50px; }
  .sales-brand-name { font-size:23px; }
  .sales-onboarding,.sales-tricks { padding-block:12px; }
  .sales-onboarding .sales-section-heading h2,.sales-tricks .sales-section-heading h2 { margin:0 0 10px; font-size:24px; line-height:1.1; letter-spacing:-.035em; }
  .sales-how,.sales-trick-grid { gap:6px; margin:0; }
  .sales-how li { padding:7px 10px; grid-template-columns:24px minmax(0,1fr); gap:8px; }
  .sales-how li>b { font-size:19px; }
  .sales-how h3,.sales-trick-grid h3 { margin:0 0 2px; font-size:15px; line-height:1.1; }
  .sales-how p,.sales-trick-grid p { font-size:13px; line-height:1.18; }
  .sales-trick-grid article { padding:4px 10px; grid-template-columns:36px minmax(0,1fr); gap:10px; }
  .sales-trick-grid article>img { width:36px; height:36px; }
  .sales-tricks .sales-actions { margin-top:14px; }
  .sales-tricks .sales-actions .sales-demo-cta { width:100%; min-height:52px; font-size:18px; }
}
.sales-stage-section { grid-template-columns:1fr; gap:20px; }
.sales-stage-section .sales-section-heading { max-width:48rem; }
.sales-demo-options { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; width:100%; max-width:36rem; }
.sales-demo-option { display:grid; gap:8px; min-width:0; }
.sales-demo-option .button { display:flex; align-items:center; justify-content:center; width:100%; min-height:66px; padding:15px 18px; border-radius:18px; font:italic 900 22px/1.16 'Sales Rubik',sans-serif; text-align:center; text-wrap:balance; }
.sales-demo-option .button.secondary { min-height:62px; font-size:18px; border:2px solid #315a49; background:#fffaf0; color:#234637; }
.sales-demo-option p { margin:0; color:#4e5f51; font-size:14px; line-height:1.35; }
.sales-stamp { position:relative; top:auto; left:auto; justify-self:start; display:grid; place-content:center; width:140px; aspect-ratio:1; padding:12px; margin:18px 0 14px 18px; border:2px solid #caa253; border-radius:14px; transform:none; color:#ffdc91; background:#1d3e36; font:italic 900 19px/1.22 'Sales Rubik',sans-serif; text-align:center; box-shadow:0 3px 0 #ad85462e; }
.sales-hero-art { gap:0; }
@media(max-width:620px) {
 .sales-demo-options { gap:17px; }
 .sales-demo-option .button { min-height:66px; font-size:20px; }
 .sales-demo-option .button.secondary { font-size:17px; }
 .sales-demo-option p { font-size:13px; line-height:1.3; }
 .sales-stamp { top:auto; left:auto; width:128px; margin:14px 0 10px 14px; font-size:18px; }
}
.sales-plans { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(min-width:621px) and (max-width:1100px) {
  .sales-plans { gap:10px; }
  .sales-plans article { padding:18px 14px; }
  .sales-plan-pricing>strong { font-size:clamp(26px,3.2vw,40px); }
  .sales-plans h3 { font-size:16px; }
  .sales-plans p { font-size:14px; line-height:1.35; }
  .sales-plans .button { padding:12px 8px; font-size:13px; }
}
@media(max-width:620px) { .sales-plans { grid-template-columns:1fr; } }

/* Other projects use static, lazy-loaded frames from the actual games. */
.sales-projects { padding-block:24px 30px; border-top:1px solid #d2d9cc; }
.sales-projects h2 { margin:0 0 18px; color:#1d3e36; font:italic 900 clamp(24px,3vw,32px)/1.1 'Sales Rubik',sans-serif; letter-spacing:-.025em; }
.sales-project-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.sales-project { display:flex; flex-direction:column; min-width:0; overflow:hidden; background:#fffaf0; border:1px solid #d2d9cc; border-radius:16px; }
.sales-project-media { display:block; aspect-ratio:16/9; width:100%; overflow:hidden; background:#171a23; }
.sales-project-media img { display:block; width:100%; height:100%; object-fit:contain; }
.sales-project-copy { display:flex; flex:1; flex-direction:column; gap:8px; padding:14px; }
.sales-project h3 { margin:0; color:#1d3e36; font:italic 900 20px/1.15 'Sales Rubik',sans-serif; }
.sales-project p { margin:0; color:#4e5f51; font-size:14px; line-height:1.4; }
.sales-project-link,.sales-project-status { display:flex; align-items:center; align-self:flex-start; min-height:40px; margin-top:auto; color:#234637; font-size:13px; font-weight:800; text-underline-offset:3px; }
.sales-project-link { text-decoration:underline; }
.sales-project-link:hover { color:#10251e; }
.sales-project-link:focus-visible { outline:3px solid #315a49; outline-offset:3px; border-radius:4px; }
.sales-project-status { color:#73542b; }
@media(min-width:621px) and (max-width:1000px) {
  .sales-project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:620px) {
  .sales-projects { padding-block:18px 22px; }
  .sales-projects h2 { margin-bottom:12px; font-size:24px; }
  .sales-project-grid { grid-template-columns:1fr; gap:8px; }
  .sales-project { display:grid; grid-template-columns:104px minmax(0,1fr); align-items:center; border-radius:12px; }
  .sales-project-media { aspect-ratio:16/10; border-radius:8px; margin:8px 0 8px 8px; width:calc(100% - 8px); }
  .sales-project-copy { padding:8px 10px 6px 12px; gap:3px; }
  .sales-project h3 { font-size:17px; }
  .sales-project p { font-size:13px; line-height:1.25; }
  .sales-project-link,.sales-project-status { min-height:24px; font-size:12px; }
}

/* Keep the complete player screen readable; captions stay outside its controls. */
.sales-hero-game { min-height:0; padding:20px; gap:18px; border:1px solid #d7c6a1; border-radius:32px; }
.sales-hero-game>img { display:block; width:auto; max-width:100%; max-height:600px; height:auto; filter:none; border:1px solid #35665b; border-radius:22px; }
.sales-hero-game-caption { display:flex; align-items:center; justify-content:center; gap:18px; width:100%; }
.sales-hero-game .sales-stamp { flex:0 0 112px; width:112px; margin:0; font-size:16px; padding:9px; }
.sales-hero-game .sales-art-label { position:static; padding:0; background:none; color:#1d3e36; font-size:15px; line-height:1.35; }
.sales-hero-game .sales-art-label small { display:block; margin-top:8px; color:#4e5f51; font-size:11px; font-weight:500; }
@media(max-width:620px) {
 .sales-hero-game { padding:14px; gap:14px; border-radius:24px; }
 .sales-hero-game>img { max-height:570px; border-radius:18px; }
 .sales-hero-game-caption { gap:12px; }
 .sales-hero-game .sales-stamp { flex-basis:104px; width:104px; font-size:15px; }
 .sales-hero-game .sales-art-label { font-size:13px; }
}

/* Only the two green headline lines change on phones. */
@media(max-width:620px) {
  .sales-hero h1 .sales-hero-title { display:block; font-size:7.65vw; line-height:1.02; letter-spacing:-.065em; }
  .sales-hero h1 .sales-hero-title>span { display:block; white-space:nowrap; line-height:1.02; }
  .sales-hero h1 .sales-hero-title>span+span { font-size:7.85vw; letter-spacing:-.065em; }
  .sales-hero h1 .sales-hero-title+br { display:none; }
}