:root{--orange:#c94416;--orange2:#e8581c;--cream:#fff1cf;--paper:#f5d69f;--ink:#37180b;--green:#354f2c;--gold:#e9a517;--shadow:0 16px 0 #8e2c0c,0 25px 32px #5f260d44}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#e7bd7c url('assets/orange-paper-tile.png') center/900px;color:var(--ink);font-family:'DM Sans',sans-serif;overflow-x:hidden}.paper-grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.1;background:url('assets/paper.png') center/550px;mix-blend-mode:multiply}.nav{height:90px;padding:0 clamp(24px,7vw,108px);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;background:#fff1cfdd;border-bottom:1px solid #ac6e3d55}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:24px Rye,serif;letter-spacing:2px}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--green);border:3px solid #eab33c;color:#f6b91c;font:24px Rye,serif;box-shadow:0 3px 0 #21150a}.nav nav{display:flex;align-items:center;gap:clamp(20px,4vw,54px)}.nav nav a,footer>a:last-of-type{color:var(--ink);text-decoration:none;font-size:13px;font-weight:700}.nav nav a:hover,.text-link:hover{color:var(--orange)}.nav .lang{padding:12px 17px;border:1px solid #90522e77;border-radius:30px;background:#fff4d9}.lang span{color:var(--orange)}.hero{min-height:665px;padding:80px clamp(24px,9vw,140px) 88px;position:relative;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:2vw;background:linear-gradient(120deg,#e9571a 0%,#cb3e12 54%,#b43112 100%);color:#fff1ce;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:url('assets/paper.png') center/720px;opacity:.2;mix-blend-mode:screen;pointer-events:none}.hero-copy{position:relative;z-index:1;max-width:520px}.eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:11px}.spark{color:#f5bb27;font-size:20px;vertical-align:-2px;margin-right:8px}h1,h2,h3{font-family:Rye,Georgia,serif;font-weight:400}h1{font-size:clamp(53px,7.5vw,100px);line-height:.99;letter-spacing:-2px;margin:26px 0}h1 em{color:#ffc845;font-style:normal}.lead{font-size:17px;line-height:1.7;max-width:420px;color:#ffebd1}.button{margin-top:25px;display:inline-flex;align-items:center;gap:25px;padding:15px 21px;background:#f3b02a;color:#381807;text-decoration:none;text-transform:uppercase;font-weight:800;letter-spacing:1px;border-radius:12px;box-shadow:0 5px 0 #8d450b,0 10px 15px #4c180b55;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-3px);box-shadow:0 8px 0 #8d450b,0 14px 20px #4c180b55}.button span{font-size:20px}.social-proof{display:flex;align-items:center;gap:12px;margin-top:35px;font-size:12px;color:#ffdfb4}.mini-tiles{display:flex}.mini-tiles b{width:25px;height:27px;background:#fff1d3;color:#32180b;display:grid;place-items:center;border-radius:5px;box-shadow:0 2px 0 #ad8354;margin-right:-4px;font:15px Rye,serif;transform:rotate(-5deg)}.hero-scene{position:relative;height:480px;display:grid;place-items:center;perspective:900px}.board-shadow{position:absolute;width:min(94%,500px);height:330px;background:#631d0c;transform:rotate(-7deg) translate(16px,28px);filter:blur(5px);border-radius:22px}.board{position:relative;width:min(94%,500px);aspect-ratio:1.38;background:#f2d29b url('assets/paper.png') center/500px;border:13px solid #7b381b;border-radius:21px;box-shadow:inset 0 0 0 4px #f4d8a5,var(--shadow);transform:rotate(-7deg);animation:board-bob 5s ease-in-out infinite;overflow:hidden}.board-grid{position:absolute;inset:10px;background-image:linear-gradient(#7a431a33 1px,transparent 1px),linear-gradient(90deg,#7a431a33 1px,transparent 1px);background-size:37px 37px}.word{position:absolute;display:flex}.word-vertical{left:42%;top:15%;flex-direction:column}.word-horizontal{left:42%;top:52%}.tile,.floating-tile{width:43px;height:43px;background:#fff5de url('assets/paper.png') center/160px;border-radius:8px;box-shadow:0 4px 0 #b79060,0 6px 9px #44210d44;display:grid;place-items:center;position:relative;color:#25180f;font:28px Rye,serif}.tile small,.floating-tile small{position:absolute;right:4px;bottom:2px;font:10px 'DM Sans',sans-serif}.word-vertical .tile:nth-child(2){background-color:#f2b52f}.bonus{position:absolute;display:grid;place-items:center;width:34px;height:34px;background:#d64b18;color:#fff2cd;border:2px solid #fff1ce;border-radius:3px;font-weight:800}.bonus-a{left:10%;top:14%}.bonus-b{right:10%;bottom:11%;background:#e9ae20;color:#35502c}.floating-tile{position:absolute;width:62px;height:62px;font-size:40px;z-index:2}.tile-float-a{top:14%;right:5%;transform:rotate(12deg);animation:float-a 4s ease-in-out infinite}.tile-float-b{left:1%;bottom:10%;transform:rotate(-13deg);animation:float-b 4.6s ease-in-out infinite}.caption-card{position:absolute;right:0;bottom:1%;background:#fff1ce;color:#3c210d;padding:16px 19px;border-radius:11px;box-shadow:0 6px 0 #8c390f;font-family:Rye,serif;font-size:13px;transform:rotate(3deg);display:flex;gap:12px;align-items:center}.caption-star{font-size:27px;color:#dd9c17}.orbit{position:absolute;border:1px dashed #ffd39888;border-radius:50%;width:480px;height:480px}.orbit-two{width:560px;height:560px;animation:spin 50s linear infinite}.side-note{position:absolute;right:20px;top:45%;writing-mode:vertical-rl;font-size:9px;letter-spacing:4px;color:#ffd69f}.ticker{overflow:hidden;background:#f2b32a;color:#3d200b;padding:13px 0;transform:rotate(-1deg) scale(1.03);position:relative;z-index:2;font:19px Rye,serif;white-space:nowrap}.ticker div{width:max-content;animation:marquee 28s linear infinite}.ticker i{color:#a53d12;font-style:normal;margin:0 35px}.intro{text-align:center;padding:125px 24px 110px;background:#fff0d0 url('assets/paper.png') center/700px}.intro h2{font-size:clamp(38px,5vw,63px);line-height:1.1;margin:22px 0}.intro>p:not(.eyebrow){max-width:590px;margin:0 auto;color:#68482f;line-height:1.8}.intro .eyebrow{color:#a8481b}.text-link{display:inline-block;margin-top:25px;color:#923612;text-decoration:none;text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:1.5px}.text-link span{margin-left:10px}.feature-row{display:grid;grid-template-columns:repeat(3,1fr);padding:0 clamp(20px,8vw,120px) 110px;gap:16px;background:#fff0d0 url('assets/paper.png') center/700px}.feature{padding:30px 28px 32px;min-height:340px;border-radius:14px;box-shadow:0 7px 0 #7b4b26}.feature-orange{background:#e4561c;color:#fff1d1}.feature-cream{background:#f4cf91}.feature-green{background:#3f5b35;color:#fff0d0}.feature-num{font-size:10px;letter-spacing:2px;font-weight:800;opacity:.72}.feature-icon{height:100px;display:flex;align-items:center;margin:14px 0 8px}.icon-stack b{width:53px;height:57px;background:#fff2d6;color:#32190b;border-radius:8px;display:grid;place-items:center;font:29px Rye,serif;box-shadow:0 4px 0 #9a784b;transform:rotate(-8deg)}.icon-stack b:nth-child(2){transform:translate(-8px,9px) rotate(6deg)}.icon-stack b:nth-child(3){transform:translate(-15px,-7px) rotate(10deg);background:#f5b830}.icon-spark,.icon-people{font-size:79px;color:#d28b13}.icon-people{color:#eab237}.feature h3{font-size:28px;line-height:1.12;margin:6px 0 12px}.feature p{font-size:13px;line-height:1.7;max-width:290px;opacity:.84}.cta{position:relative;text-align:center;padding:100px 20px 108px;background:#c84014;color:#fff0d0;overflow:hidden}.cta:before{content:"";position:absolute;inset:0;background:url('assets/paper.png') center/700px;opacity:.16}.cta>*{position:relative}.cta .eyebrow{color:#ffc04a}.cta h2{font-size:clamp(54px,8vw,90px);line-height:.98;margin:16px 0}.cta>p:not(.eyebrow){color:#ffdbb7}.button-light{background:#fff0d0}.cta-star{position:absolute;top:49px;right:24%;font-size:44px;color:#f5b72a;animation:spin 18s linear infinite}.cta-tiles{display:flex;justify-content:center;gap:8px;margin-top:48px}.cta-tiles span{width:36px;height:38px;border-radius:5px;background:#fff0d0;color:#28170d;display:grid;place-items:center;font:20px Rye,serif;box-shadow:0 4px 0 #976b42;transform:rotate(-4deg)}.cta-tiles span:nth-child(even){transform:rotate(5deg) translateY(5px)}footer{min-height:95px;padding:20px clamp(24px,7vw,108px);background:#fff0d0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;color:#785239}.brand-footer{font-size:17px}.brand-footer .brand-mark{width:30px;height:30px;font-size:18px}footer small{font-size:11px}@keyframes board-bob{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-9px)}}@keyframes float-a{0%,100%{transform:translateY(0) rotate(12deg)}50%{transform:translateY(-17px) rotate(20deg)}}@keyframes float-b{0%,100%{transform:translateY(0) rotate(-13deg)}50%{transform:translateY(13px) rotate(-5deg)}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:800px){.nav{height:72px;padding:0 20px}.brand{font-size:18px}.brand-mark{width:32px;height:32px;font-size:19px}.nav nav{gap:14px}.nav nav>a:not(.lang){display:none}.nav .lang{font-size:11px;padding:10px 12px}.hero{padding:65px 25px 55px;grid-template-columns:1fr;text-align:center}.hero-copy{margin:auto}.lead{margin:0 auto}.social-proof{justify-content:center}.hero-scene{height:390px;margin-top:10px}.board{max-width:410px}.board-shadow{max-width:410px}.side-note{display:none}.feature-row{padding:0 20px 70px;grid-template-columns:1fr;max-width:550px;margin:auto}.feature{min-height:290px}.feature-icon{height:80px}.intro{padding:85px 22px}.orbit{width:380px;height:380px}.orbit-two{width:450px;height:450px}footer{justify-content:center;flex-wrap:wrap;text-align:center}footer>span{display:none}}@media(max-width:420px){.hero-scene{height:315px}.tile{width:34px;height:34px;font-size:23px}.tile small{font-size:8px}.board-grid{background-size:29px 29px}.board{border-width:9px}.floating-tile{width:48px;height:48px;font-size:32px}.caption-card{font-size:10px;padding:12px}.hero h1{font-size:54px}.feature{padding:25px}.nav .lang{letter-spacing:0}}
:root{--orange:#c94416;--orange2:#e8581c;--cream:#fff1cf;--paper:#f5d69f;--ink:#37180b;--green:#354f2c;--gold:#e9a517;--shadow:0 16px 0 #8e2c0c,0 25px 32px #5f260d44}
body,body *{font-family:'Jost','Century Gothic',Arial,sans-serif}
h1,h2,h3{font-family:'Jost','Century Gothic',Arial,sans-serif;font-weight:800;letter-spacing:-.035em}
.brand{display:flex;align-items:center}
.brand-logo{display:block;width:190px;height:64px;object-fit:contain}
.brand-footer .brand-logo{width:138px;height:46px}
.hero h1{max-width:640px;font-size:clamp(49px,6.6vw,86px);line-height:.98;letter-spacing:-.055em}
.hero h1 em{font-style:normal;color:#ffc845}
.app-gallery{position:relative;height:500px;display:flex;align-items:center;justify-content:center;gap:10px;perspective:900px}
.phone-shot{position:relative;width:210px;margin:0;padding:8px 8px 0;border-radius:30px;background:#fff0d0;box-shadow:0 10px 0 #80310e,0 19px 28px #42140766;transform:rotate(-4deg);z-index:2}
.phone-shot-game{width:230px;z-index:3;transform:rotate(-4deg) translateY(8px);animation:shot-float 5s ease-in-out infinite}
.phone-shot-home{width:180px;transform:rotate(5deg) translateY(-15px);animation:shot-float 5.4s ease-in-out infinite reverse}
.phone-bezel{overflow:hidden;border:6px solid #3f2114;border-radius:23px;background:#3f2114;box-shadow:inset 0 0 0 1px #d5a05f}
.phone-bezel img{display:block;width:100%;height:auto;border-radius:15px}
.phone-shot figcaption{padding:10px 4px 12px;text-align:center;color:#53240d;font-size:12px;font-weight:800;letter-spacing:.02em}
.mini-tiles{display:flex;align-items:center}
.mini-tiles img{width:28px;height:28px;object-fit:contain;margin-right:-4px;filter:drop-shadow(0 2px 1px #511d0c77)}
.icon-stack img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 4px 2px #40170755);transform:rotate(-8deg)}
.icon-stack img:nth-child(2){transform:translate(-8px,8px) rotate(5deg)}
.icon-stack img:nth-child(3){transform:translate(-16px,-4px) rotate(9deg)}
.cta-tiles img{width:39px;height:39px;object-fit:contain;filter:drop-shadow(0 4px 1px #40170755);transform:rotate(-4deg)}
.cta-tiles img:nth-child(even){transform:rotate(5deg) translateY(5px)}
.ticker{font-family:'Jost','Century Gothic',Arial,sans-serif;font-weight:800;letter-spacing:.08em;background-color:#f2b32a;background-image:linear-gradient(#f2b32a88,#f2b32a88),url('assets/paper.png');background-repeat:repeat;background-size:768px 512px}
.ticker i{font-style:normal}
@keyframes shot-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@media(max-width:800px){.brand-logo{width:162px;height:56px}.brand-footer .brand-logo{width:130px;height:44px}.app-gallery{height:440px;margin-top:6px;gap:6px}.phone-shot-game{width:min(49vw,215px)}.phone-shot-home{width:min(39vw,170px)}.phone-shot{padding:6px 6px 0;border-radius:24px}.phone-bezel{border-width:5px;border-radius:19px}.phone-bezel img{border-radius:12px}.phone-shot figcaption{font-size:11px;padding:8px 2px 10px}.hero h1{font-size:clamp(50px,12vw,66px)}}
@media(max-width:420px){.app-gallery{height:390px}.phone-shot-game{width:51vw}.phone-shot-home{width:39vw}.phone-shot-home{transform:rotate(5deg) translate(2px,-9px)}.phone-shot-game{transform:rotate(-4deg) translate(-2px,6px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* App paper is reused as a repeatable site material. The small edge values of
   the source images blend naturally at this scale. */
body{background-color:#e85813;background-image:url('assets/orange-paper-tile.png');background-repeat:repeat;background-position:0 0;background-size:768px 512px;background-attachment:scroll}
.paper-grain{display:none}
.nav,.intro,.feature-row,footer{background-color:#f1d5a5;background-image:url('assets/paper.png');background-repeat:repeat;background-size:768px 512px}
.hero,.cta{background-color:#e85813;background-image:url('assets/orange-paper-tile.png');background-repeat:repeat;background-size:768px 512px}
.hero:before,.cta:before{display:none}
.feature-orange{background-color:#c94416;background-image:linear-gradient(#c9441699,#c9441699),url('assets/orange-paper-tile.png');background-repeat:repeat;background-size:768px 512px;color:#fff1d1}
.feature-cream{background-color:#f4cf91;background-image:url('assets/paper.png');background-repeat:repeat;background-size:768px 512px}
.feature-green{background-color:#3f5b35;background-image:linear-gradient(#365d38bd,#365d38bd),url('assets/paper.png');background-repeat:repeat;background-size:768px 512px;color:#fff0d0}
.nav .lang,.feature,.caption-card{background-image:url('assets/paper.png');background-repeat:repeat;background-size:512px 341px}
.button{background-color:#f3b02a;background-image:linear-gradient(#f3b02a80,#eaa52699),url('assets/paper.png');background-repeat:repeat;background-size:512px 341px}
.button-light{background-color:#fff0d0;background-image:url('assets/paper.png');background-repeat:repeat;background-size:512px 341px}
.demo-replay-button{background-color:#f3b02a;background-image:linear-gradient(#f3b02a80,#eaa52699),url('assets/paper.png');background-repeat:repeat;background-size:512px 341px}
.play-demo{padding:96px clamp(20px,8vw,120px) 88px;background-color:#e85813;background-image:url('assets/orange-paper-tile.png');background-repeat:repeat;background-size:768px 512px;color:#fff1cf}
.demo-heading{text-align:center;margin:0 auto 42px;max-width:760px}
.demo-heading .eyebrow{color:#ffcf63}
.demo-heading h2{font-size:clamp(34px,4.5vw,56px);line-height:1.08;margin:14px 0}
.demo-layout{display:grid;grid-template-columns:minmax(320px,560px) minmax(240px,360px);align-items:center;justify-content:center;gap:clamp(28px,6vw,90px);max-width:1020px;margin:auto}
.demo-game{padding:18px;border:3px solid #713a1d;border-radius:18px;background-color:#f2d29b;background-image:url('assets/paper.png');background-repeat:repeat;background-size:512px 341px;box-shadow:0 9px 0 #762e12,0 18px 35px #46180966}
.demo-board{position:relative;display:grid;grid-template-columns:repeat(13,minmax(0,1fr));aspect-ratio:1;overflow:hidden;border:2px solid #4a2514;border-radius:6px;background-color:#f2d29b;background-image:linear-gradient(#66401e33 1px,transparent 1px),linear-gradient(90deg,#66401e33 1px,transparent 1px),url('assets/paper.png');background-size:calc(100% / 13) calc(100% / 13),calc(100% / 13) calc(100% / 13),512px 341px}
.demo-cell{position:relative;min-width:0;min-height:0;border:1px solid #79553142;background-color:transparent}
.demo-cell.dw{background-color:#d64b1877}.demo-cell.dl{background-color:#e9ae207a}.demo-cell.tl{background-color:#e9ae20b3}
.demo-cell.center{background-color:#365d3855}
.demo-star{position:absolute;left:50%;top:50%;z-index:1;color:#365d38;font-size:clamp(13px,3vw,24px);transform:translate(-50%,-50%);pointer-events:none;transition:opacity .3s}
.demo-cell.has-tile{z-index:2}
.demo-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px #39200c55);opacity:0;transform:translateY(-24px) rotate(-8deg) scale(.82)}
.demo-cell.placed img{animation:demo-tile-drop .48s cubic-bezier(.2,.9,.25,1.25) forwards}
.demo-cell.highlight{animation:demo-cell-glow .9s ease-in-out 2}
.demo-rack{display:flex;justify-content:center;gap:4px;margin:14px auto 0;padding:8px 10px;border:2px solid #8a511c;border-radius:12px;background-color:#b7791e;background-image:linear-gradient(#b7791e77,#a65a1277),url('assets/orange-paper-tile.png');background-size:512px 341px;box-shadow:0 4px 0 #753314}
.demo-rack img{width:clamp(27px,7vw,43px);height:auto;object-fit:contain;filter:drop-shadow(0 2px 1px #43190855)}
.demo-explainer{padding:28px;border:2px solid #a66d32;border-radius:16px;background-color:#f4d8a5;background-image:url('assets/paper.png');background-repeat:repeat;background-size:512px 341px;color:#37180b;box-shadow:0 7px 0 #783a19,0 14px 24px #4c1b0d55}
.demo-step{font-size:11px;font-weight:800;letter-spacing:1.5px;color:#a34418}
.demo-explainer h3{margin:14px 0 8px;font-size:26px;line-height:1.12;color:#365d38}
.demo-explainer p{min-height:50px;margin:0;color:#67452d;font-size:15px;line-height:1.55}
.demo-progress{height:6px;margin:20px 0;background:#d1b386;border-radius:6px;overflow:hidden}
.demo-progress span{display:block;width:0;height:100%;background:#df8c19;border-radius:6px}
.demo-progress.running span{animation:demo-progress 8s linear forwards}
.demo-replay-button{padding:12px 15px;border:1px solid #9d671f;border-radius:10px;color:#381807;font-weight:800;box-shadow:0 3px 0 #8a4b15;cursor:pointer}
.demo-replay-button span{margin-left:9px;font-size:18px}
.demo-caption{margin:36px auto 0;text-align:center;color:#ffe0b3;font-size:13px}
@keyframes demo-tile-drop{to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes demo-cell-glow{50%{box-shadow:inset 0 0 0 3px #e8aa28,0 0 16px #ffd766}}
@keyframes demo-progress{to{width:100%}}
@media(max-width:800px){.demo-layout{grid-template-columns:minmax(0,560px)}.demo-explainer{max-width:560px;margin:auto}.demo-game{padding:10px}.play-demo{padding:70px 18px}.demo-heading{margin-bottom:28px}}

/* Keep content at a readable width while section colors and paper stay full bleed. */
.site-wrap{width:calc(100% - 48px);max-width:1240px;margin-inline:auto}
.nav{display:block;padding-inline:0}
.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between}
.hero{display:block;padding:80px 0 88px}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(28px,4vw,64px)}
.intro-inner{text-align:center}
.feature-row{display:block;padding:0 0 110px}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.feature{min-width:0}
.cta{padding-inline:0}
.cta-inner{text-align:center}
footer{padding-inline:0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.demo-layout{width:100%}
@media(max-width:800px){
  .site-wrap{width:calc(100% - 36px);max-width:620px}
  .hero{padding:65px 0 55px;text-align:center}
  .hero-inner{grid-template-columns:minmax(0,1fr);gap:16px}
  .feature-row{padding-bottom:70px}
  .feature-grid{grid-template-columns:minmax(0,1fr)}
  .footer-inner{justify-content:center;flex-wrap:wrap;text-align:center}
}

/* Keep card surfaces visibly distinct from the shared cream section paper. */
.feature{border:1px solid #70462266;box-shadow:0 7px 0 #7b4b26,0 14px 26px #512a1530}
.feature-orange{background-color:#b93a13;background-image:linear-gradient(#b93a13a6,#b93a13a6),url('assets/orange-paper-tile.png');background-repeat:repeat;background-size:768px 512px;color:#fff4d8}
.feature-orange h3,.feature-green h3{color:#fff4d8}
.feature-orange p,.feature-green p,.feature-orange .feature-num,.feature-green .feature-num{color:#fff4d8}
.feature-cream{background-color:#e8c281;background-image:linear-gradient(#e8c28172,#e8c28172),url('assets/paper.png');background-repeat:repeat;background-size:768px 512px;color:#37180b}
.feature-cream h3,.feature-cream p,.feature-cream .feature-num{color:#37180b}
.feature-green{background-color:#355433;background-image:linear-gradient(#294729a8,#294729a8),url('assets/paper.png');background-repeat:repeat;background-size:768px 512px;color:#fff4d8}
.feature-row{padding-top:72px}
.feature-cream{background-color:#f2d29b;background-image:url('assets/paper.png');background-repeat:repeat;background-size:768px 512px;color:#37180b}
.feature-cream h3,.feature-cream p,.feature-cream .feature-num{color:#37180b}
@media(max-width:800px){.feature-row{padding-top:48px}}

/* Flatten broad lighting variations before repeating the orange app paper. */
body{background-image:url('assets/orange-paper-tile.png');background-repeat:repeat;background-size:640px 427px}
.hero,.cta,.play-demo{background-image:url('assets/orange-paper-tile.png');background-repeat:repeat;background-size:640px 427px}
.feature-orange{background-image:linear-gradient(rgba(185,58,19,.14),rgba(185,58,19,.14)),url('assets/orange-paper-tile.png');background-repeat:repeat;background-size:640px 427px}
.demo-rack{background-image:linear-gradient(rgba(183,121,30,.28),rgba(166,90,18,.28)),url('assets/orange-paper-tile.png');background-repeat:repeat;background-size:640px 427px}
.feature.demo-replay{padding:30px 28px 32px;border:1px solid #a66d32;border-radius:14px;background-color:#f3ca62;background-image:linear-gradient(rgba(246,194,71,.38),rgba(246,194,71,.38)),url('assets/paper.png');background-repeat:repeat;background-size:640px 427px;color:#37180b;box-shadow:0 7px 0 #7b4b26,0 14px 26px #512a1530}
.feature.demo-replay h3,.feature.demo-replay p,.feature.demo-replay .feature-num{color:#37180b}

/* The playable illustration below uses the same measurements, surfaces and controls as the app. */
.demo-game{width:min(100%,430px);max-width:430px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.demo-app-view{--demo-ink:#21150d;--demo-paper:#f6ddb0;--demo-cream:#fff1d0;--demo-green:#315c37;--demo-paper-image:url('assets/paper.png');width:100%;aspect-ratio:430/895;min-height:0;padding:16px 13px 28px;overflow:hidden;color:var(--demo-ink);background:#e85813 url('assets/orange-paper.png') center/cover;font-family:Jost,'Century Gothic',Arial,sans-serif;box-shadow:0 0 45px #6d351833}
.demo-app-view,.demo-app-view *{box-sizing:border-box;font-family:Jost,'Century Gothic',Arial,sans-serif}
.demo-score-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.demo-score-card{min-width:0;display:flex;align-items:center;gap:12px;min-height:58px;padding:7px 15px;border:1px solid #ffe8bc;border-radius:15px;background:var(--demo-paper) var(--demo-paper-image) center/cover;box-shadow:0 3px 0 #803b19,0 4px 5px #57270966}
.demo-player-score{min-width:0;display:flex;flex-direction:column;line-height:1.08}
.demo-player-score>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px;font-weight:700}
.demo-player-score>b{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.demo-player-symbol{position:relative;flex:0 0 30px;width:30px;height:36px;color:#806141}
.demo-player-symbol:before{content:'';position:absolute;top:1px;left:8px;width:16px;height:17px;border-radius:50%;background:currentColor;box-shadow:0 1px 0 #fff0c875}
.demo-player-symbol:after{content:'';position:absolute;left:2px;bottom:0;width:28px;height:17px;border-radius:50% 50% 35% 35%;background:currentColor;box-shadow:0 1px 0 #fff0c875}
.demo-player-two{color:#bd4d16}
.demo-game-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;height:59px;min-height:59px;padding:6px 8px;margin-bottom:12px;border:1px solid #ffe8bc;border-radius:15px;background:var(--demo-paper) var(--demo-paper-image) center/cover}
.demo-turn-label{min-width:0;display:flex;align-items:center;justify-content:center;min-height:44px;padding:5px 8px;border-radius:15px;background:linear-gradient(#295c34e8,#295c34e8),var(--demo-paper-image) center/cover;color:#fff1cf;font-size:clamp(18px,5.8vw,27px);font-weight:800;line-height:1.08;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-align:center;box-shadow:inset 0 1px 0 #193f27,0 1px 0 #fff2c5}
.demo-clock{display:grid;grid-template-columns:24px 78px;align-items:center;justify-items:center;gap:7px;padding-left:14px;border-left:1px solid #76522e}
.demo-clock-icon{width:24px;height:28px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
.demo-timer{position:relative;top:2px;display:flex;align-items:center;justify-content:center;width:78px;height:36px;font-family:Arial,sans-serif!important;font-size:28px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.demo-board-wrap{padding:4px;border:1px solid #6b2a10;border-radius:13px;background:#783a1d;box-shadow:inset 0 0 0 1px #ba6b35,0 2px 0 #ffb04466}
.demo-board{position:relative;display:grid;grid-template-columns:repeat(13,minmax(0,1fr));grid-template-rows:repeat(13,minmax(0,1fr));width:100%;height:auto;aspect-ratio:1;gap:0;padding:0;overflow:hidden;border:1px solid #4a2514;border-radius:7px;background:var(--demo-paper) var(--demo-paper-image) center/100% 100% no-repeat}
.demo-cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;background:#f7dfac08;box-shadow:inset -1px -1px 0 #674323b3,inset 1px 1px 0 #fff0c966;transition:background-color .18s ease,box-shadow .18s ease}
.demo-cell.dw{background-color:#f4b019cf}.demo-cell.dl{background-color:#eb6a08d9}.demo-cell.tl{background-color:#d8450be0}.demo-cell.center{background-color:#60331ce6}
.demo-center-mark{display:block;width:77%;height:77%;background:#f3a39b;clip-path:polygon(50% 0,60% 29%,85% 15%,72% 40%,100% 50%,72% 60%,85% 85%,60% 72%,50% 100%,40% 72%,15% 85%,28% 60%,0 50%,28% 40%,15% 15%,40% 29%)}
.demo-cell.has-tile{z-index:2}
.demo-board-tile{position:relative;z-index:2;width:100%;height:100%;opacity:0;transform:translateY(-18px) rotate(-6deg) scale(.84);filter:drop-shadow(0 1px 1px #341d0f61)}
.demo-board-tile img{display:block;width:100%;height:100%;object-fit:fill}
.demo-cell.placed .demo-board-tile{animation:demo-app-tile-drop .42s cubic-bezier(.2,.9,.25,1.25) forwards}
.demo-cell.highlight{animation:demo-app-cell-glow .9s ease-in-out 2}
.demo-rack-area{margin-top:13px}
.demo-rack{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:4px;min-height:60px;margin:0;padding:6px 7px 8px;border:2px solid #efbc62;border-radius:20px;background:linear-gradient(#713315db,#773415db),var(--demo-paper-image) center/cover;box-shadow:inset 0 5px 9px #461d0b66,inset 0 -2px 3px #3e1b0d40,0 2px 0 #a64a15}
.demo-rack img{display:block;width:min(50px,calc((100% - 32px)/8));height:auto;flex:0 0 min(50px,calc((100% - 32px)/8));max-width:50px;object-fit:contain;filter:drop-shadow(0 2px 1px #2c16097a) drop-shadow(0 4px 3px #2c160938)}
.demo-shuffle{display:grid;place-items:center;width:min(50px,calc((100% - 32px)/8));flex:0 0 min(50px,calc((100% - 32px)/8));aspect-ratio:1;padding:4px;border:1px solid #d3b175;border-radius:12px;background:linear-gradient(145deg,#fff4d8,#ebd4a9 70%,#d7b77c);box-shadow:inset 1px 1px 0 #fff,inset -1px -2px 0 #80613b45,0 2px 2px #51351f65;color:#49331c}
.demo-shuffle svg{width:80%;height:80%;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.demo-actions{display:grid;grid-template-columns:66px minmax(0,1fr) 66px;align-items:center;gap:16px;margin:14px 4px 0}
.demo-actions button{position:relative;min-width:0;min-height:56px;padding:10px 14px;border:1px solid #be955d;border-radius:14px;background:linear-gradient(#fff1d242,#e3bb7933),var(--demo-paper-image) center/cover;color:var(--demo-ink);font-size:14px;font-weight:800;line-height:1.12;text-transform:uppercase;box-shadow:inset 0 0 0 2px #fff0d4b3,inset 0 -3px 2px #98632940,0 3px 0 #845321,0 5px 5px #57270966;pointer-events:none}
.demo-actions .demo-icon-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:5px}
.demo-icon-button svg{display:block;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:3.7;stroke-linecap:round;stroke-linejoin:round}
.demo-icon-button span{font-size:8px;font-weight:700;letter-spacing:.05em}
.demo-actions .demo-primary-action{min-height:56px;border:3px solid #f6d49a;border-radius:17px;background:linear-gradient(#28552ee8,#28552ee8),var(--demo-paper-image) center/cover;color:var(--demo-cream);font-size:23px;letter-spacing:.015em;box-shadow:inset 0 0 0 1px #fff0ce80,0 3px 0 #774b20,0 5px 5px #57270966}
.demo-game-footer{display:grid;grid-template-columns:1fr;justify-items:center;gap:6px;margin:12px 4px 0;padding-top:8px;border-top:1px solid #99603655;color:#4c230f;font-size:10px;font-weight:700}
.demo-game-info{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;align-items:center;text-transform:capitalize}
.demo-footer-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(11px,3.5vw,17px);color:#633517;font-size:clamp(12px,3.6vw,14px);font-weight:800}
.demo-footer-links span{padding:4px 0 3px;border-bottom:1px solid #9b6a40aa;white-space:nowrap}
.demo-hint{margin:6px 7px 0;text-align:center;font-size:10px;line-height:1.35;color:#68462d}
@keyframes demo-app-tile-drop{to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes demo-app-cell-glow{50%{box-shadow:inset 0 0 0 3px #e8aa28,0 0 16px #ffd766}}
@media(max-width:359px){.demo-score-card{padding-inline:9px;gap:8px}.demo-player-score>span{font-size:16px}.demo-game-head{gap:9px}.demo-clock{grid-template-columns:21px 65px;padding-left:9px;gap:4px}.demo-clock-icon{width:21px}.demo-timer{width:65px;font-size:24px}.demo-actions{grid-template-columns:56px minmax(0,1fr) 56px;gap:12px}.demo-actions .demo-primary-action{font-size:20px}.demo-icon-button span{font-size:11px}.demo-rack{padding-inline:6px;min-height:51px;gap:3px}.demo-rack img,.demo-shuffle{width:calc((100% - 24px)/8);flex-basis:calc((100% - 24px)/8)}.demo-shuffle{padding:3px;border-radius:8px}.demo-game-footer{margin-inline:0}}
.demo-layout{grid-template-columns:minmax(0,430px) minmax(240px,360px);gap:clamp(28px,5vw,60px);max-width:850px}
.demo-game{justify-self:center}
@media(max-width:800px){.demo-layout{grid-template-columns:minmax(0,430px)}}

.demo-game-info{text-transform:none}
.demo-progress.running span{animation:demo-progress 10s linear forwards}
@media(max-width:359px){.demo-app-view{height:auto;min-height:calc(100vw * 1.96);aspect-ratio:auto;overflow:visible}}

/* Keep the complete app preview inside a single, compact phone silhouette. */
.demo-layout{grid-template-columns:minmax(0,454px) minmax(260px,360px);gap:clamp(28px,4vw,54px);max-width:900px}
.demo-game{width:min(100%,454px);max-width:454px}
.demo-phone{position:relative;width:100%;padding:15px 11px 21px;border:3px solid #4e2919;border-radius:42px;background:linear-gradient(145deg,#28170f,#67432b 12%,#332016 28%,#1d120d 70%,#614128);box-shadow:inset 0 0 0 2px #c3975e, inset 0 0 0 5px #3c2417,0 9px 0 #4c2414,0 20px 42px #3d170d70}
.demo-phone:before{content:'';position:absolute;z-index:3;top:6px;left:50%;width:46px;height:4px;transform:translateX(-50%);border-radius:9px;background:#160e0a;box-shadow:0 1px 0 #a27a4f}
.demo-phone:after{content:'';position:absolute;z-index:3;bottom:7px;left:50%;width:72px;height:4px;transform:translateX(-50%);border-radius:9px;background:#f3dbb1;box-shadow:0 1px 3px #1c1009}
.demo-app-view{border-radius:27px;box-shadow:inset 0 0 0 1px #5b2e18,0 0 0 1px #160e0a}
.demo-explainer{height:340px;min-height:340px;display:flex;flex-direction:column;overflow:hidden}
.demo-explainer-copy{flex:1 1 auto;min-height:0;transition:opacity .32s ease,transform .42s cubic-bezier(.2,.75,.25,1),filter .32s ease}
.demo-explainer-copy.is-transitioning{opacity:0;transform:translateY(10px) scale(.985);filter:blur(2px)}
.demo-step{display:block;height:16px;min-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.demo-explainer h3{height:64px;min-height:64px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.demo-explainer p{height:70px;min-height:70px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.demo-progress{flex:0 0 6px}
.demo-replay-button{flex:0 0 auto;margin-top:auto}
@media(max-width:800px){.demo-layout{grid-template-columns:minmax(0,454px);max-width:454px}.demo-game{justify-self:stretch}.demo-explainer{width:100%;max-width:none}}
@media(max-width:359px){.demo-phone{padding:13px 8px 19px;border-radius:34px}.demo-app-view{height:auto;min-height:calc(100vw * 1.96);aspect-ratio:auto;overflow:hidden;border-radius:23px}}
@media(prefers-reduced-motion:reduce){.demo-explainer-copy{transition:none}.demo-explainer-copy.is-transitioning{opacity:1;transform:none;filter:none}}