/* LUMI | independent 2.5D landing sections + interactive flow refinements */
.flow-programar{--flow:#117b88;--wash:#dcf4f3;--flow-rgb:17,123,136}
.flow-programar .code-preview{background:#f6fcfd}
.flow-programar .code-window{border-color:#203c49;box-shadow:3px 4px 0 #0e4657}
.code-lines{max-height:229px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#526a7a #162334}
.code-lines>.code-line{display:grid;grid-template-columns:23px minmax(0,1fr);align-items:center;gap:6px;width:100%;height:24px;min-height:24px;padding:0 5px 0 0;background:transparent;border:0;border-left:3px solid transparent;color:inherit;text-align:left;white-space:pre;transition:background .18s}
.code-lines>.code-line:hover{background:#1e3945}
.code-lines>.code-line.code-highlight{background:#174957;border-left-color:#34d8ce}
.code-lines>.code-line:focus-visible{outline:2px solid #60ebdf;outline-offset:-2px}
.code-lines>.code-line code{font-size:10px}
.code-lines .kw{color:#80e1d2}.code-lines .fn{color:#8acaff}
.flow-programar .code-explanation{background:#e0f4f3;min-height:78px}
.flow-programar .code-explanation>span{background:#087b83}
.flow-programar .code-explanation p{color:#365b68}
.code-tap-hint{font-size:9px;color:#49737c;font-weight:700;margin:8px 12px 10px}
.flow-symbol{border:1px solid rgba(var(--flow-rgb),.22);border-radius:13px;background:linear-gradient(147deg,#fff,var(--wash));box-shadow:3px 3px 0 rgba(var(--flow-rgb),.13)}
.flow-symbol svg{stroke-width:1.9}
.flow-card{min-height:505px}
.concept-explore{margin:0 11px 11px;padding:8px 0 0;border-top:1px solid #dcefe8}
.concept-explore-heading{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:7px}
.concept-explore-heading>span{font-size:9px;font-weight:900;letter-spacing:.045em;color:#087d6b}
.concept-explore-heading small{font-size:9px;color:#6c8494}
.concept-terms{display:flex;gap:5px;flex-wrap:wrap}
.concept-terms button{background:#f2faf7;color:#286f61;border:1px solid #cce7df;border-radius:5px;font-size:10px;padding:6px 7px;font-weight:750;transition:background .2s,border-color .2s}
.concept-terms button:hover,.concept-terms button.selected{background:#007e69;color:#fff;border-color:#007e69}
.concept-definition{font-size:10.6px;line-height:1.35;color:#385e69;background:#ecfaf5;border-left:3px solid #00a68b;padding:8px 9px;margin:7px 0 0;border-radius:0 5px 5px 0;min-height:43px}
.concept-definition strong{color:#007a65}
.flash-navigation{margin-bottom:15px}
/* Editorial perspective cards, physically layered with a soft pink atmosphere. */
.showcase-section{position:relative;isolation:isolate;overflow:hidden;background:#fff;color:#061034}
.showcase-section .section-inner{max-width:1650px}
.showcase-layout{display:grid;grid-template-columns:minmax(350px,.75fr) minmax(620px,1.25fr);gap:18px;align-items:center;min-height:780px;padding-top:75px;padding-bottom:65px}
.showcase-copy{position:relative;z-index:6;min-width:0}
.showcase-eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:15px;font-weight:900;letter-spacing:.02em;padding:0 0 8px;color:#0b1940}
.showcase-star{color:#f92b60;font-size:27px;line-height:1}
.showcase-copy h2{max-width:620px;margin:22px 0 22px;font-size:clamp(48px,4.5vw,79px);font-weight:900;line-height:1.035;letter-spacing:-.086em}
.showcase-copy h2 em{font-style:normal;color:#f82b61}
.showcase-copy>p{max-width:560px;color:#455d80;font-size:clamp(18px,1.4vw,22px);line-height:1.44;letter-spacing:-.035em;margin:0}
.showcase-cta{margin-top:40px;min-width:330px;font-size:24px;padding:0 31px;min-height:79px;border-radius:11px;justify-content:space-between}
.routine-section{background:radial-gradient(ellipse at 80% 52%,#fff2f7 0,#fff 57%);border-top:1px solid #f0f1f6}
.routine-points{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:42px;max-width:620px}
.routine-points>span{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.3;font-weight:800;letter-spacing:-.025em;white-space:nowrap}
.routine-points svg{color:#091b44;width:22px;height:22px;stroke-width:2.4}
.routine-art{position:relative;height:630px;min-width:0;perspective:1300px}
.routine-cloud,.pricing-cloud{position:absolute;pointer-events:none;z-index:-1;background:linear-gradient(125deg,#ffcfe0 2%,#ff89b7 61%,#f9bbd1 100%);filter:drop-shadow(0 34px 34px #e991b32a);opacity:.6}
.routine-cloud{width:95%;height:80%;left:4%;top:13%;border-radius:44% 58% 45% 36%;transform:rotate(-18deg);clip-path:polygon(6% 31%,44% 0,73% 17%,97% 2%,100% 63%,72% 100%,30% 88%,0 72%)}
.study-panel{position:absolute;border:2px solid #102e4a;border-radius:18px;background:linear-gradient(145deg,#fff,#f5faff);box-shadow:8px 12px 0 #102c49,15px 30px 35px #1234512e;overflow:hidden;transform-style:preserve-3d;transition:transform .35s,box-shadow .35s;will-change:transform}
.study-panel:hover{box-shadow:8px 14px 0 #102c49,18px 39px 45px #12345130}
.study-panel>header{height:66px;border-bottom:1px solid #d9e6f0;display:flex;align-items:center;gap:11px;padding:0 17px;color:#081b3b}
.study-panel>header strong{font-size:21px;font-weight:860;letter-spacing:-.07em}
.study-panel>header svg{width:25px;height:25px;margin-left:auto;color:#3379a5}
.study-index{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;background:#dceffb;color:#216699;font-weight:900;font-size:12px}
.study-panel-content{padding:22px 20px;position:relative}
.study-kicker{color:#4c86ae;font-size:9px;letter-spacing:.1em;font-weight:900}
.study-panel h3{font-size:19px;line-height:1.22;letter-spacing:-.055em;margin:12px 0 9px}
.study-panel-content>p{font-size:13px;line-height:1.5;color:#526b83;margin:0}
.study-footer-note{display:block;margin-top:24px;color:#6c8baa;font-size:10px;font-weight:900;letter-spacing:.09em}
.study-theory{left:0;top:22%;width:42%;min-height:392px;z-index:2;transform:rotate(-7deg) rotateY(10deg) translateY(8px)}
.study-theory:hover{transform:rotate(-4deg) rotateY(5deg) translateY(-6px)}
.study-chart{background:#f8fcfd;border:1px solid #dfedf3;border-radius:12px;margin-top:20px;padding:12px 8px 0}
.study-chart-label{font-size:10px;font-weight:800;color:#496d89;display:flex;justify-content:space-between;gap:5px}
.study-chart-label span{color:#f14874}
.study-chart svg{width:100%;height:104px;stroke-width:1.4;display:block}
.study-solve{left:32%;top:10%;width:43%;min-height:465px;z-index:4;transform:rotate(1deg) rotateY(-7deg) translateY(-3px);background:#fff}
.study-solve:hover{transform:rotate(0) rotateY(0) translateY(-13px)}
.study-solve .study-index{background:#ffe0eb;color:#f02e64}
.study-more{margin-left:auto;color:#7c8daa;letter-spacing:2px}
.study-equation{display:flex;align-items:center;justify-content:center;gap:10px;background:#f7faff;border:1px solid #e4edf6;border-radius:9px;padding:16px 4px;margin:17px 0;font:22px Georgia,serif;color:#061936}
.study-equation>span:first-child{display:flex;flex-direction:column;font-size:19px;line-height:1}
.study-equation sub{font-size:10px;line-height:1.3}
.study-fraction{display:flex;flex-direction:column;align-items:center;gap:3px}
.study-fraction>span:first-child{border-bottom:1px solid #061936;padding:0 8px 4px}
.study-checkline{display:flex;gap:11px;padding:10px 4px;border-bottom:1px solid #e7edf3;align-items:center}
.study-checkline>span{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:7px;color:#fff;background:#f92b62;font-weight:850}
.study-checkline strong{display:block;font-size:12px}
.study-checkline small{font-size:11px;color:#71849c}
.study-checkline.checked>span{background:#008f78}
.study-done{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.07em;font-weight:900;color:#008d71;margin-top:13px}
.study-done svg{width:18px;height:18px}
.study-flash{left:65%;top:24%;width:36%;min-height:375px;z-index:3;transform:rotate(7deg) rotateY(-7deg)}
.study-flash:hover{transform:rotate(3deg) rotateY(0) translateY(-8px)}
.study-flash .study-index{background:#fff0cf;color:#bd700a}
.study-qa-card{margin-top:20px;background:#fff;border:1px solid #dfebf5;border-radius:13px;box-shadow:6px 7px 0 #ffe2ec,12px 13px 0 #e1f5f1;padding:21px 17px;min-height:184px;position:relative;z-index:1}
.study-qa-card>span:first-child{font-size:10px;color:#7e8fa6;font-weight:800}
.study-qa-card p{font-size:17px;font-weight:760;letter-spacing:-.035em;line-height:1.32}
.study-reveal{font-size:10px;font-weight:800;color:#bf700b}
.study-qa-back{display:none}
.routine-cap{position:absolute;z-index:5;top:0;right:21%;width:115px;height:78px;border:2px solid #142b4b;background:#071d3d;box-shadow:9px 10px 0 #203b61;border-radius:12px;display:grid;place-items:center;transform:rotate(20deg) skew(-15deg);color:#fff}
.routine-cap svg{width:78px;height:78px;stroke-width:1.15}
.routine-spark{position:absolute;z-index:6;color:#fa2564;font-size:45px;text-shadow:0 4px 8px #f4457944}
.routine-spark-a{left:8%;top:8%}.routine-spark-b{right:-1%;bottom:14%}
.pricing-showcase{background:radial-gradient(ellipse at 78% 65%,#fff0f6 0%,#fff 63%);border-top:1px solid #f0e8ef}
.pricing-layout{min-height:825px;position:relative}
.pricing-art{position:relative;min-width:0;height:705px;perspective:1400px}
.pricing-cloud{width:88%;height:88%;left:8%;top:7%;border-radius:48% 34% 52% 38%;transform:rotate(-13deg);clip-path:polygon(7% 0,89% 9%,100% 61%,69% 100%,0 77%)}
.tier-card{position:absolute;width:45%;min-width:0;display:flex;flex-direction:column;border:2px solid #0e2440;border-radius:22px;overflow:hidden;transform-style:preserve-3d;transition:transform .35s,box-shadow .35s}
.tier-free{left:5%;top:16%;height:495px;z-index:2;background:linear-gradient(125deg,#fff,#f1f8ff);box-shadow:9px 12px 0 #0d4560,15px 34px 36px #122e4a42;transform:rotate(-3deg) rotateY(9deg) translateY(15px)}
.tier-free:hover{transform:rotate(-1deg) rotateY(4deg) translateY(0)}
.tier-student{left:49%;top:6%;height:555px;z-index:3;background:linear-gradient(150deg,#f42b69,#c9004f 75%);color:#fff;box-shadow:9px 12px 0 #260b34,19px 36px 45px #ad12474f;transform:rotate(3deg) rotateY(-8deg)}
.tier-student:hover{transform:rotate(1deg) rotateY(-3deg) translateY(-9px)}
.tier-card-header{padding:26px 24px 19px;min-height:205px}
.tier-cap{display:block;width:38px;height:37px;margin-bottom:10px;color:inherit}
.tier-cap svg{width:38px;height:36px;stroke-width:2.1}
.tier-label{display:block;font-size:10px;letter-spacing:.12em;font-weight:900;opacity:.8}
.tier-card h3{font-size:clamp(29px,2.7vw,42px);letter-spacing:-.078em;line-height:1;margin:11px 0 12px}
.tier-card-header p{font-size:15px;line-height:1.45;letter-spacing:-.03em;margin:0;max-width:230px}
.tier-student .tier-card-header{padding-top:37px;min-height:235px}
.tier-bookmark{position:absolute;top:-6px;right:19px;width:34px;height:73px;z-index:3;background:linear-gradient(115deg,#ffe6a0,#ef9f19);border:1px solid #ba6924;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);filter:drop-shadow(4px 4px 2px #99033533)}
.tier-body{margin:0 9px 9px;background:#fff;flex:1;border-radius:14px;display:flex;flex-direction:column;padding:17px 15px 13px;color:#061637;box-shadow:inset 0 1px 0 #d6e2ef}
.tier-card ul{list-style:none;padding:0;margin:0 0 13px;flex:1}
.tier-card li{display:flex;align-items:center;gap:9px;margin:0;padding:10px 0;font-size:clamp(11px,.97vw,15px);font-weight:600;letter-spacing:-.045em}
.tier-card li svg{background:#008e77;color:#fff;border-radius:50%;width:22px;height:22px;padding:4px;stroke-width:3;flex:none}
.tier-button{min-height:58px;width:100%;padding:0 13px;justify-content:space-between;font-size:clamp(13px,1.06vw,17px);border-radius:8px}
.tier-button svg{width:20px;height:20px}
.tier-student-cta{background:#ed0053;border-color:#ed0053;color:#fff;box-shadow:0 5px 8px #ed005328}
.tier-student-cta:hover{background:#ce0045}
.pricing-decoration{position:absolute;display:grid;place-items:center;background:#fff;border:1px solid #c7dcf7;border-radius:16px;box-shadow:6px 9px 0 #e3eefa,10px 20px 25px #183b6425;color:#e82a61;transform:rotate(15deg)}
.pricing-decoration svg{width:48px;height:48px;stroke-width:1.6}
.pricing-decoration-a{top:10%;right:0;width:93px;height:93px;z-index:2}
.pricing-decoration-b{bottom:5%;left:2%;width:108px;height:98px;transform:rotate(-12deg);z-index:1;color:#1473e7}
.pricing-side-note{margin-top:31px;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:750;color:#526b89}
.pricing-side-note span{font-size:28px;color:#f52c62}
.pricing-disclaimer{position:absolute;bottom:22px;left:65px;color:#738199;font-size:11px;margin:0;max-width:540px}
@media(max-width:1300px){
  .showcase-layout{grid-template-columns:minmax(310px,.78fr) minmax(550px,1.22fr);gap:0}
  .showcase-copy h2{font-size:clamp(44px,4.4vw,67px)}
  .routine-points{gap:13px}
  .routine-points>span{font-size:11px}
  .study-panel>header{padding:0 12px}.study-panel-content{padding:18px 13px}
  .tier-card-header{padding-left:18px;padding-right:16px}
  .tier-card li{font-size:12px}
}
@media(max-width:1000px){
  .showcase-layout{grid-template-columns:1fr;gap:18px;padding-top:78px;padding-bottom:50px}
  .showcase-copy h2{max-width:740px;font-size:clamp(45px,6.1vw,73px)}
  .showcase-copy>p{max-width:720px}
  .routine-art,.pricing-art{max-width:830px;width:100%;margin:0 auto}
  .routine-points{margin-top:26px}
  .pricing-layout{padding-bottom:94px}
  .pricing-disclaimer{bottom:25px;left:34px}
}
@media(max-width:650px){
  .showcase-layout{padding:61px 22px 38px;gap:8px}
  .showcase-eyebrow{font-size:12px}
  .showcase-copy h2{font-size:clamp(28px,7.65vw,36px);line-height:1.09;letter-spacing:-.07em;overflow-wrap:break-word;text-wrap:balance;margin:15px 0 19px}
  .showcase-copy>p{font-size:17px;line-height:1.5}
  .showcase-cta{min-height:62px;width:100%;min-width:0;margin-top:29px;font-size:20px}
  .routine-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;max-width:100%}
  .routine-points>span{font-size:11px;white-space:normal;min-width:0}
  .routine-points svg{width:20px;height:20px;flex:none}
  .routine-art{height:780px;margin-top:23px}
  .study-theory{left:3%;top:4px;width:72%;min-height:340px;transform:rotate(-7deg) scale(.94);transform-origin:top left}
  .study-solve{left:20%;top:164px;width:72%;transform:rotate(2deg);min-height:440px}
  .study-flash{left:4%;top:494px;width:69%;min-height:302px;z-index:5;transform:rotate(-5deg) scale(.88);transform-origin:top left}
  .study-theory:hover{transform:rotate(-7deg) scale(.94)}
  .study-solve:hover{transform:rotate(2deg) translateY(-8px)}
  .study-flash:hover{transform:rotate(-5deg) scale(.88)}
  .study-panel>header{height:55px}.study-panel>header strong{font-size:19px}
  .study-solve .study-panel-content{padding:14px}
  .study-solve .study-equation{padding:12px 0;font-size:17px}
  .study-solve h3{font-size:16px}
  .routine-cap{width:80px;height:60px;top:0;right:4%}
  .routine-cap svg{width:60px;height:60px}
  .pricing-art{height:1120px;margin-top:24px}
  .tier-free{left:0;top:12px;width:75%;height:473px;transform:rotate(-3deg)}
  .tier-student{left:13%;top:495px;width:74%;height:516px;transform:rotate(3deg)}
  .tier-free:hover{transform:rotate(-2deg)}
  .tier-student:hover{transform:rotate(2deg)}
  .tier-card-header{min-height:200px}
  .tier-student .tier-card-header{min-height:216px}
  .tier-card h3{font-size:32px}
  .tier-card li{font-size:12px}
  .tier-card li svg{width:20px;height:20px}
  .tier-card-header p{font-size:13px}
  .tier-button{font-size:14px;min-height:51px}
  .pricing-decoration-a{top:22%;right:-7%}
  .pricing-decoration-b{bottom:11%;left:-5%}
  .pricing-layout{padding-bottom:102px}
  .pricing-disclaimer{bottom:27px;left:22px;right:22px;max-width:none;line-height:1.45}
}
@media(max-width:390px){
  .concept-terms button{font-size:9px;padding:5px}
  .concept-definition{font-size:10px}
  .routine-art{height:765px}
  .study-solve{width:76%;left:19%}
  .tier-free{width:81%}.tier-student{width:77%;left:13%}
}
@media(prefers-reduced-motion:reduce){.study-panel,.tier-card,.code-lines>.code-line{transition:none}.study-panel:hover,.tier-card:hover{transform:none}}