:root{
  --ink:#1C211F;
  --paper:#F7F6F2;
  --surface:#FFFFFF;
  --muted:#626864;
  --line:#D8DAD4;
  --accent:#F0B84A;
  --accent-soft:#F3EFE6;
  --accent-pale:#F7F3E8;
  --accent-deep:#79500E;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}
a{color:inherit}
button{font:inherit}
.page{min-width:0;overflow-x:clip}
.app-icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.eyebrow{display:block;margin:0 0 22px;color:var(--accent-deep);font:500 11px/1.35 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.page h1,.page h2,.page h3,.page p{margin-top:0}
.page h1,.page h2{font-weight:500;letter-spacing:-.065em}
.page h1,.page h2,.page h3{overflow-wrap:anywhere;hyphens:auto}
.page h1 em,.page h2 em,.formula em{font-family:Georgia,serif;font-weight:400}

/* The existing portrait video is the first-screen product visual. */
.app-intro{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(35px,5vw,90px);padding:clamp(48px,5vw,82px) 5.5vw;background:var(--accent-soft);border-bottom:1px solid var(--line)}
.app-intro>section{min-width:0}
.hero-copy{max-width:720px}
.hero h1{max-width:14ch;margin:0;font-size:clamp(42px,4.5vw,70px);line-height:1.02}
.hero h1 em{display:block;margin-top:.07em}
.hero-copy>p:not(.eyebrow){max-width:525px;margin:28px 0 0;color:var(--muted);font-size:clamp(15px,1.3vw,18px);line-height:1.6}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:30px}
.hero .button.dark{border-color:var(--accent);background:var(--accent);color:var(--ink)}
.hero .button.dark:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.video-section{scroll-margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,230px);align-items:center;gap:24px;padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--surface)}
.video-section .section-intro h2{max-width:12ch;margin:0 0 15px;font-size:clamp(23px,2.15vw,33px);line-height:1.13}
.video-section .section-intro p:not(.eyebrow){margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.video-section .eyebrow{margin-bottom:17px;font-size:10px}
.video-card{min-width:0}
.video-card video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border:1px solid var(--line);border-radius:16px;background:#161816}
.video-load-error{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:12px;line-height:1.4}
.video-load-error[hidden]{display:none}
.video-load-error button{flex:0 0 auto;padding:7px 10px;border:1px solid var(--ink);border-radius:7px;background:var(--surface);color:var(--ink);font-size:12px;cursor:pointer}
.video-load-error button:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
.video-card--portrait video{max-width:230px;aspect-ratio:9/16;border:6px solid var(--ink);border-radius:24px;box-shadow:0 14px 30px rgba(28,33,31,.14)}
.video-card h3{margin:14px 0 4px;font-size:15px;line-height:1.25;font-weight:700;letter-spacing:-.025em}
.video-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}

/* Shared editorial rhythm with the business training page. */
.page main>section{padding:clamp(58px,6vw,92px) 5.5vw;border-bottom:1px solid var(--line)}
.page main>.light,.page main>.dark{background:var(--paper);color:var(--ink)}
.copy-grid{display:grid;grid-template-columns:minmax(175px,.62fr) minmax(0,1.38fr);align-items:start;gap:clamp(35px,6vw,92px);max-width:1440px;margin:auto}
.copy-grid>div:last-child{min-width:0;max-width:920px}
.copy-grid h2,.section-intro h2{margin:0 0 24px;font-size:clamp(31px,3.55vw,53px);line-height:1.08}
.copy-grid h3{margin:36px 0 13px;font-size:clamp(20px,2vw,26px);line-height:1.2;letter-spacing:-.035em}
.copy-grid p{max-width:72ch;margin:0 0 16px;color:var(--muted);font-size:15px;line-height:1.68}
.copy-grid .lead{color:var(--ink);font-size:clamp(18px,1.6vw,22px);line-height:1.5;letter-spacing:-.025em}
.rule-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;list-style:none;margin:24px 0;padding:0}
.rule-list li{display:flex;align-items:center;gap:13px;min-width:0;padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:var(--surface);font-size:14px;line-height:1.5}
.list-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border:1px solid #E4C680;border-radius:8px;background:var(--accent-pale);color:var(--accent-deep)}
.list-icon svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rule-list li>span:last-child{display:block;flex:1;min-width:0}

/* One dark demonstration section gives the light page a clear pause. */
.page main>.solution-section{background:var(--ink);color:var(--paper)}
.solution-section .eyebrow{color:var(--accent)}
.solution-section .copy-grid p{color:#CED0C9}
.solution-section .copy-grid .lead{color:var(--paper)}
.solution-section .rule-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:25px 0 22px}
.solution-section .rule-list li{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:112px;padding:13px;border-color:rgba(247,246,242,.28);background:rgba(255,255,255,.055);color:var(--paper);font-size:13px}
.solution-section .list-icon{border-color:#9E7529;background:rgba(240,184,74,.13);color:var(--accent)}

.benefit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:26px}
.benefit-card{min-width:0;padding:21px;border:1px solid var(--line);border-radius:17px;background:var(--surface)}
.benefit-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:12px;border:1px solid #E4C680;border-radius:10px;background:var(--accent-pale);color:var(--accent-deep)}
.benefit-icon svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.benefit-card h3{margin:0 0 10px;font-size:clamp(18px,1.6vw,22px);line-height:1.22}
.benefit-card p{margin:0;font-size:13px;line-height:1.55}
.retention-section{background:var(--accent-pale)!important}
.retention-section .copy-grid{grid-template-columns:1fr;gap:0}
.retention-section .copy-grid>div:last-child{max-width:none}
.retention-section .copy-grid>h2{max-width:18ch;margin-bottom:12px}
.retention-section .section-lead{max-width:720px;margin:0;color:var(--muted);font-size:clamp(17px,1.8vw,23px);line-height:1.4;letter-spacing:-.025em}
.retention-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.retention-grid .benefit-card{min-height:0}
.retention-grid .benefit-icon{border-color:#C5902B;background:var(--accent);color:var(--ink)}
.retention-grid .benefit-card h3{font-size:18px}
.value-section .benefit-card:last-child{grid-column:1/-1}

.business-video{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,100px);align-items:center;background:var(--accent-soft)}
.business-video .section-intro{max-width:510px}
.business-video .section-intro h2{margin-bottom:17px}
.business-video .section-intro p:not(.eyebrow){margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.business-video .video-grid{min-width:0}
.business-video .video-card{padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.business-video .video-card video{aspect-ratio:16/9;object-fit:cover;border-radius:12px}

.analytics-section{background:var(--accent-soft)!important}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:27px 0 30px}
.stat{min-width:0;padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}
.stat strong{display:block;margin-bottom:10px;color:var(--accent-deep);font-size:clamp(32px,3.2vw,50px);line-height:1;font-weight:600;letter-spacing:-.06em}
.stat span{display:block;color:var(--muted);font-size:12px;line-height:1.55}
.formula{margin:24px 0 0;padding:22px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:0 14px 14px 0;background:var(--surface);font-size:clamp(17px,1.7vw,22px);line-height:1.5}
.formula small{color:var(--muted);font:10px/1.5 'DM Mono',monospace;letter-spacing:.04em}
.formula strong{color:var(--accent-deep)}
.ecosystem-section{background:var(--accent-pale)!important}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.tag-list span{padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:12px;line-height:1.3}
.ecosystem-section .formula{margin:28px 0 35px}
.experience-section .rule-list{margin-bottom:25px}
.experience-section h3:last-of-type{margin-top:42px;padding-top:26px;border-top:3px solid var(--accent)}
.experience-section h3:last-of-type+p{margin-bottom:7px;color:var(--accent-deep);font:11px/1.5 'DM Mono',monospace;letter-spacing:.08em}
.experience-section h3:last-of-type+p+p{color:var(--ink);font-size:clamp(20px,2vw,27px);font-weight:600;line-height:1.35}

.page main>.closing{background:var(--accent-soft)}
.closing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(28px,5vw,90px);max-width:none;scroll-margin-top:24px}
.closing h2{max-width:850px;margin:0;font-size:clamp(37px,5vw,74px);line-height:1.05}
.closing p:not(.eyebrow){max-width:630px;margin:19px 0 0;color:var(--muted);font-size:15px;line-height:1.65}
.closing .button{margin-top:5px;border-color:var(--accent);background:var(--accent);color:var(--ink)}
.closing .button:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.application-contact-form{display:grid;gap:16px;padding:clamp(20px,3vw,34px);border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.application-contact-form[hidden]{display:none}
.application-contact-form label:not(.application-contact-consent):not(.application-contact-trap){display:grid;gap:6px;color:var(--ink);font:500 11px/1.4 'DM Mono',monospace;text-transform:uppercase}
.application-contact-form small{color:var(--muted);font-size:10px;text-transform:none}
.application-contact-form input:not([type="checkbox"]),.application-contact-form textarea{width:100%;min-width:0;padding:11px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font:15px/1.4 Manrope,Arial,sans-serif;text-transform:none;resize:vertical}
.application-contact-form input:focus-visible,.application-contact-form textarea:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
.application-contact-consent{display:flex;align-items:flex-start;gap:9px;color:var(--muted);font-size:11px;line-height:1.5}
.application-contact-consent input{flex:0 0 auto;margin:2px 0 0;accent-color:var(--accent-deep)}
.application-contact-consent a{color:var(--ink)}
.application-contact-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.application-contact-form .button{justify-self:start;min-width:215px;cursor:pointer}
.application-contact-form .button:disabled{opacity:.6;cursor:wait}
.closing p.application-contact-status{margin:0;color:var(--accent-deep);font-size:13px;line-height:1.5}
.closing p.application-contact-status:empty{display:none}
.closing p.application-contact-status.is-error{color:#8d281f}

@media(max-width:1150px){
  .app-intro{grid-template-columns:1fr;gap:30px}
  .hero h1{max-width:15ch}
  .video-section{grid-template-columns:minmax(0,1fr) minmax(150px,220px)}
  .solution-section .rule-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .retention-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .app-intro{padding:35px 20px 42px}
  .hero h1{font-size:clamp(39px,9.2vw,61px);line-height:1.05}
  .hero-copy>p:not(.eyebrow){margin-top:20px}
  .hero-actions{gap:16px;margin-top:23px}
  .video-section{grid-template-columns:minmax(0,1fr) minmax(140px,195px);gap:15px;padding:17px}
  .page main>section{padding:54px 20px}
  .copy-grid,.business-video{grid-template-columns:1fr;gap:14px}
  .copy-grid h2,.section-intro h2{font-size:clamp(30px,7.5vw,45px)}
  .copy-grid h3{margin-top:29px}
  .solution-section .rule-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .solution-section .rule-list li{min-height:0}
  .business-video{gap:24px}
  .business-video .video-card{max-width:660px}
  .closing{grid-template-columns:1fr}
}
@media(max-width:540px){
  .video-section{display:block}
  .video-section .section-intro h2{max-width:none}
  .video-section .video-card{margin-top:18px}
  .video-card--portrait video{width:min(100%,220px);margin:auto}
  .video-section .video-card h3,.video-section .video-card p{text-align:center}
  .hero-actions{align-items:stretch;flex-direction:column}
  .hero-actions .button{width:100%}
  .rule-list,.benefit-grid,.retention-grid,.stats-grid{grid-template-columns:1fr}
  .solution-section .rule-list{grid-template-columns:1fr}
  .solution-section .rule-list li{flex-direction:row;align-items:center;gap:11px;padding:12px 14px}
  .retention-grid .benefit-card,.value-section .benefit-card{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;row-gap:5px;align-content:start;padding:16px}
  .retention-grid .benefit-icon,.value-section .benefit-icon{grid-row:1/3;margin:0}
  .retention-grid .benefit-card h3,.value-section .benefit-card h3{grid-column:2;margin:0;font-size:18px;line-height:1.28}
  .retention-grid .benefit-card p,.value-section .benefit-card p{grid-column:2;margin:0;font-size:13px;line-height:1.5}
  .value-section .benefit-card:last-child{grid-column:auto}
  .stat{display:grid;grid-template-columns:minmax(90px,.48fr) minmax(0,1fr);align-items:center;gap:12px;padding:15px 16px}
  .stat strong{margin:0;font-size:clamp(29px,8vw,38px)}
  .stat span{font-size:12px;line-height:1.45}
  .tag-list span{font-size:11px}
  .closing .button{width:100%}
  .application-contact-form .button{justify-self:stretch;min-width:0}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .benefit-card,.stat{transition:transform .18s ease,border-color .18s ease}
  .benefit-card:hover,.stat:hover{transform:translateY(-2px);border-color:#C8B47E}
}